Remix without limits (historical)

Note: This post is historical. Product names and runtime guidance may have changed. For new projects, use Vercel Functions with the Node.js runtime and Fluid compute. Use Routing Middleware for request-time routing before a response completes.

• Streaming SSR: Dynamically stream content with both Node.js and Edge runtimes

• API Routes: Easily build your serverless API with Remix and a route loader

• Advanced Caching: Use powerful cache headers like stale-while-revalidate

• Data Mutations: Run actions inside Vercel Functions

Link to headingRemixing Adapters

Remix is a server-rendered React framework with a focus on Web fundamentals. Since the Remix request handler is built on the Web Fetch API, it can be adapted to work with any deployment provider.

With the new advanced Remix integration for Vercel (@vercel/remix), no adapter is required to get started. Vercel now supports the most lightweight, powerful Remix integration, including no server.js file or custom vercel.json configuration needed.

This integration has been designed for use in our serverless environment, including support for runtime-specific build outputs at the time.

We've abstracted away runtime-specific needs, like how to handle cookies or streaming in different environments, and made it easily consumable. To take advantage of this, instances of @remix-run/node can be replaced with @vercel/remix.

We are collaborating with the Remix team to contribute changes back upstream and help make the Remix build outputs more modular.

Link to headingServer-rendering with multiple runtimes

Until today, deploying Remix applications meant choosing between two different runtimes for the entire application: choosing all Node.js, or all Web/Edge-oriented runtimes.

With Vercel's advanced Remix support, applications can now choose their runtime on a per-route basis. This means you get the best parts of both Node.js and Web APIs – all in one application on one platform.

For current Remix projects on Vercel, use the Node.js runtime by default and configure Vercel Functions for backend logic.

Link to headingAdvanced Caching

Vercel supports caching loader responses using our Edge Network Cache by providing cache-control headers to a given route. This includes support for newer caching headers like stale-while-revalidate and stale-if-error.

For example, the following headers tell Vercel:

• If a request is repeated within the next second, the previously cached value is still fresh.

• If the request is repeated between 1 and 60 seconds later, the cached value will be marked as stale but still shown.

• In the background, a revalidation will be made to populate the cache with a fresh value from the loader.

1
export function headers() {
2
  return {
3
    "Cache-Control": "s-maxage=1, stale-while-revalidate=59",
4
  };
5
}

You can add further resiliency using the stale-if-error header. This tells the Vercel Edge Cache to reuse a stale response if the loader produces an error. For example, if you are trying to fetch data from a database or CMS and there’s a period of downtime, your site would not go down when the loader throws an error.

1
export function headers() {
2
  return {
3
    "Cache-Control": "s-max-age=2592000, stale-while-revalidate=86400, stale-if-error=604800",
4
  };
5
}

This cache-control value uses a max-age value of 30 days, a stale-if-revalidate value of 1 day, and a stale-if-error value of 7 days.

Jenna Smith has created a fantastic package to make working with cache-control values easier called pretty-cache-header. For example, the previous example would become:

1
import { cacheHeader } from 'pretty-cache-header';
2
export function headers() {
3
  return {
4
    "Cache-Control": cacheHeader({
5
      sMaxAge: '30days',
6
      staleWhileRevalidate: '1day',
7
      staleIfError: '7days'
8
    })
9
  };
10
}

Link to headingStreaming SSR on Vercel

Vercel's Remix integration has support for streaming SSR, including usage with both Edge and Node.js runtimes.

By default, the Vercel integration will automatically add app/entry.server.tsx, if not defined, which is configured for streaming. Existing Remix projects can also adopt the following entry file to stream isomorphically:

1
import { handleRequest } from '@vercel/remix';
2
import { RemixServer } from '@remix-run/react';
3
import type { EntryContext } from '@vercel/remix';
4
export default function (
5
  request: Request,
6
  responseStatusCode: number,
7
  responseHeaders: Headers,
8
  remixContext: EntryContext
9
) {
10
  const remixServer = <RemixServer context={remixContext} url={request.url} />;
11
  return handleRequest(
12
    request,
13
    responseStatusCode,
14
    responseHeaders,
15
    remixServer
16
  );
17
}

Powerful Remix features like defer() and <Await>, built on top of React 18 and Suspense, are now supported in both runtimes. For example, in our demo, we're able to simulate a throttled network by delaying our Promise by one second. Then, we can use the deferred result inside our React component.

1
import { Suspense } from 'react';
2
import { Await, useLoaderData } from '@remix-run/react';
3
export async function loader({ request }) {
4
  const version = process.versions.node;
5

6
  return defer({
7
    version: sleep(version, 1000),
8
  });
9
}
10
function sleep(val, ms) {
11
  return new Promise((resolve) => setTimeout(() => resolve(val), ms));
12
}
13
export default function App() {
14
  const { version } = useLoaderData();
15
  
16
  return (
17
    <Suspense fallback={'Loading…'}>
18
      <Await resolve={version}>
19
        {(version) => <strong>{version}</strong>}
20
      </Await>
21
    </Suspense>
22
  );
23
}

With Vercel, your Remix application is fast globally. With a cache MISS, we frequently see under 100ms latency for a dynamic server-rendered page.

Link to headingTry Remix on Vercel today

Remix on Vercel uses framework-defined infrastructure so your application can take advantage of Vercel Functions, caching, and streaming. With framework-defined infrastructure, your Remix application automatically takes advantage of the best infrastructure primitives.

We're continuing to invest in further improvements to Remix on Vercel and we'd love to hear your feedback on what you want to see.