How SSR (Server-Side Rendering) Works

What is Server-Side Rendering

Server-Side Rendering (SSR) is a technique used in web development where the server generates the complete HTML content of a webpage and sends it to the client (browser). This approach differs from Client-Side Rendering (CSR), where the server sends a minimal HTML file with JavaScript references, and the browser is responsible for rendering the page. SSR ensures that the client receives a fully-rendered page with data, JavaScript, and CSS files immediately after the request, eliminating the need for users to wait on a blank screen. This makes SSR ideal for improving performance and Search Engine Optimization (SEO).

How SSR Works :

how ssr works

First thing is when a user visits a website, the browser sends an HTTP GET request to the server asking for webpage

then the web server (for example, Nginx, Apache) receives the request and determines the resources needed to process it. If the server needs to make internal or external API calls to fetch data, it do it at this stage.

Once the API calls are complete and the data is retrieved, the server generates the HTML page by combining the data with the page template.

And when the server complete its works it sends the fully-rendered HTML page to the client.

And the browser displays the page immediately, ensuring a fast initial load.

So after this step the page now is static so the user can’t interact with the page for example clicking on a button , here the hydration work is came to make the page a live by attaching event listeners and enabling interactivity.

Example of SSR in nextjs

interface Itodo {
  id: number;
  title: string;
  completed: boolean;
}

const fetchTodo = async (): Promise<Itodo> => {
  const resp = await fetch("https://jsonplaceholder.typicode.com/todos/1");
  if (!resp.ok) {
    throw new Error("Failed to fetch data");
  }
  return resp.json();
};

const TodoPage = async () => {
  const todo = await fetchTodo();

  return (
    <div>
      <h1>{todo.title}</h1>
      <p>{todo.completed ? "Completed" : "Not Completed"}</p>
    </div>
  );
};

export default TodoPage;

in this case the server will fetch the data from the api and then comping it in the html template

so the returned html file will looks like this

<!DOCTYPE html>
<html>
<head>
  <title>Todos App</title>
</head>
<body>
  <div>
     <h1>delectus aut autem</h1>
     <p>Not Completed</p>
  </div>
</body>
</html>

Pros & Cons of Server-Side Rendering

Pros :

Search engines can easily index the content since it’s part of the initial HTML
users see the content immediately so it's improving the perceived performance
Pages can be preloaded with data, making SSR suitable for both static and dynamic content

Cons :

Each request requires server-side processing, which can strain server resources
If data changes frequently, CSR might be more efficient
Unlike CSR, navigating between pages may require a full page reload

SSR vs CSR: Key Differences

Feature	Server-Side Rendering	Client-Side Rendering
Initial Load Time	Faster (pre-rendered HTML)	Slower (data fetched in browser)
SEO	Excellent (content visible in HTML)	Poorer (JavaScript needed to load content)
Performance	Better for first load	Better for fast user interactions
API Calls	Happens on the server before sending HTML	Happens in the browser after loading the page
Best Use Cases	Blogs, e-commerce pages, dashboards	Web apps, SPAs (Single Page Apps)