feature: actually specify cache control headers, especially for the b…

…raindump content page (#57)

app/routes/braindumps.list.$braindumpId.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { useEffect, useState, Fragment, useMemo } from "react";
-import { json } from "@remix-run/node";
+import { HeadersFunction, json } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import notionClient from "~/integrations/notion";
 
@@ -155,11 +155,20 @@ export const loader = async ({
     );
   }
 
-  return json({
-    braindumpMeta: response,
-    braindumpContent: blocks,
-    braindumpContentReferences: references,
-  });
+  const headers = { "Cache-Control": "max-age=3600" };
+
+  return json(
+    {
+      braindumpMeta: response,
+      braindumpContent: blocks,
+      braindumpContentReferences: references,
+    },
+    { headers }
+  );
+};
+
+export const headers: HeadersFunction = ({ loaderHeaders }) => {
+  return { "Cache-Control": loaderHeaders.get("Cache-Control")! };
 };
 
 export const links = () => {

app/routes/braindumps.tsx

@@ -110,8 +110,10 @@ const SummaryPanelWithBostockAnimation = () => {
   );
 };
 
-export const headers: HeadersFunction = ({ loaderHeaders }) => {
-  return { "Cache-Control": loaderHeaders.get("Cache-Control")! };
+export const headers: HeadersFunction = () => {
+  return {
+    "Cache-Control": "s-maxage=3600",
+  };
 };
 
 export default function BraindumpsIndex() {

app/routes/braindumps/list.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { useEffect, useState } from "react";
 import { useLoaderData, useCatch } from "@remix-run/react";
 import { json } from "@remix-run/server-runtime";
@@ -73,7 +74,6 @@ export function CatchBoundary() {
   }
 }
 
-// TODO: write note about how remix handles styles, particularly for a component library
 export const links = () => {
   return [
     {