React Router on Vercel
Learn how to use Vercel's features with React Router as a framework.React Router is a multi-strategy router for React bridging the gap from React 18 to React 19. When used as a framework, React Router enables fullstack, server-rendered React applications. Its built-in features for nested pages, error boundaries, transitions between loading states, and more, enable developers to create modern web apps.
With Vercel, you can deploy React Router applications with server-rendering or static site generation (using SPA mode) to Vercel with zero configuration.
It is highly recommended that your application uses the Vercel Preset when deploying to Vercel.
The optional @vercel/react-router
package contains Vercel specific utilities for use in React Router applications. The package contains various entry points for specific use cases:
@vercel/react-router
importcreateKvSessionStorage()
- create a session storage backed by Vercel KV
@vercel/react-router/vite
import- Contains the Vercel Preset to enhance React Router functionality on Vercel
@vercel/react-router/entry.server
import- For situations where you need to define a custom
entry.server
file.
- For situations where you need to define a custom
To get started, navigate to the root directory of your React Router project with your terminal and install @vercel/react-router
with your preferred package manager:
pnpm i @vercel/react-router
When using the React Router as a framework, you should configure the Vercel Preset to enable the full feature set that Vercel offers.
To configure the Preset, add the following lines to your react-router.config
file:
import { vercelPreset } from '@vercel/react-router/vite';
import type { Config } from '@react-router/dev/config';
export default {
// Config options...
// Server-side render by default, to enable SPA mode set this to `false`
ssr: true,
presets: [vercelPreset()],
} satisfies Config;
When this Preset is configured, your React Router application is enhanced with Vercel-specific functionality:
- Allows function-level configuration (i.e.
memory
,maxDuration
, etc.) on a per-route basis - Allows Vercel to understand the routing structure of the application, which allows for bundle splitting
- Accurate "Deployment Summary" on the deployment details page
Server-Side Rendering (SSR) allows you to render pages dynamically on the server. This is useful for pages where the rendered data needs to be unique on every request. For example, checking authentication or looking at the location of an incoming request. Server-Side Rendering is invoked using Vercel Functions.
Routes defined in your application are deployed with server-side rendering by default.
The following example demonstrates a basic route that renders with SSR:
import { type RouteConfig, index } from '@react-router/dev/routes';
export default [index('routes/home.tsx')] satisfies RouteConfig;
import type { Route } from './+types/home';
import { Welcome } from '../welcome/welcome';
export function meta({}: Route.MetaArgs) {
return [
{ title: 'New React Router App' },
{ name: 'description', content: 'Welcome to React Router!' },
];
}
export default function Home() {
return <Welcome />;
}
To summarize, Server-Side Rendering (SSR) with React Router on Vercel:
- Scales to zero when not in use
- Scales automatically with traffic increases
- Has framework-aware infrastructure to generate Vercel Functions
Streaming HTTP responses with React Router on Vercel is supported with Vercel Functions. See the Streaming with Suspense page in the React Router docs for general instructions.
Streaming with React Router on Vercel:
- Offers faster Function response times, improving your app's user experience
- Allows you to return large amounts of data without exceeding Vercel Function response size limits
- Allows you to display Instant Loading UI from the server with React Router's
<Await>
Vercel's Edge Network caches your content at the edge in order to serve data to your users as fast as possible. Static caching works with zero configuration.
By adding a Cache-Control
header to responses returned by your React Router routes, you can specify a set of caching rules for both client (browser) requests and server responses. A cache must obey the requirements defined in the Cache-Control header.
React Router supports defining response headers by exporting a headers function within a route.
The following example demonstrates a route that adds Cache-Control
headers which instruct the route to:
- Return cached content for requests repeated within 1 second without revalidating the content
- For requests repeated after 1 second, but before 60 seconds have passed, return the cached content and mark it as stale. The stale content will be revalidated in the background with a fresh value from your
loader
function
import { Route } from './+types/some-route';
export function headers(_: Route.HeadersArgs) {
return {
'Cache-Control': 's-maxage=1, stale-while-revalidate=59',
};
}
export async function loader() {
// Fetch data necessary to render content
}
See our docs on cache limits to learn the max size and lifetime of caches stored on Vercel.
To summarize, using Cache-Control
headers with React Router on Vercel:
- Allow you to cache responses for server-rendered React Router apps using Vercel Functions
- Allow you to serve content from the cache while updating the cache in the background with
stale-while-revalidate
Vercel's Analytics features enable you to visualize and monitor your application's performance over time. The Analytics tab in your project's dashboard offers detailed insights into your website's visitors, with metrics like top pages, top referrers, and user demographics.
To use Analytics, navigate to the Analytics tab of your project dashboard on Vercel and select Enable in the modal that appears.
To track visitors and page views, we recommend first installing our @vercel/analytics
package by running the terminal command below in the root directory of your React Router project:
pnpm i @vercel/analytics
Then, follow the instructions below to add the Analytics
component to your app. The Analytics
component is a wrapper around Vercel's tracking script, offering a seamless integration with React Router.
Add the following component to your root
file:
import { Analytics } from '@vercel/analytics/react';
export default function App() {
return (
<html lang="en">
<body>
<Analytics />
</body>
</html>
);
}
To summarize, Analytics with React Router on Vercel:
- Enables you to track traffic and see your top-performing pages
- Offers you detailed breakdowns of visitor demographics, including their OS, browser, geolocation and more
By default, Vercel supplies an implementation of the entry.server
file which is configured
for streaming to work with Vercel Functions. This version will be used when
no entry.server
file is found in the project.
However, your application may define a customized app/entry.server.jsx
or app/entry.server.tsx
file if necessary. Your custom entry.server
file should use the handleRequest
function exported by @vercel/react-router/entry.server
.
For example, to supply the nonce
option and set the corresponding Content-Security-Policy
response header:
import { handleRequest } from '@vercel/react-router/entry.server';
import type { AppLoadContext, EntryContext } from 'react-router';
export default async function (
request: Request,
responseStatusCode: number,
responseHeaders: Headers,
routerContext: EntryContext,
loadContext?: AppLoadContext,
): Promise<Response> {
const nonce = crypto.randomUUID();
const response = await handleRequest(
request,
responseStatusCode,
responseHeaders,
routerContext,
loadContext,
{ nonce },
);
response.headers.set(
'Content-Security-Policy',
`script-src 'nonce-${nonce}'`,
);
return response;
}
See our Frameworks documentation page to learn about the benefits available to all frameworks when you deploy on Vercel.
Learn more about deploying React Router projects on Vercel with the following resources:
Was this helpful?