UNPKG

3.32 kB Markdown View Raw
1---
2title: Lazy Route Discovery
3---
4
5# Lazy Route Discovery
6
7[MODES: framework]
8
9<br/>
10<br/>
11
12Lazy Route Discovery is a performance optimization that loads route information progressively as users navigate through your application, rather than loading the complete route manifest upfront.
13
14With Lazy Route Discovery enabled (the default), React Router sends only the routes needed for the initial server-side render in the manifest. As users navigate to new parts of your application, additional route information is fetched dynamically and added to the client-side manifest.
15
16The route manifest contains metadata about your routes (JavaScript/CSS imports, whether routes have `loaders`/`actions`, etc.) but not the actual route module implementations. This allows React Router to understand your application's structure without downloading unnecessary route information.
17
18## Route Discovery Process
19
20When a user navigates to a new route that isn't in the current manifest:
21
221. **Route Discovery Request** - React Router makes a request to the internal `/__manifest` endpoint
232. **Manifest Patch** - The server responds with the required route information
243. **Route Loading** - React Router loads the necessary route modules and data
254. **Navigation** - The user navigates to the new route
26
27## Eager Discovery Optimization
28
29To prevent navigation waterfalls, React Router implements eager route discovery. All [`<Link>`](../api/components/Link) and [`<NavLink>`](../api/components/NavLink) components rendered on the current page are automatically discovered via a batched request to the server.
30
31This discovery request typically completes before users click any links, making subsequent navigation feel synchronous even with lazy route discovery enabled.
32
33```tsx
34// Links are automatically discovered by default
35<Link to="/dashboard">Dashboard</Link>
36
37// Opt out of discovery for specific links
38<Link to="/admin" discover="none">Admin</Link>
39```
40
41## Performance Benefits
42
43Lazy Route Discovery provides several performance improvements:
44
45- **Faster Initial Load** - Smaller initial bundle size by excluding unused route metadata
46- **Reduced Memory Usage** - Route information is loaded only when needed
47- **Scalability** - Applications with hundreds of routes see more significant benefits
48
49## Configuration
50
51You can configure route discovery behavior in your `react-router.config.ts`:
52
53```tsx filename=react-router.config.ts
54export default {
55 // Default: lazy discovery with /__manifest endpoint
56 routeDiscovery: {
57 mode: "lazy",
58 manifestPath: "/__manifest",
59 },
60
61 // Custom manifest path (useful for multiple apps on same domain)
62 routeDiscovery: {
63 mode: "lazy",
64 manifestPath: "/my-app-manifest",
65 },
66
67 // Disable lazy discovery (include all routes initially)
68 routeDiscovery: { mode: "initial" },
69} satisfies Config;
70```
71
72## Deployment Considerations
73
74When using lazy route discovery, ensure your deployment setup handles manifest requests properly:
75
76- **Route Handling** - Ensure `/__manifest` requests reach your React Router handler
77- **CDN Caching** - If using CDN/edge caching, include `version` and `paths` query parameters in your cache key for the manifest endpoint
78- **Multiple Applications** - Use a custom `manifestPath` if running multiple React Router applications on the same domain
79
\No newline at end of file