UNPKG

1.63 kB Markdown View Raw
1---
2title: Rendering Strategies
3order: 4
4---
5
6# Rendering Strategies
7
8[MODES: framework]
9
10## Introduction
11
12There are three rendering strategies in React Router:
13
14- Client Side Rendering
15- Server Side Rendering
16- Static Pre-rendering
17
18## Client Side Rendering
19
20Routes are always client side rendered as the user navigates around the app. If you're looking to build a Single Page App, disable server rendering:
21
22```ts filename=react-router.config.ts
23import type { Config } from "@react-router/dev/config";
24
25export default {
26 ssr: false,
27} satisfies Config;
28```
29
30## Server Side Rendering
31
32```ts filename=react-router.config.ts
33import type { Config } from "@react-router/dev/config";
34
35export default {
36 ssr: true,
37} satisfies Config;
38```
39
40Server side rendering requires a deployment that supports it. Though it's a global setting, individual routes can still be statically pre-rendered. Routes can also use client data loading with `clientLoader` to avoid server rendering/fetching for their portion of the UI.
41
42## Static Pre-rendering
43
44```ts filename=react-router.config.ts
45import type { Config } from "@react-router/dev/config";
46
47export default {
48 // return a list of URLs to prerender at build time
49 async prerender() {
50 return ["/", "/about", "/contact"];
51 },
52} satisfies Config;
53```
54
55Pre-rendering is a build-time operation that generates static HTML and client navigation data payloads for a list of URLs. This is useful for SEO and performance, especially for deployments without server rendering. When pre-rendering, route module loaders are used to fetch data at build time.
56
57---
58
59Next: [Data Loading](./data-loading)
60
\No newline at end of file