{"Book Corner"}

{books.map((b) => (

{b.title + " - ₹" + b.price}

))}

); console.log("HTML from the server: " + html); // Show the string as text, so you can read it const pre = document.createElement("pre"); pre.style.whiteSpace = "pre-wrap"; pre.textContent = html; document.getElementById("root")!.appendChild(pre); `, }} /> ### Request-Response Lifecycle When a user opens `https://bookcorner.dev/posts/2`: 1. The browser sends a **request** for `/posts/2`. 2. The server **matches the route**: `/posts/:id` with `id = 2`. 3. The server **fetches the data** for post 2. 4. The server **renders** the page to HTML with that data. 5. The server sends the **response**: a status code (200, or 404) and a full HTML page.

The server does the work, then sends one finished page.

### HTML Generation on the Server The server does not send only the app's HTML. It puts it into a full page **template**, at a placeholder inside the `root` div. It also adds the page data and the `\\n' + "\\n"; // The server: URL in, status + HTML document out let page; let status = 200; const match = /^\\/books\\/(\\d+)$/.exec(url); if (url === "/") page =

Welcome to Book Corner

; else if (url === "/about") page =

About us

; else if (match) { const book = books.find((b) => b.id === Number(match[1])); page =

{"Book: " + (book ? book.title : "not found")}

; } else { status = 404; page =

Page not found

; } const html = renderToString(page); return { status, body: template.replace("", html) }; } `, "main.tsx": `import { createRoot } from "react-dom/client"; createRoot(document.getElementById("root")!).render(); `, }} /> ## SSR Rendering Fundamentals ### Initial Page Render With SSR, the **first** page the user opens is rendered on the server. The browser receives full HTML and shows it at once. There is no blank screen. ### Server-Generated Content Compare what the browser receives: ```html

Book Corner

The Alchemist - ₹299

``` This server-generated content is plain HTML. Search engines and slow phones can read it with no JavaScript at all. ### Client Interactivity Server HTML **looks** ready, but it is not interactive yet. Buttons and links handled by React do nothing until the JavaScript loads and hydrates the page. After that, the app works like any CSR app. Press **Load page** in the simulator below. Watch the stages, and try the mock page's button at each stage.

{stage >= 0 ? stages[stage].note : "Press Load page to start."}

{visible ? ( <> Atomic Habits · ₹499
{missed > 0 &&

{missed} click(s) did nothing: not hydrated yet.

} ) : ( {stage < 0 ? "" : "(nothing to show yet)"} )}

); } `, "main.tsx": `import { createRoot } from "react-dom/client"; createRoot(document.getElementById("root")!).render(); `, }} /> Easy Way to Remember: the server makes it visible, hydration makes it clickable. ## Hydration Process ### What is Hydration? **Hydration** is how React makes server HTML interactive. React walks through the HTML already on the page, matches it with your components, and connects them. It does **not** throw the HTML away and draw it again. In the browser, use `hydrateRoot` instead of `createRoot`: ```tsx import { hydrateRoot } from "react-dom/client"; hydrateRoot(document.getElementById("root")!, ); ```

Hydration does not redraw the page. It wakes up the HTML that is already there.

### Attaching Event Handlers Server HTML has no `onClick` code in it: HTML text cannot hold JavaScript functions. During hydration, React finds each element and **attaches** the handlers from your components. It also starts state and runs `useEffect`. In the lab, the server HTML is shown at once, and the "JavaScript" arrives 3 seconds later. Click the button before and after.

Atomic Habits

{hydrated ? "✅ Hydrated: buttons work" : "⏳ Static HTML: buttons do not work yet"}

); } `, "main.tsx": `import { hydrateRoot } from "react-dom/client"; const root = document.getElementById("root")!; // 1. SERVER: make the HTML const html = renderToString(); // 2. BROWSER: the HTML arrives and shows at once (no JavaScript yet) root.innerHTML = html; console.log("Server HTML shown. Try the button now: nothing happens."); // 3. BROWSER: pretend the JavaScript takes 3 seconds to download setTimeout(() => { hydrateRoot(root, ); console.log("Hydrated! The button works now."); }, 3000); `, }} /> ### Hydrated React Applications After hydration, the app is a normal React app. State, events, effects and client-side navigation all work. So SSR handles the **first** page, and CSR takes over after that. One rule matters: the first browser render must make **the same HTML** as the server. If not, React reports a **hydration mismatch** and redraws that part. Values like `Math.random()`, `Date.now()` or `window.innerWidth` cause this. The lab shows one. To show a browser-only value (the time, the screen size, a random tip), start with a fixed value, then change it in `useEffect`. Effects run only in the browser, after hydration, so the first HTML still matches. ## Data Fetching in SSR ### Server-Side Data Fetching In CSR, the browser fetches data **after** the page loads, so users see "Loading...". In SSR, the server fetches data **before** rendering. The HTML already contains the data, so there is no loading state on the first view. ### Passing Data to Components The server passes the data to the components as **props**, then renders. The browser needs the same data to hydrate, so the server also puts it in the page: ```html ``` The browser reads it and hydrates with it. **No second fetch.**

The same data is used twice: to make the HTML, and to hydrate it.

### Rendering Dynamic Content **Dynamic content** changes from request to request: the newest posts, today's prices, the user's name. With SSR, every request gets HTML made with fresh data. The lab fetches posts "on the server", renders them, and hydrates with the same data.

Latest posts

{p.title + " by " + p.author}

); } `, "main.tsx": `import { hydrateRoot } from "react-dom/client"; async function serverRender() { // SERVER: get the data first const response = await fetch("https://api.bookcorner.dev/posts?delay=0"); const posts = await response.json(); // SERVER: pass the data as props, render HTML, send the data along const html = renderToString(); return { html, data: posts }; } async function start() { const { html, data } = await serverRender(); const root = document.getElementById("root")!; // BROWSER: show the HTML, and keep the data the server sent root.innerHTML = html; (window as any).__INITIAL_DATA__ = data; console.log("HTML arrived with " + data.length + " posts in it"); // BROWSER: hydrate with the SAME data, no second fetch hydrateRoot(root, ); console.log("Hydrated without fetching again"); } start(); `, }} /> ## Advantages and Limitations of SSR

| Advantages | Limitations | |---|---| | Fast first view, no blank page | Needs a Node.js server, not just static files | | Full HTML for search engines and link previews | The server works on every request, so it costs more | | Readable before JavaScript loads | Visible before clickable: a gap until hydration | | Fresh data in every response | Code must run in Node and the browser (no `window` in render) | | Better on slow phones | Hydration mismatches must be avoided |

Use SSR for public pages where the first view and search matter: blogs, shops, news. CSR is usually enough for apps behind a login.

| | CSR | SSR | |---|---|---| | First HTML | Empty `root` div | Full content | | First view | After JS runs | Immediately | | Interactive | After JS runs | After hydration | | Hosting | Static files | Node.js server |

## Capstone Project: Blog Portal You will build a small **Blog Portal** for Book Corner with SSR. It has a listing page, a details page for each post, server data fetching, dynamic routes, hydration, and loading and error states. The pretend API has posts at `https://api.bookcorner.dev/posts`.

One route pattern serves every post.

### Create a blog listing page `BlogListPage` gets the posts as a prop and shows a card for each: title (as a link), author, date and excerpt. It does not fetch anything: the data comes from the server. ### Create a blog details page `BlogPostPage` gets one `post` and shows the full text, plus a `LikeButton`. The button has state and a click handler, so it only works after hydration. The lab renders both pages on the "server" with sample data, so you can see their HTML. ); const listHtml = renderToString(); console.log("List page HTML: " + listHtml.length + " characters"); const post = sample.find((p) => p.id === selected) ?? sample[0]; return (

); } `, "BlogListPage.tsx": `import type { Post } from "./types"; interface BlogListPageProps { posts: Post[]; renderLink: (to: string, text: string) => JSX.Element; } return (

Latest posts

{posts.map((post) => (

{renderLink("/posts/" + post.id, post.title)}

{post.author + " · " + post.date}

{post.excerpt}

))}

); } `, "BlogPostPage.tsx": `import type { Post } from "./types"; return (

{post.title}

{"By " + post.author + " · " + post.date}

{post.body}

); } `, "LikeButton.tsx": `import { useState } from "react"; // Works only after hydration: the server HTML has no click handler const [likes, setLikes] = useState(0); return ( ); } `, "types.ts": `export interface Post { id: number; title: string; author: string; date: string; excerpt: string; body: string; } // Which page a URL points to | { page: "list" } | { page: "post"; id: number } | { page: "broken" } | { page: "notFound" }; // Everything a page needs to render, sent from the server to the browser status: number; posts?: Post[]; post?: Post; error?: string; } `, "styles.css": `.blog { max-width: 560px; font-family: Georgia, serif; } .blog header h1 { margin: 0 0 6px; font-size: 22px; } .blog header a { color: #2b59c3; text-decoration: none; } .blog nav { display: flex; gap: 10px; font-family: sans-serif; font-size: 13px; margin-bottom: 10px; } .post-card { border-bottom: 1px solid #ddd; padding: 6px 0; } .post-card h3 { margin: 0; font-size: 17px; } .meta { color: #777; font-size: 13px; margin: 2px 0; font-family: sans-serif; } .like { margin-top: 6px; padding: 5px 10px; border-radius: 6px; border: 1px solid #d33; background: white; color: #d33; cursor: pointer; } .loading { color: #2b59c3; font-family: sans-serif; } .error { color: #b42318; font-family: sans-serif; } `, "main.tsx": `import { createRoot } from "react-dom/client"; createRoot(document.getElementById("root")!).render(); `, }} /> ### Fetch content on the server `routes.ts` has `loadData(route)`. The server calls it **before** rendering. It returns everything the page needs, called the **page data**: the `status`, plus `posts`, or one `post`, or an `error`. ### Implement dynamic routes `matchRoute(url)` turns a URL into a route. The pattern `/^\/posts\/(\d+)$/` matches `/posts/` followed by digits. The digits are the **dynamic part**, the id. So one route serves every post: `/posts/1`, `/posts/2`, and so on. An unknown id gives status **404**. In the lab, click the URLs to see the route, the status and the HTML the server makes for each. : data.post ? : ; setResult("route: " + JSON.stringify(route) + "\\nstatus: " + data.status + "\\n\\n" + renderToString(page)); } serve(); }, [url]); return (

{["/", "/posts/1", "/posts/3", "/posts/99", "/broken"].map((u) => ( ))}

{result || "..."}

); } `, "routes.ts": `import type { PageData, Route } from "./types"; const API = "https://api.bookcorner.dev"; // Dynamic routes: "/posts/2" matches the pattern /posts/:id if (url === "/") return { page: "list" }; const match = /^\\/posts\\/(\\d+)$/.exec(url); if (match) return { page: "post", id: Number(match[1]) }; if (url === "/broken") return { page: "broken" }; return { page: "notFound" }; } // Fetch the data for a route. The server calls this before rendering. const wait = "?delay=" + delay; try { if (route.page === "list") { const response = await fetch(API + "/posts" + wait); if (!response.ok) throw new Error("Status " + response.status); return { status: 200, posts: await response.json() }; } if (route.page === "post") { const response = await fetch(API + "/posts/" + route.id + wait); if (response.status === 404) return { status: 404, error: "Sorry, this post does not exist." }; if (!response.ok) throw new Error("Status " + response.status); return { status: 200, post: await response.json() }; } if (route.page === "broken") { const response = await fetch(API + "/error" + wait); if (!response.ok) throw new Error("Status " + response.status); } return { status: 404, error: "Page not found." }; } catch { return { status: 500, error: "Could not load this page. Please try again." }; } } `, "BlogListPage.tsx": `import type { Post } from "./types"; interface BlogListPageProps { posts: Post[]; renderLink: (to: string, text: string) => JSX.Element; } return (

Latest posts

{posts.map((post) => (

{renderLink("/posts/" + post.id, post.title)}

{post.author + " · " + post.date}

{post.excerpt}

))}

); } `, "BlogPostPage.tsx": `import type { Post } from "./types"; return (

{post.title}

{"By " + post.author + " · " + post.date}

{post.body}

; else if (page.error) content =

{page.error}

{renderLink("/", "Back to all posts")}

; else if (page.post) content = ; else content = ; return (

{renderLink("/", "Book Corner Blog")}

{content}

); } `, "main.tsx": `import { hydrateRoot } from "react-dom/client"; async function start() { // SERVER: the user asked for "/". Fetch, render and send. const { html, data, status } = await render("/"); console.log("Server answered " + status + " with " + html.length + " characters of HTML"); // BROWSER: show the HTML at once, and keep the data const root = document.getElementById("root")!; root.innerHTML = html; (window as any).__INITIAL_DATA__ = data; // BROWSER: hydrate with the same data, so clicks work hydrateRoot(root, ); console.log("Hydrated: links and the Like button work now"); } start(); `, "server.tsx": `import { renderToString } from "react-dom/server"; // The pretend server: URL in, HTML + data + status out const route = matchRoute(url); const data = await loadData(route); // 1. fetch on the server const html = renderToString(); // 2. render to HTML return { html, data, status: data.status }; } `, "routes.ts": `import type { PageData, Route } from "./types"; const API = "https://api.bookcorner.dev"; // Dynamic routes: "/posts/2" matches the pattern /posts/:id if (url === "/") return { page: "list" }; const match = /^\\/posts\\/(\\d+)$/.exec(url); if (match) return { page: "post", id: Number(match[1]) }; if (url === "/broken") return { page: "broken" }; return { page: "notFound" }; } // Fetch the data for a route. The server calls this before rendering. const wait = "?delay=" + delay; try { if (route.page === "list") { const response = await fetch(API + "/posts" + wait); if (!response.ok) throw new Error("Status " + response.status); return { status: 200, posts: await response.json() }; } if (route.page === "post") { const response = await fetch(API + "/posts/" + route.id + wait); if (response.status === 404) return { status: 404, error: "Sorry, this post does not exist." }; if (!response.ok) throw new Error("Status " + response.status); return { status: 200, post: await response.json() }; } if (route.page === "broken") { const response = await fetch(API + "/error" + wait); if (!response.ok) throw new Error("Status " + response.status); } return { status: 404, error: "Page not found." }; } catch { return { status: 500, error: "Could not load this page. Please try again." }; } } `, "BlogListPage.tsx": `import type { Post } from "./types"; interface BlogListPageProps { posts: Post[]; renderLink: (to: string, text: string) => JSX.Element; } return (

Latest posts

{posts.map((post) => (

{renderLink("/posts/" + post.id, post.title)}

{post.author + " · " + post.date}

{post.excerpt}

))}

); } `, "BlogPostPage.tsx": `import type { Post } from "./types"; return (

{post.title}

{"By " + post.author + " · " + post.date}

{post.body}

); } `, "LikeButton.tsx": `import { useState } from "react"; // Works only after hydration: the server HTML has no click handler const [likes, setLikes] = useState(0); return ( ); } `, "types.ts": `export interface Post { id: number; title: string; author: string; date: string; excerpt: string; body: string; } // Which page a URL points to | { page: "list" } | { page: "post"; id: number } | { page: "broken" } | { page: "notFound" }; // Everything a page needs to render, sent from the server to the browser status: number; posts?: Post[]; post?: Post; error?: string; } `, "styles.css": `.blog { max-width: 560px; font-family: Georgia, serif; } .blog header h1 { margin: 0 0 6px; font-size: 22px; } .blog header a { color: #2b59c3; text-decoration: none; } .blog nav { display: flex; gap: 10px; font-family: sans-serif; font-size: 13px; margin-bottom: 10px; } .post-card { border-bottom: 1px solid #ddd; padding: 6px 0; } .post-card h3 { margin: 0; font-size: 17px; } .meta { color: #777; font-size: 13px; margin: 2px 0; font-family: sans-serif; } .like { margin-top: 6px; padding: 5px 10px; border-radius: 6px; border: 1px solid #d33; background: white; color: #d33; cursor: pointer; } .loading { color: #2b59c3; font-family: sans-serif; } .error { color: #b42318; font-family: sans-serif; } `, }} /> ## Download Project Files ### Download SSR Project Source Code The complete Blog Portal is ready as a real SSR project, built with **Vite**, **React**, **TypeScript**, **React Router** and a small **Express** server. It works like the final lab, but the server is real: view the page source in your browser and you will see the full HTML of the posts. Download SSR Project: [Download Blog Portal Project](/downloads/react/ssr-blog-portal.zip) ``` blog-portal/ package.json scripts and dependencies server.js Express server: SSR for pages + JSON API vite.config.ts Vite settings index.html template with and src/ entry-server.tsx render(url): fetch data + renderToString entry-client.tsx hydrateRoot with window.__INITIAL_DATA__ App.tsx layout and routes routes.ts route matching and loadPageData() pages/ BlogListPage, BlogPostPage, NotFoundPage components/ Header, PostCard, LikeButton, StatusMessage data/ posts.ts and postsApi.ts (the "database") hooks/ usePageData (server data first, then client fetch) types/ Post and PageData types ``` ### Project Setup Instructions 1. Install **Node.js** 18 or newer from nodejs.org, if you do not have it. 2. Download the ZIP with the link above, and unzip it. You get a folder called `blog-portal`. 3. Open a terminal in that folder (in VS Code: File, Open Folder, then Terminal, New Terminal). 4. Install the packages and start the server: ```bash npm install npm run dev ``` Open `http://localhost:5173`. Press `Ctrl + C` to stop. For production, run `npm run build` and then `npm run start`. To see SSR at work, open a post, then right-click and choose **View page source**. The post's text is in the HTML. In the CSR Product Catalog, the source showed only an empty `root` div. ## Common mistakes

| Mistake | What you see | Fix | |---|---|---| | Using `window` or `localStorage` during render | Server error: window is not defined | Use them in `useEffect`, which runs only in the browser | | `Date.now()` or `Math.random()` in rendered output | Hydration mismatch in the console | Start with a fixed value, change it in `useEffect` | | Using `createRoot` on server HTML | The page is drawn again and may flicker | Use `hydrateRoot` | | Hydrating with different data than the server used | Mismatch errors, content jumps | Send the data in the page and hydrate with it | | Fetching the same data again after hydration | An extra request and a loading flash | Use the server data for the first page | | Expecting `useEffect` to run on the server | Missing data in the server HTML | Fetch data before `renderToString` | | Returning 200 for a missing page | Search engines index error pages | Set status 404 when the data is not found |

## Check Yourself ## Exercises ## What to Remember - In SSR, the server matches the route, fetches data, and uses `renderToString` to send full HTML. Users see content before the JavaScript loads. - `hydrateRoot` attaches event handlers to that HTML. Hydrate with the same data the server used, and keep browser-only values in `useEffect`. - SSR gives a fast first view and good SEO, but needs a server and has a gap before the page is clickable. After hydration, the app works like CSR. Next: Static Site Generation