ISR style caching for TanStack Start (across page loads/clients)

[jschuur]

I'm trying to replicate something Tanner said here suggesting how to do Next.js style stale-while-revalidate ISR with cache control headers:

TanStack Start/Router can do ISR, which is really just a pattern of caching html responses using cache headers with stale-while-revalidate. Just return some cache headers like these from the routeConfig.headers function like this:

headers: () => ({
  'cache-control': 'public, max-age=0, must-revalidate',
  'cdn-cache-control': 'max-age=300, stale-while-revalidate=300, durable',
})

And you've got yourself some ISR.

The TanStack blog seems to implement this approach, but as of right now, I still couldn't quite replicate this. getData here gets called for every page request.

(see also sample repo: https://github.com/jschuur/tanstack-start-isr-sample or live URL)

import { createFileRoute } from '@tanstack/react-router';
import { createServerFn } from '@tanstack/react-start';
import { setHeaders } from 'vinxi/http';

import { getData } from '~/data';

export const fetchData = createServerFn({ method: 'GET' }).handler(async () => {
  setHeaders({
    'cache-control': 'public, max-age=0, must-revalidate',
    'cdn-cache-control': 'max-age=1800, stale-while-revalidate=1800, durable',
  });

  return await getData();
});

export const Route = createFileRoute('/')({
  component: RouteComponent,
  loader: async () => {
    return await fetchData();
  },
  headers: () => {
    return {
      'cache-control': 'public, max-age=0, must-revalidate',
      'cdn-cache-control': 'max-age=1800, stale-while-revalidate=1800, durable',
    };
  },
});

function RouteComponent() {
  const data = Route.useLoaderData();

  return (
    <main>
      <p>
        <code>{JSON.stringify(data, null, 2)}</code>
      </p>
    </main>
  );
}

I can see the correct headers being set at the root URL level in the network tab...

...but not for the index.js request:

So I'm not setting headers in all the right places because they don't get passed through?

FWIW, I'm using SST to deploy this to AWS, so not sure if this needs extra config.

Have updated this thread with the latest details after Tanner responded on Discord, but I still can't get this to work.

[jschuur]

Turns out AWS doesn't support cdn-cache-control and for CloudFront, I can just consolidate it all under one header:

'Cache-Control': 'public, max-age=0, must-revalidate, s-maxage=1800, stale-while-revalidate=1800'

s-maxage will tell CF to cache for 30 minutes.