Use page specific stale-while-revalidate Cache-Control headers

src/routes/+layout.server.ts

@@ -4,7 +4,7 @@ import { fetchAPI } from '$utils/api'
 import { PUBLIC_PREVIEW_COUNT } from '$env/static/public'
 
 
-export const load: PageServerLoad = async ({ setHeaders }) => {
+export const load: PageServerLoad = async () => {
     try {
         const res = await fetchAPI(`query {
             locations: location (filter: { status: { _eq: "published" }}) {
@@ -87,8 +87,6 @@ export const load: PageServerLoad = async ({ setHeaders }) => {
         }`)
 
         if (res) {
-            setHeaders({ 'Cache-Control': 'public, max-age=1, stale-while-revalidate=59' })
-
             const { data: { countPhotos, countLocations, countCountries, ...rest }} = res
 
             return {

src/routes/+page.server.ts

@@ -3,7 +3,7 @@ import type { PageServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'
 import { getRandomItems } from '$utils/functions'
 
-export const load: PageServerLoad = async () => {
+export const load: PageServerLoad = async ({ setHeaders }) => {
     try {
         // Get total of published photos
         const totalRes = await fetchAPI(`query {
@@ -43,6 +43,8 @@ export const load: PageServerLoad = async () => {
         const { data: { photo: photos }} = photosRes
 
         if (photos) {
+            setHeaders({ 'Cache-Control': 'public, max-age=1, stale-while-revalidate=599' })
+
             return {
                 photos,
             }

src/routes/[country]/[location]/+page.server.ts

@@ -4,7 +4,7 @@ import { PUBLIC_LIST_AMOUNT } from '$env/static/public'
 import { fetchAPI, photoFields } from '$utils/api'
 
 
-export const load: PageServerLoad = async ({ params }) => {
+export const load: PageServerLoad = async ({ params, setHeaders }) => {
     try {
         const { location: slug } = params
 
@@ -71,6 +71,8 @@ export const load: PageServerLoad = async ({ params }) => {
             throw error(404, "This location is not available… yet!")
         }
 
+        setHeaders({ 'Cache-Control': 'public, max-age=1, stale-while-revalidate=604799' })
+
         return {
             location: location[0],
             photos,

src/routes/[country]/[location]/[photo]/+page.server.ts

@@ -2,7 +2,7 @@ import { error } from '@sveltejs/kit'
 import type { PageServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'
 
-export const load: PageServerLoad = async ({ params }) => {
+export const load: PageServerLoad = async ({ params, setHeaders }) => {
     try {
         // Get the first photo ID
         const firstPhoto = await fetchAPI(`query {
@@ -74,6 +74,8 @@ export const load: PageServerLoad = async ({ params }) => {
         if (data) {
             const currentIndex = data.photos.findIndex((photo: any) => photo.slug === params.photo)
 
+            setHeaders({ 'Cache-Control': 'public, max-age=1, stale-while-revalidate=604799' })
+
             return {
                 photos: data.photos,
                 location: data.location[0],

src/routes/about/+page.server.ts

@@ -3,7 +3,7 @@ import type { PageServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'
 import { getRandomItems } from '$utils/functions'
 
-export const load: PageServerLoad = async () => {
+export const load: PageServerLoad = async ({ setHeaders }) => {
     try {
         // Get data and total of published photos
         const res = await fetchAPI(`query {
@@ -91,6 +91,8 @@ export const load: PageServerLoad = async () => {
         if (photosRes) {
             const { data: { photo: photos }} = photosRes
 
+            setHeaders({ 'Cache-Control': 'public, max-age=1, stale-while-revalidate=604799' })
+
             return {
                 about,
                 photos,

src/routes/api/data/+server.ts

@@ -3,7 +3,7 @@ import type { RequestHandler } from './$types'
 import { fetchAPI } from '$utils/api'
 
 
-export const POST: RequestHandler = async ({ request }) => {
+export const POST: RequestHandler = async ({ request, setHeaders }) => {
     try {
         const body = await request.text()
 
@@ -12,6 +12,8 @@ export const POST: RequestHandler = async ({ request }) => {
             const res = await req
 
             if (res) {
+                setHeaders({ 'Cache-Control': 'public, max-age=1, stale-while-revalidate=59' })
+
                 return new Response(JSON.stringify({
                     ...res
                 }))

src/routes/credits/+page.server.ts

@@ -2,7 +2,7 @@ import { error } from '@sveltejs/kit'
 import type { PageServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'
 
-export const load: PageServerLoad = async () => {
+export const load: PageServerLoad = async ({ setHeaders }) => {
     try {
         const res = await fetchAPI(`query {
             credits {
@@ -28,10 +28,14 @@ export const load: PageServerLoad = async () => {
             }
         }`)
 
-        const { data } = res
+        if (res) {
+            const { data } = res
 
-        return {
+            setHeaders({ 'Cache-Control': 'public, max-age=1, stale-while-revalidate=604799' })
-            ...data
+
+            return {
+                ...data
+            }
         }
     } catch (err) {
         throw error(500, err.message)

src/routes/photos/+page.server.ts

@@ -4,7 +4,7 @@ import { fetchAPI } from '$utils/api'
 import { PUBLIC_FILTERS_DEFAULT_COUNTRY, PUBLIC_FILTERS_DEFAULT_SORT, PUBLIC_GRID_AMOUNT } from '$env/static/public'
 
 
-export const load: PageServerLoad = async ({ url }) => {
+export const load: PageServerLoad = async ({ url, setHeaders }) => {
     try {
         // Query parameters
         const queryCountry = url.searchParams.get('country') || PUBLIC_FILTERS_DEFAULT_COUNTRY
@@ -66,12 +66,16 @@ export const load: PageServerLoad = async ({ url }) => {
             }
         }`)
 
-        const { data } = res
+        if (res) {
+            setHeaders({ 'Cache-Control': 'public, max-age=1, stale-while-revalidate=86399' })
 
-        return {
+            const { data } = res
-            photos: data.photos,
+
-            filteredCountryExists: data.country.length > 0,
+            return {
-            totalPhotos: data.total_published[0].count.id,
+                photos: data.photos,
+                filteredCountryExists: data.country.length > 0,
+                totalPhotos: data.total_published[0].count.id,
+            }
         }
     } catch (err) {
         throw error(500, err.message)

src/routes/shop/+page.server.ts

@@ -4,7 +4,7 @@ import { fetchAPI } from '$utils/api'
 import { getRandomItem } from '$utils/functions'
 import { fetchSwell } from '$utils/functions/shopServer'
 
-export const load: PageServerLoad = async ({}) => {
+export const load: PageServerLoad = async ({ setHeaders }) => {
     try {
         // Get content from API
         const data = await fetchAPI(`query {
@@ -42,6 +42,8 @@ export const load: PageServerLoad = async ({}) => {
             const shopProduct: any = await fetchSwell(`/products/${randomPoster.product_id}`)
 
             if (shopProduct) {
+                setHeaders({ 'Cache-Control': 'public, max-age=1, stale-while-revalidate=86399' })
+
                 return {
                     product: randomPoster,
                     shopProduct,

src/routes/shop/[type]-[name]/+page.server.ts

@@ -3,7 +3,7 @@ import type { PageServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'
 import { fetchSwell } from '$utils/functions/shopServer'
 
-export const load: PageServerLoad = async ({ params }) => {
+export const load: PageServerLoad = async ({ params, setHeaders }) => {
     try {
         // Get content from API
         const data = await fetchAPI(`query {
@@ -39,6 +39,8 @@ export const load: PageServerLoad = async ({ params }) => {
             const shopProduct: any = await fetchSwell(`/products/${poster.product_id}`)
 
             if (shopProduct) {
+                setHeaders({ 'Cache-Control': 'public, max-age=1, stale-while-revalidate=604799' })
+
                 return {
                     product: poster,
                     shopProduct,

src/routes/subscribe/+page.server.ts

@@ -2,7 +2,7 @@ import { error } from '@sveltejs/kit'
 import type { PageServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'
 
-export const load: PageServerLoad = async () => {
+export const load: PageServerLoad = async ({ setHeaders }) => {
     try {
         const res = await fetchAPI(`query {
             settings {
@@ -22,11 +22,15 @@ export const load: PageServerLoad = async () => {
             }
         }`)
 
-        const { data } = res
+        if (res) {
+            const { data } = res
 
-        return {
+            setHeaders({ 'Cache-Control': 'public, max-age=1, stale-while-revalidate=86399' })
-            ...data.settings,
+
-            issues: data.newsletter,
+            return {
+                ...data.settings,
+                issues: data.newsletter,
+            }
         }
     } catch (err) {
         throw error(500, err.message)

src/routes/terms/+page.server.ts

@@ -2,7 +2,7 @@ import { error } from '@sveltejs/kit'
 import type { PageServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'
 
-export const load: PageServerLoad = async () => {
+export const load: PageServerLoad = async ({ setHeaders }) => {
     try {
         const res = await fetchAPI(`query {
             legal {
@@ -11,10 +11,14 @@ export const load: PageServerLoad = async () => {
             }
         }`)
 
-        const { data } = res
+        if (res) {
+            const { data } = res
 
-        return {
+            setHeaders({ 'Cache-Control': 'public, max-age=1, stale-while-revalidate=604799' })
-            ...data
+
+            return {
+                ...data
+            }
         }
     } catch (err) {
         throw error(500, err.message)