Server side rendering

 

Server-Side Rendering (SSR):

Server-Side Rendering is a technique in which the HTML content of a web application is generated and rendered on the server, and the fully rendered page is then sent to the client’s browser. This allows faster initial page load, better search engine optimization (SEO), and improved accessibility compared to client-side rendering, where rendering is done in the browser using JavaScript.


5.10 Server-Side Rendering (SSR)

Server-Side Rendering (SSR) is a technique in which the HTML contents of a React application are rendered on the server before being sent to the client. With SSR, the initial page load is faster, and it improves Search Engine Optimization (SEO). The server creates the HTML page with all necessary contents, and the user receives a fully rendered HTML page without waiting for JavaScript or CSS files to load. This provides a better user experience compared to seeing a blank screen while waiting for client-side rendering.

SSR is widely used in popular JavaScript frameworks like React, Angular, and Preact. Many large-scale websites such as Facebook, Twitter, Walmart, and Amazon use SSR for faster page loads and better SEO.

How SSR Works

When a user requests a page, the server retrieves data from backend APIs and generates the HTML using React’s rendering engine. This HTML page is sent to the client along with the required JavaScript files. The browser immediately displays the HTML content, and after the initial load, the application behaves like a typical React application with dynamic interactions handled by client-side JavaScript.

The process of attaching client-side logic to server-rendered HTML is called hydration. For this, React provides the ReactDOM.hydrate() method, which utilizes the existing server-rendered HTML instead of replacing it.

import { App } from './components/App';
ReactDOM.hydrate(<App />, document.getElementById('app'));

Advantages of SSR

  1. Easy Indexing by Search Engines – Content is pre-rendered on the server, so search engines can easily index it.
  2. Fast Load Time – Pages load faster, improving overall user experience.
  3. Better Social Media Sharing – SSR supports protocols like Facebook’s Open Graph and Twitter Cards, which are not well supported in client-side rendering.

Disadvantages of SSR

  1. Increased Server Load – Rendering content for every request increases server cost and resource usage.
  2. Slower Rendering for Complex Apps – SSR is suitable for static or moderately dynamic content but may slow down for highly complex applications.

Difference Between SSR and CSR

  • In SSR, HTML content is generated on the server; in CSR (Client-Side Rendering), it is generated on the client.
  • SSR sends pre-rendered HTML, while CSR sends minimal HTML and loads JavaScript later.
  • SSR requires more server-side configuration; CSR requires less.
  • SSR is better for SEO and fast initial load; CSR is better for highly dynamic interfaces.

Performance Parameters in SSR

  1. TTFB (Time To First Byte): Time from request to receiving the first byte.
  2. FCP (First Contentful Paint): Time when first content appears on the screen.
  3. TTI (Time To Interactive): Time when the page becomes interactive.

SSR may increase TTFB but reduces FCP, leading to better performance and SEO.

SSR in React

React provides the ReactDOMServer module for SSR. Using renderToString(), React components are converted into an HTML string and sent to the client.

const content = ReactDOMServer.renderToString(<AppServer />);

This string can be used by the server (e.g., Node.js + Express) to deliver pre-rendered content.

Setting up SSR in React

  1. Create React App: 
    npx create-react-app ssr-react-app
cd ssr-react-app
  2. Add Express Server: 
    npm install express
    Configure server/index.js to handle requests and return HTML.
  3. Build React Component for SSR (AppServer.js).
  4. Configure Webpack for SSR using webpack.server.js with Babel for JSX transpilation.
  5. Render React Component on Server using ReactDOMServer.renderToString().
  6. Run Server: 
    npm run build:server
npm run start:server
    Access application at http://localhost:3001.