A technique for generating HTML on the server before sending it to the browser. The server fetches the data, renders the component tree as an HTML string, and sends it to the browser. SSR is particularly useful for pages that require dynamic data, such as social media feeds, and for improving search engine optimization (SEO) by providing fully rendered content to search engines.
How SSR Works
SSR involves several steps to ensure the page is rendered efficiently and quickly. The process begins when the user navigates to a URL. The server then fetches the necessary data and generates the full HTML. The browser receives and displays this HTML immediately, which results in a fast First Contentful Paint (FCP). After the HTML is displayed, the browser downloads the JavaScript bundle. React then attaches to the existing HTML, making the page interactive by adding event listeners and other functionalities.
- Dynamic Data: SSR is great for pages where content changes frequently, such as social media feeds.
- SEO Friendly: Search engines receive fully rendered content, improving visibility and ranking.
- Hydration Delay: The client must download the entire JavaScript bundle for the page before hydration completes, which can delay interactivity.
SSR Characteristics
SSR has several key characteristics that make it a powerful technique for modern web applications. It excels at handling dynamic data, making it ideal for pages that require frequent updates. Additionally, SSR is SEO-friendly because search engines can easily crawl and index fully rendered content. However, one drawback is that the client must download the entire JavaScript bundle before the page becomes interactive, which can introduce a delay.
SSR vs. React Server Components (RSC)
SSR and React Server Components (RSC) are two different techniques used in modern web development. SSR outputs a raw HTML string, while RSC outputs a serialized UI tree in a JSON-like format. SSR includes code for the entire page, whereas RSC only includes code for Client Components. SSR can use hooks after hydration, while RSC cannot use hooks for state or effects. Despite these differences, SSR and RSC are not mutually exclusive. In frameworks like Next.js, developers often use RSC to fetch data and SSR to generate the initial HTML for the user's first visit.
Table: SSR vs. RSC
| Feature | Server-Side Rendering (SSR) | React Server Components (RSC) |
| Output | Raw HTML string | Serialized UI tree (JSON-like) |
| JS Bundle | Includes code for the whole page | Only includes code for Client Components |
| State | Can use hooks (after hydration) | Cannot use hooks (State, Effects) |
| Interactivity | Becomes fully interactive | Primarily for data fetching/layout |
