Server-side rendering (SSR) runs React on the server to produce a page’s HTML with its data already in place. A client-only Vite application instead initially serves an effectively empty root element; the visitor must wait for JavaScript and data before seeing the page. SSR can shorten that wait, especially on slow connections or devices, but its speed advantage depends on successful hydration. section 11.1.2 section 11.5
Think of a route as a React component plus a data package. On the first page of a visit, the server combines them into HTML and sends the JavaScript application too. In the framework flow described here, later page visits request only new route data because the browser already has the application. Keeping data loading beside the component also makes it possible to fetch from a database or external API on the server without putting server-only secrets in browser code. section 11.1.2 section 11.1
Figure 11.2 Imagine a page to display as the simplest puzzle ever. It has only two pieces: a component defined in React that defines the template and a data package that contains the data required to turn the template into HTML. In a classic React setup, we retrieve those two pieces in two separate requests and put them together in the browser when everything is loaded. In the framework setup, we get both pieces at the same time instantly.
The component-and-data diagram contrasts assembling a page in the browser with sending their combined HTML from the server. section 11.1.2
A route with server-loaded data
For /shop/shoes, read categoryId from the URL, load its category, and render the category name in a React component. A Next.js pages route puts getServerSideProps beside its default-exported component and returns the category as props; a Remix route uses a loader and reads the result with useLoaderData(). Both examples redirect when the category is missing. The files and data APIs differ, but the component-plus-data arrangement is the same. section 11.3.2
Hydration is the constraint to check before treating faster initial HTML as a win: React expects the browser’s first render to match the server-rendered output. A mismatch can impose a performance penalty that outweighs the initial gain. Server rendering also rules out reading browser-only local storage on the server; cookies can be an alternative for relatively small data items. Choose a framework and data flow with those constraints in mind, rather than assuming SSR alone guarantees a faster site. section 11.1 section 11.5
