perf: add long-term caching for note and user images

Author: kentcdodds

app/routes/resources+/note-images.$imageId.tsx

@@ -12,5 +12,13 @@ export async function loader({ params }: Route.LoaderArgs) {
 	invariantResponse(noteImage, 'Note image not found', { status: 404 })
 
 	const { url, headers } = getSignedGetRequestInfo(noteImage.storageKey)
-	return fetch(url, { headers })
+	const response = await fetch(url, { headers })
+
+	const cacheHeaders = new Headers(response.headers)
+	cacheHeaders.set('Cache-Control', 'public, max-age=31536000, immutable')
+
+	return new Response(response.body, {
+		status: response.status,
+		headers: cacheHeaders,
+	})
 }

app/routes/resources+/user-images.$imageId.tsx

@@ -10,6 +10,15 @@ export async function loader({ params }: Route.LoaderArgs) {
 		select: { storageKey: true },
 	})
 	invariantResponse(userImage, 'User image not found', { status: 404 })
+
 	const { url, headers } = getSignedGetRequestInfo(userImage.storageKey)
-	return fetch(url, { headers })
+	const response = await fetch(url, { headers })
+
+	const cacheHeaders = new Headers(response.headers)
+	cacheHeaders.set('Cache-Control', 'public, max-age=31536000, immutable')
+
+	return new Response(response.body, {
+		status: response.status,
+		headers: cacheHeaders,
+	})
 }