feat: add short-lived cache for prefetch requests (#46)

HerrBertling · web-flow · commit db14e4b8c0a8 · 2025-07-07T14:44:10.000+02:00
which avoids a second request when loading the prefetched route data on actual navigation. This should speed up the UI quite a bit because one request is better than two requests, haha :D Fixes #39 ## Type of change Please mark relevant options with an `x` in the brackets. - [x] New feature (non-breaking change which adds functionality) # How Has This Been Tested? Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration - [x] Manual tests
diff --git a/app/entry.server.tsx b/app/entry.server.tsx
@@ -4,7 +4,7 @@ import { createInstance } from "i18next"
 import { isbot } from "isbot"
 import { renderToPipeableStream } from "react-dom/server"
 import { I18nextProvider, initReactI18next } from "react-i18next"
-import { type AppLoadContext, type EntryContext, ServerRouter } from "react-router"
+import { type AppLoadContext, type EntryContext, type HandleDataRequestFunction, ServerRouter } from "react-router"
 import i18n from "./localization/i18n" // your i18n configuration file
 import i18nextOpts from "./localization/i18n.server"
 import { resources } from "./localization/resource"
@@ -71,3 +71,27 @@ export default async function handleRequest(
 		setTimeout(abort, streamTimeout + 1000)
 	})
 }
+
+/**
+ * This adds a cache header to the response for prefetch requests
+ *  to avoid double requests as suggested here:
+ * https://sergiodxa.com/tutorials/fix-double-data-request-when-prefetching-in-remix
+ */
+export const handleDataRequest: HandleDataRequestFunction = async (response: Response, { request }) => {
+	const isGet = request.method.toLowerCase() === "get"
+	const purpose =
+		request.headers.get("Purpose") ||
+		request.headers.get("X-Purpose") ||
+		request.headers.get("Sec-Purpose") ||
+		request.headers.get("Sec-Fetch-Purpose") ||
+		request.headers.get("Moz-Purpose")
+	const isPrefetch = purpose === "prefetch"
+
+	// If it's a GET request and it's a prefetch request and it doesn't have a Cache-Control header
+	if (isGet && isPrefetch && !response.headers.has("Cache-Control")) {
+		// we will cache for 10 seconds only on the browser
+		response.headers.set("Cache-Control", "private, max-age=10")
+	}
+
+	return response
+}
