React Router · Getting started · all subjects

custom framework/server rendering

10 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Server rendering with createStaticHandler

To enable server rendering for a custom framework setup, use createStaticHandler to turn your route objects into a request handler. It returns query and dataRoutes properties that are used to process requests and access route definitions.

Server rendering APIs

React Router provides createStaticHandler, createStaticRouter, and StaticRouterProvider for server rendering in custom framework setups.

React Router Request format

React Router works with web fetch Request objects. If your server does not use web fetch Request objects, you must adapt whatever request objects your server uses to a web fetch Request object before passing them to React Router APIs.

Server rendering example: basic flow

Server rendering follows these steps: (1) run actions/loaders using query(request) to get routing context, (2) check if query returns a Response and send it raw if a route redirected, (3) create a static router using createStaticRouter with dataRoutes and context, (4) render with StaticRouterProvider, (5) extract headers from actionHeaders and loaderHeaders using the deepest matched route, (6) send response with HTML string and status code from context.statusCode.

Server-side routes definition

Routes on the server use the same kinds of objects as the client. A route object can have path, Component, children, loader, and other properties. The loader on the server typically receives params and can directly access databases or other server resources.

Server rendering complete example

Complete example of server rendering with React Router: ```tsx import { renderToString } from "react-dom/server"; import { createStaticHandler, createStaticRouter, StaticRouterProvider, } from "react-router"; import routes from "./some-routes.js"; let { query, dataRoutes } = createStaticHandler(routes); export async function handler(request: Request) { let context = await query(request); if (context instanceof Response) { return context; } let router = createStaticRouter(dataRoutes, context); let html = renderToString( <StaticRouterProvider router={router} context={context} />, ); let leaf = context.matches[context.matches.length - 1]; let actionHeaders = context.actionHeaders[leaf.route.id]; let loaderHeaders = context.loaderHeaders[leaf.route.id]; let headers = new Headers(actionHeaders); if (loaderHeaders) { for (let [key, value] of loaderHeaders.entries()) { headers.append(key, value); } } headers.set("Content-Type", "text/html; charset=utf-8"); return new Response(`<!DOCTYPE html>${html}`, { status: context.statusCode, headers, }); } ```

Server Side Rendering configuration

To enable server side rendering, set ssr: true in react-router.config.ts. Server side rendering requires a deployment that supports it.

Server Side Rendering config example

import type { Config } from "@react-router/dev/config"; export default { ssr: true, } satisfies Config;

clientLoader with Server Side Rendering

Routes can use client data loading with clientLoader to avoid server rendering and fetching for their portion of the UI, even when server side rendering is enabled globally.

Static pre-rendering with Server Side Rendering enabled

Though Server Side Rendering is a global setting, individual routes can still be statically pre-rendered even when ssr: true is configured.

Give your agent this brain