Remix is a fullstack, server-rendered React framework. 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 server-rendered Remix and Remix V2 applications to Vercel with zero configuration. When using the Remix Vite plugin, static site generation using SPA mode is also supported.
Vercel Preset, when deploying
to Vercel.
Getting started
To get started with Remix on Vercel:
- If you already have a project with Remix, install Vercel CLI and run the vercel command from your project's root directory
- Clone one of our Remix example repos to your favorite git provider and deploy it on Vercel with the button below:
" A trusted partner for growth.
Professional, efficient, and always ahead of the curve. "
" Outstanding service and results!
They exceeded our expectations in every project. "
Vercel deployments can integrate with your git providerto generate preview URLsfor each pull request you make to your Remix project.
@vercel/remix
The @vercel/remix package exposes useful types and utilities for Remix apps deployed on Vercel, such as:
To best experience Vercel features such as streaming, Vercel Functions, and more, we recommend importing utilities from @vercel/remix rather than from standard Remix packages such as @remix-run/node.
@vercel/remix should be used anywhere in your code that you normally would import utility functions from the following packages:
When using the Remix Vite plugin (highly recommended), you should configure the Vercel Preset to enable the full feature set that Vercel offers.
pnpm i @vercel/remix
To get started, navigate to the root directory of your Remix project with your terminal and install @vercel/remix with your preferred package manager:
import { vitePlugin as remix } from'@remix-run/dev';
installGlobals();
plugins: [
exportdefaultdefineConfig({
import tsconfigPaths from'vite-tsconfig-paths';
presets: [vercelPreset()],
import { installGlobals } from'@remix-run/node';
}),
],
remix({
tsconfigPaths(),
import { defineConfig } from'vite';
import { vercelPreset } from'@vercel/remix/vite';
Using this Preset enables Vercel-specific functionality such as rendering your Remix application with Vercel Functions.
Server-Side Rendering (SSR)
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.
Remix routes defined in app/routes are deployed with server-side rendering by default.
The following example demonstrates a basic route that renders with SSR:
exportdefaultfunctionIndexRoute() {
Vercel Functions execute using Node.js. They enable developers to write functions that use resources that scale up and down based on traffic demands. This prevents them from failing during peak hours, but keeps them from running up high costs during periods of low activity.
TypeScript
);
}
return (
Remix API routes in app/routes are deployed as Vercel Functions by default.
This route is rendered on the server
The following example demonstrates a basic route that renders a page with the heading, "Welcome to Remix with Vercel":
TypeScript
exportdefaultfunctionServerless() {
return
Welcome to Remix with Vercel
;}
To summarize, Server-Side Rendering (SSR) with Remix on Vercel:
- Scales to zero when not in use
- Scales automatically with traffic increases
- Has framework-aware infrastructure to generate Vercel Functions
Response streaming
with Remix on Vercel is supported with Vercel Functions. See the Streaming page in the Remix docs for general instructions.
The following example demonstrates a route that simulates a throttled network by delaying a promise's result, and renders a loading state until the promise is resolved:
import { Await, useLoaderData } from'@remix-run/react';
import { Suspense } from'react';
returnnewPromise((resolve) =>setTimeout(resolve, ms));
functionsleep(ms:number) {
}
constversion=process.versions.node;
}
});
exportasyncfunctionloader({ request }) {
// Don't let the promise resolve for 1 second
returndefer({
TypeScript
const { version } =useLoaderData();
exportdefaultfunctionDeferredRoute() {
return (
}
);
To summarize, Streaming with Remix 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 Remix's defer() and Await
Cache-Control headers
Vercel's CDN caches your content at the edge 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 Remix 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.
Remix supports header modifications with the headers function, which you can export in your routes defined in app/routes.
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
To summarize, using Cache-Control headers with Remix on Vercel:
});
exportasyncfunctionloader() {
'Cache-Control':'s-maxage=1, stale-while-revalidate=59',
// Fetch data necessary to render content
TypeScript
Allow you to serve content from the cache while updating the cache in the background with stale-while-revalidate
exportconstheaders:HeadersFunction= () => ({
Allow you to cache responses for server-rendered Remix apps using Vercel Functions
importtype { HeadersFunction } from'@vercel/remix';
See our docs on cache limits to learn the max size and lifetime of caches stored on Vercel.
Analytics
Vercel's Analytics features enable you to visualize and monitor your application's performance over time. The Analytics section 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 section in your project dashboard sidebar 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 Remix project:
pnpm i @vercel/analytics
Add the following component to your root file:
return (
);
TypeScript
import { Analytics } from'@vercel/analytics/react';
