In this blog, we will explore Server-Side Rendering (SSR) and how to achieve it using React. Before delving into SSR, it’s essential to understand Client-Side Rendering (CSR) and why SSR is needed.
Client-Side Rendering (CSR):
Client-side rendering is the conventional approach where web page rendering primarily occurs on the client side, within the user’s web browser. In CSR, React components are loaded into the browser, and the browser executes JavaScript to render these components directly into the Document Object Model (DOM).
Drawbacks of CSR:
1. SEO (Search Engine Optimization): Traditional CSR may not be SEO-friendly because search engine crawlers often do not execute JavaScript.
2. Initial Load Time: Large JavaScript bundles can extend the initial load time of the application.
3. Browser Compatibility: Older browsers or those with limited JavaScript support may not render the application correctly, limiting its reach and accessibility.
Now that we’ve established the context of CSR, we can delve into the advantages and implementation of Server-Side Rendering in React.
Server-Side Rendering (SSR):
Server-side rendering in React is an approach where the rendering of web pages primarily occurs on the server side before the content is sent to the client’s web browser. In SSR, React components are rendered on the server, and the resulting HTML is sent to the browser for display.
Benefits of SSR:
1. Improved SEO: SSR is highly SEO-friendly because search engine crawlers receive fully rendered HTML content. This makes it easier for search engines to index the content, leading to better search rankings.
2. Faster Initial Load: Since the server sends pre-rendered HTML, users can see content sooner, even on slower network connections.
3. Content Accessibility: SSR ensures that content is accessible to a broader range of users, including those with limited JavaScript support or using assistive technologies like screen readers.
4. Social Media Sharing: When sharing links on social media platforms, pre-rendered HTML from SSR provides a rich preview of the content, including images and metadata.
In React, SSR can be achieved using various tools and libraries, i.e.,
1. Next.js
2. Custom server setups: It involves rendering React components on the server and sending the generated HTML to the client. This process ensures that users receive fully rendered content, improving performance and SEO.
In this we will learn how to achieve SSR using a custom server setup:
1. Create a react app using npx:
2. Install required dependencies:
3. Set up your project structure:
4. Inside the index.html folder instead of ReactDOM.render, we have to use hydrateRoot.
hydrateRoot is used to hydrate a root concurrent tree, which means it’s used to attach event listeners and set up any client-side interactivity for an HTML structure generated on the server.
5. Add the following configuration in the babelrc file
Finally, the Express server is started and listens on port 8080. When a client makes a request, the server renders the React app on the server and sends the fully rendered HTML as the response.
To run this code first you need to create a build and then start the server for which you need to type:
1. npm run build
2. npx nodemon –exec npx babel-node server.js
That’s all for this blog. Share your thoughts about this approach in the comments
Author: Kamran
Do contact us at sales@inaraconsultancy.com If you want to improve the performance of your website and make it rich SEO friendly.
Leave a Reply