add Cache-Control headers to the most import routes

app/root.tsx

@@ -27,6 +27,7 @@ import type { MovieTheater, WithContext } from "schema-dts";
 import { locationSchema } from "cms/structured-data/location";
 import { addContext } from "cms/structured-data";
 import { ModalContainer, ModalProvider } from "@faceless-ui/modal";
+import { cacheControlShortWithSWR } from "./util/cacheControl";
 
 export const ErrorBoundary = ErrorPage;
 
@@ -66,6 +67,7 @@ export async function loader({
     {
       headers: {
         "Set-Cookie": localeCookie,
+        "Cache-Control": cacheControlShortWithSWR,
       },
     }
   );

app/routes/_main.$staticPage._index/route.tsx

@@ -1,12 +1,18 @@
 /* eslint-disable no-case-declarations */
 import React from "react";
-import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
+import {
+  json,
+  type HeadersFunction,
+  type LoaderFunctionArgs,
+  type MetaFunction,
+} from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import i18next from "~/i18next.server";
 import Page from "~/components/Page";
 import { mergeMeta, pageMeta } from "~/util/pageMeta";
 import { ErrorPage } from "~/components/ErrorPage";
 import type { loader as rootLoader } from "app/root";
+import { cacheControlShortWithSWR } from "~/util/cacheControl";
 
 export const ErrorBoundary = ErrorPage;
 
@@ -30,9 +36,16 @@ export const loader = async ({
     throw new Response("Page not found", { status: 404 });
   }
 
-  return {
-    page: res.docs[0],
-  };
+  return json(
+    {
+      page: res.docs[0],
+    },
+    {
+      headers: {
+        "Cache-Control": cacheControlShortWithSWR,
+      },
+    }
+  );
 };
 
 export const meta: MetaFunction<
@@ -45,6 +58,10 @@ export const meta: MetaFunction<
   return pageMeta(data?.page.meta, site?.meta);
 });
 
+export const headers: HeadersFunction = () => ({
+  "Cache-Control": cacheControlShortWithSWR,
+});
+
 export const StaticPage: React.FC = () => {
   const { page } = useLoaderData<typeof loader>();
 

app/routes/_main.news._index/route.tsx

@@ -3,6 +3,7 @@ import {
   type LoaderFunctionArgs,
   type MetaFunction,
   type HeadersFunction,
+  json,
 } from "@remix-run/node";
 import { Link, useLoaderData, useRouteLoaderData } from "@remix-run/react";
 import { useTranslation } from "react-i18next";
@@ -17,9 +18,10 @@ import { postsListSchema } from "cms/structured-data/post";
 import ScreeningsList from "~/components/ScreeningsList";
 import type { loader as rootLoader } from "app/root";
 import Gutter from "~/components/Gutter";
+import { cacheControlShortWithSWR } from "~/util/cacheControl";
 
 export const headers: HeadersFunction = () => ({
-  "Cache-Control": "max-age=3600, s-maxage=3600",
+  "Cache-Control": cacheControlShortWithSWR,
 });
 
 export const loader = async ({
@@ -83,11 +85,19 @@ export const loader = async ({
     });
   }
 
-  return {
-    page,
-    posts,
-    screenings,
-  };
+  return json(
+    {
+      page,
+      posts,
+      screenings,
+    },
+    {
+      headers: {
+        // cache this data for 10 minutes, and allow stale data to be served while revalidating for 1h
+        "Cache-Control": cacheControlShortWithSWR,
+      },
+    }
+  );
 };
 
 export const meta: MetaFunction<

app/routes/_main.screenings.$screeningSlug/route.tsx

@@ -1,5 +1,10 @@
-import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
+import type {
+  HeadersFunction,
+  LoaderFunctionArgs,
+  MetaFunction,
+} from "@remix-run/node";
 import { Link, useLoaderData, useRouteLoaderData } from "@remix-run/react";
+import { json } from "@remix-run/node";
 import type {
   FilmPrint,
   Movie as MovieType,
@@ -23,6 +28,7 @@ import { format } from "date-fns-tz";
 import { useTranslation } from "react-i18next";
 import RichText from "~/components/RichText";
 import Gutter from "~/components/Gutter";
+import { cacheControlVeryShortCacheButLongSWR } from "~/util/cacheControl";
 
 export const loader = async ({
   params,
@@ -56,10 +62,17 @@ export const loader = async ({
     throw new Response("Screening not found", { status: 404 });
   }
 
-  return {
-    screening: data.docs[0],
-    navigation,
-  };
+  return json(
+    {
+      screening: data.docs[0],
+      navigation,
+    },
+    {
+      headers: {
+        "Cache-Control": cacheControlVeryShortCacheButLongSWR,
+      },
+    }
+  );
 };
 
 export const meta: MetaFunction<
@@ -102,6 +115,10 @@ export const meta: MetaFunction<
   ];
 });
 
+export const headers: HeadersFunction = () => ({
+  "Cache-Control": cacheControlVeryShortCacheButLongSWR,
+});
+
 export default function Item() {
   const { screening, navigation } = useLoaderData<typeof loader>();
   const { site } = useRouteLoaderData<typeof rootLoader>("root")!;

app/routes/_main.screenings._index/route.tsx

@@ -1,4 +1,8 @@
-import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
+import type {
+  HeadersFunction,
+  LoaderFunctionArgs,
+  MetaFunction,
+} from "@remix-run/node";
 import { useLoaderData, useRouteLoaderData } from "@remix-run/react";
 import { Page } from "~/components/Page";
 import { ScreeningsList } from "~/components/ScreeningsList";
@@ -8,6 +12,7 @@ import { ErrorPage } from "~/components/ErrorPage";
 import type { loader as rootLoader } from "app/root";
 import Gutter from "~/components/Gutter";
 import Pagination from "~/components/Pagination";
+import { cacheControlShort } from "~/util/cacheControl";
 
 export const ErrorBoundary = ErrorPage;
 
@@ -65,6 +70,10 @@ export const meta: MetaFunction<
   return pageMeta(data?.page.meta, site?.meta);
 });
 
+export const headers: HeadersFunction = () => ({
+  "Cache-Control": cacheControlShort,
+});
+
 export default function Index() {
   const { page, screenings } = useLoaderData<typeof loader>();
   const { site } = useRouteLoaderData<typeof rootLoader>("root")!;

app/routes/_main/route.tsx

@@ -1,11 +1,13 @@
 import type { LoaderFunctionArgs } from "@remix-run/node";
+import { json } from "@remix-run/node";
 import { Outlet, useLoaderData, useRouteLoaderData } from "@remix-run/react";
 import Footer from "~/components/Footer";
 import Header from "~/components/Header";
 import i18next from "~/i18next.server";
 import classes from "./index.module.css";
 import { ErrorPage } from "~/components/ErrorPage";
 import type { loader as rootLoader } from "~/root";
+import { cacheControlShortWithSWR } from "~/util/cacheControl";
 
 export const ErrorBoundary = ErrorPage;
 
@@ -21,9 +23,16 @@ export const loader = async ({
     locale,
   });
 
-  return {
-    navigations: navigations.docs,
-  };
+  return json(
+    {
+      navigations: navigations.docs,
+    },
+    {
+      headers: {
+        "Cache-Control": cacheControlShortWithSWR,
+      },
+    }
+  );
 };
 
 export const handle = {

app/util/cacheControl.ts

@@ -0,0 +1,20 @@
+/**
+ * cache for 5 minutes
+ */
+export const cacheControlShort = `public, max-age=${60 * 5}, s-maxage=${
+  60 * 5
+}`;
+
+/**
+ * cache for 5 minutes, and allow stale data to be served while revalidating for 1h
+ */
+export const cacheControlShortWithSWR = `public, max-age=${60 * 5}, s-maxage=${
+  60 * 5
+}, stale-while-revalidate=${60 * 60}`;
+
+/**
+ * cache for 1 minute, and allow stale data to be served while revalidating for 1 week
+ */
+export const cacheControlVeryShortCacheButLongSWR = `public, max-age=${
+  60 * 1
+}, s-maxage=${60 * 1}, stale-while-revalidate=${60 * 60 * 24 * 7}`;