Server-Side Rendering

Server generates the full HTML page for every request.
When a user visits a URL, the browser receives a complete page ready to display, no JS execution required.

SSR Workflow:

Browser requests a page like https://example.com.
Browser sends a GET request to the server.
Server generates HTML by execute the app code (server framework):
1. Runs the template engine or framework logic.
2. Fetches necessary data from databases or APIs.
3. Generates the full HTML page with all content filled in.

<!DOCTYPE html>
<html>
  <head>
    <title>My Blog</title>
  </head>
  <body>
    <h1>Latest Posts</h1>
    <ul>
      <li>Alice's Post</li>
      <li>Bob's Post</li>
      <li>Charlie's Post</li>
    </ul>
  </body>
</html>

Browser receives HTML, then parses the HTML and renders the page immediately.
User now sees the fully built, static page. (not interactive yet)
Browser downloads JS (CSR code).
To make it dynamic page (like a SPA. interactive), do hydration.
1. JS “attaches” to server-rendered HTML to make it interactive on the client side.
2. It binds JS logic to the HTML elements, so everything becomes interactive.
Page now become fully interactive (no visual flicker).

Advantages of SSR

Faster initial page load
- HTML is ready, so the user sees content immediately, even before JS loads.
SEO-friendly
- Search engines can see the full content immediately.
- Great for blogs, e-commerce, landing pages.