React Router on Vercel

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.

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 import
  • createKvSessionStorage() - 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.

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>

Learn more about Streaming

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

Learn more about Caching

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

Learn more about Analytics

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: