React Server Rendering

# React Server Rendering

> Pre-render React components on the server for improved SEO and initial load performance

## When to Use

- Public-facing pages where SEO and crawler indexability matter
- Applications where First Contentful Paint performance is critical
- You need personalized content rendered per-request (not suitable for static generation)
- Using Next.js Pages Router (`getServerSideProps`), Remix (`loader`), or custom Express + `renderToString`

## Instructions

1. In Next.js Pages Router, export `getServerSideProps` to fetch data server-side:
   ```typescript
   export async function getServerSideProps(context: GetServerSidePropsContext) {
     const data = await fetchData(context.params.id);
     return { props: { data } };
   }
   ```
2. In Remix, export a `loader` function:
   ```typescript
   export async function loader({ params }: LoaderFunctionArgs) {
     return json(await fetchData(params.id));
   }
   ```
3. The server renders the full HTML; the browser displays it immediately (no blank page flash).
4. React hydrates the server-rendered HTML on the client, attaching event handlers.
5. Use `cache` headers appropriately — per-request SSR bypasses CDN caching.

## Details

SSR sends fully-rendered HTML from the server. The browser displays content immediately while React hydrates in the background, making the UI interactive.

**SSR vs SSG:**

- **SSG (Static Generation):** HTML generated at build time. Fast, cacheable, but requires rebuild for updates.
- **SSR:** HTML generated per-request. Always fresh, but has server cost and latency.
- **ISR (Next.js):** Static with time-based revalidation — best of both for many cases.

**Hydration mismatch:** If server-rendered HTML differs from what client React would render, React throws a hydration error. Common causes: `Date.now()`, `Math.random()`, browser-only APIs in render paths. Suppress with `suppressHydrationWarning` for known-safe mismatches.

**React 18 streaming:** `renderToPipeableStream` streams HTML to the browser progressively, enabling Suspense boundaries to stream in chunks. Improves TTFB for slow data.

## Source

https://patterns.dev/react/server-side-rendering

## Process

1. Read the instructions and examples in this document.
2. Apply the patterns to your implementation, adapting to your specific context.
3. Verify your implementation against the details and edge cases listed above.

## Harness Integration

- **Type:** knowledge — this skill is a reference document, not a procedural workflow.
- **No tools or state** — consumed as context by other skills and agents.

## Success Criteria

- The patterns described in this document are applied correctly in the implementation.
- Edge cases and anti-patterns listed in this document are avoided.