Add staleTime caching finally ;)

TanStack · Dec 6, 2024 · 78c8a8a · 78c8a8a
1 parent 2842be0
commit 78c8a8a
Show file tree

Hide file tree

Showing 8 changed files with 21 additions and 10 deletions.
diff --git a/app/routes/$libraryId/$version.docs.$.tsx b/app/routes/$libraryId/$version.docs.$.tsx
@@ -6,7 +6,7 @@ import { getBranch, getLibrary } from '~/libraries'
 import { DocContainer } from '~/components/DocContainer'
 
 export const Route = createFileRoute('/$libraryId/$version/docs/$')({
-  staleTime: 1000 * 60,
+  staleTime: 1000 * 60 * 5,
   loader: (ctx) => {
     const { _splat: docsPath, version, libraryId } = ctx.params
     const library = getLibrary(libraryId)

diff --git a/app/routes/$libraryId/$version.docs.framework.$framework.$.tsx b/app/routes/$libraryId/$version.docs.framework.$framework.$.tsx
@@ -9,6 +9,7 @@ import { DocContainer } from '~/components/DocContainer'
 export const Route = createFileRoute(
   '/$libraryId/$version/docs/framework/$framework/$'
 )({
+  staleTime: 1000 * 60 * 5,
   loader: (ctx) => {
     const { _splat: docsPath, framework, version, libraryId } = ctx.params
 

diff --git a/app/routes/$libraryId/$version.docs.tsx b/app/routes/$libraryId/$version.docs.tsx
@@ -5,7 +5,7 @@ import { getTanstackDocsConfig } from '~/utils/config'
 import { seo } from '~/utils/seo'
 
 export const Route = createFileRoute('/$libraryId/$version/docs')({
-  staleTime: 1000 * 60,
+  staleTime: 1000 * 60 * 5,
   loader: async (ctx) => {
     const { libraryId, version } = ctx.params
     const library = getLibrary(libraryId)

diff --git a/app/routes/_libraries/blog.$.tsx b/app/routes/_libraries/blog.$.tsx
@@ -10,6 +10,7 @@ import { format } from 'date-fns'
 import { z } from 'zod'
 import { FaArrowLeft } from 'react-icons/fa'
 import { DocContainer } from '~/components/DocContainer'
+import { setHeaders } from 'vinxi/http'
 
 const fetchBlogPost = createServerFn({ method: 'GET' })
   .validator(z.string().optional())
@@ -29,6 +30,11 @@ const fetchBlogPost = createServerFn({ method: 'GET' })
     const frontMatter = extractFrontMatter(file)
     const description = removeMarkdown(frontMatter.excerpt ?? '')
 
+    setHeaders({
+      'cache-control': 'public, max-age=0, must-revalidate',
+      'cdn-cache-control': 'max-age=300, stale-while-revalidate=300, durable',
+    })
+
     return {
       title: frontMatter.data.title,
       description,
@@ -40,6 +46,7 @@ const fetchBlogPost = createServerFn({ method: 'GET' })
   })
 
 export const Route = createFileRoute('/_libraries/blog/$')({
+  staleTime: Infinity,
   loader: ({ params }) => fetchBlogPost({ data: params._splat }),
   head: ({ loaderData }) => {
     return {

diff --git a/app/routes/_libraries/blog.index.tsx b/app/routes/_libraries/blog.index.tsx
@@ -29,6 +29,12 @@ const fetchFrontMatters = createServerFn({ method: 'GET' }).handler(
 
         const frontMatter = extractFrontMatter(file)
 
+        setHeaders({
+          'cache-control': 'public, max-age=0, must-revalidate',
+          'cdn-cache-control':
+            'max-age=300, stale-while-revalidate=300, durable',
+        })
+
         return [
           info.id,
           {
@@ -61,6 +67,7 @@ const fetchFrontMatters = createServerFn({ method: 'GET' }).handler(
 )
 
 export const Route = createFileRoute('/_libraries/blog/')({
+  staleTime: Infinity,
   loader: () => fetchFrontMatters(),
   notFoundComponent: () => <PostNotFound />,
   component: BlogIndex,

diff --git a/app/routes/_libraries/dedicated-support.tsx b/app/routes/_libraries/dedicated-support.tsx
@@ -18,6 +18,7 @@ interface TeamMember {
 
 export const Route = createFileRoute('/_libraries/dedicated-support')({
   component: LoginComp,
+  staleTime: Infinity,
   loader: () => {
     let indices = shuffle(
       Array.from({ length: teamMembers.length - 1 })

diff --git a/app/routes/_libraries/route.tsx b/app/routes/_libraries/route.tsx
@@ -3,7 +3,6 @@ import {
   Link,
   Outlet,
   createFileRoute,
-  defer,
   useParams,
 } from '@tanstack/react-router'
 import { CgClose, CgMenuLeft, CgMusicSpeaker } from 'react-icons/cg'
@@ -12,13 +11,7 @@ import { twMerge } from 'tailwind-merge'
 import { OramaSearchBox } from '@orama/react-components'
 import { sortBy } from '~/utils/utils'
 import logoColor100w from '~/images/logo-color-100w.png'
-import {
-  FaDiscord,
-  FaGithub,
-  FaInstagram,
-  FaTshirt,
-  FaTwitter,
-} from 'react-icons/fa'
+import { FaDiscord, FaGithub, FaInstagram, FaTshirt } from 'react-icons/fa'
 import { getSponsorsForSponsorPack } from '~/server/sponsors'
 import { getLibrary, libraries } from '~/libraries'
 import { Scarf } from '~/components/Scarf'
@@ -28,6 +21,7 @@ import { ThemeToggle } from '~/components/ThemeToggle'
 import { TbBrandBluesky, TbBrandTwitter } from 'react-icons/tb'
 
 export const Route = createFileRoute('/_libraries')({
+  staleTime: Infinity,
   loader: async (ctx) => {
     return {
       sponsorsPromise: getSponsorsForSponsorPack(),

diff --git a/app/routes/sponsors-embed.tsx b/app/routes/sponsors-embed.tsx
@@ -7,6 +7,7 @@ const cacheHeaders = {
 }
 
 export const Route = createFileRoute('/sponsors-embed')({
+  staleTime: Infinity,
   loader: () => getSponsorsForSponsorPack(),
   headers: () => {
     // Cache the entire HTML response for 5 minutes