T
TanStack•4mo ago
helpful-purple

Caching a data loader's output with staleTime not working

I'm new to Tanstack Router/Start and am looking to implement standard ISR/stale while revalidate behaviour: 1) Data gets a bundled at build time 2) Cached data is served without the fetch functions being invoked for 30 minutes (staleTime) 3) When the staleTime is hit, serve cache data one more time, rebuild cache under the hood for the next request In this implementation, I'm seeing getRecentTrends called on every page request though, rather than only once every 30 minutes. Am I doing this right? 
import { createFileRoute } from '@tanstack/react-router';
import { createServerFn } from '@tanstack/react-start';

import { getCategoryDistributionByHour, getRecentTrends } from '@/lib/trends';

export const fetchTrends = createServerFn({ method: 'GET' }).handler(async () => {
    return await getRecentTrends();
});

export const fetchCategoryDistributionByHour = createServerFn({ method: 'GET' }).handler(async () => {
    return await getCategoryDistributionByHour();
});

export const Route = createFileRoute('/')({
  component: Home,
  loader: async () => {
    const trends = await fetchTrends();
    const trendsByHourlyCategories = await fetchCategoryDistributionByHour();

    return { trends, trendsByHourlyCategories };
  },
  staleTime: 30 * 60 * 1000,
});

function Home() {
  const { trends, trendsByHourlyCategories } = Route.useLoaderData();

  return (
    <div>...</div>
  );
}
import { createFileRoute } from '@tanstack/react-router';
import { createServerFn } from '@tanstack/react-start';

import { getCategoryDistributionByHour, getRecentTrends } from '@/lib/trends';

export const fetchTrends = createServerFn({ method: 'GET' }).handler(async () => {
    return await getRecentTrends();
});

export const fetchCategoryDistributionByHour = createServerFn({ method: 'GET' }).handler(async () => {
    return await getCategoryDistributionByHour();
});

export const Route = createFileRoute('/')({
  component: Home,
  loader: async () => {
    const trends = await fetchTrends();
    const trendsByHourlyCategories = await fetchCategoryDistributionByHour();

    return { trends, trendsByHourlyCategories };
  },
  staleTime: 30 * 60 * 1000,
});

function Home() {
  const { trends, trendsByHourlyCategories } = Route.useLoaderData();

  return (
    <div>...</div>
  );
}
3 Replies
helpful-purple
helpful-purpleOP•4mo ago
I want to cache data between full page reloads not when clicking through router links with the linsk component. Sound like the staleTime doesn't apply to the server-side returned data? Do I need to do something more specific to Tanstack Start? Or handle server side caching entirely on my own?
genetic-orange
genetic-orange•4mo ago
stale time is only relevant on the client looks like you need a static server function?
helpful-purple
helpful-purpleOP•4mo ago
Can I do stale-while-revalidate style behaviour? Can it rebuild the static asset for the next request? Wasn't clear from the docs that it did this or that its custom cache function could rebuild its asset.

Did you find this page helpful?