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

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

Author: HerrBertling

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
+}