Merge pull request #21 from netlify/rs/cache-control

feat: add cache-control and vary handling to server handler

Author: orinokai

.eslintrc.cjs

@@ -21,6 +21,7 @@ module.exports = {
     {
       files: ['src/handlers/**'],
       rules: {
+        'max-statements': ['error', 30],
         'import/no-anonymous-default-export': 'off',
       },
     },

src/handlers/server.ts

@@ -1,15 +1,18 @@
 import { toComputeResponse, toReqRes } from '@fastly/http-compute-js'
+import type { NextConfigComplete } from 'next/dist/server/config-shared.js'
 import type { WorkerRequestHandler } from 'next/dist/server/lib/types.js'
 
 import { TASK_DIR } from '../helpers/constants.js'
+import { setCacheControlHeaders, setVaryHeaders } from '../helpers/headers.js'
 
-let nextHandler: WorkerRequestHandler
+let nextHandler: WorkerRequestHandler, nextConfig: NextConfigComplete
 
 export default async (request: Request) => {
   if (!nextHandler) {
     // set the server config
-    const { setRequestConfig } = await import('../helpers/config.js')
-    await setRequestConfig()
+    const { getRunConfig, setRunConfig } = await import('../helpers/config.js')
+    nextConfig = await getRunConfig()
+    setRunConfig(nextConfig)
 
     // let Next.js initialize and create the request handler
     const { getRequestHandlers } = await import('next/dist/server/lib/start-server.js')
@@ -36,5 +39,8 @@ export default async (request: Request) => {
   const response = { headers: res.getHeaders(), statusCode: res.statusCode }
   console.log('Next server response:', JSON.stringify(response, null, 2))
 
+  setCacheControlHeaders(res)
+  setVaryHeaders(res, req, nextConfig)
+
   return toComputeResponse(res)
 }

src/helpers/config.ts

@@ -1,27 +1,34 @@
 import { readFile } from 'node:fs/promises'
 
+import { NextConfigComplete } from 'next/dist/server/config-shared.js'
+
 import { TASK_DIR } from './constants.js'
 
 /**
- * Enable standalone mode at build-time
+ * Enable Next.js standalone mode at build time
  */
 export const setBuildConfig = () => {
   process.env.NEXT_PRIVATE_STANDALONE = 'true'
 }
 
 /**
- * Configure the request-time custom cache handler
+ * Get Next.js config from the build output
  */
-export const setRequestConfig = async () => {
+export const getRunConfig = async () => {
   // get config from the build output
-  const runtimeConfig = JSON.parse(await readFile(`${TASK_DIR}/.next/required-server-files.json`, 'utf-8'))
+  return JSON.parse(await readFile(`${TASK_DIR}/.next/required-server-files.json`, 'utf-8')).config
+}
 
+/**
+ * Configure the custom cache handler at request time
+ */
+export const setRunConfig = (config: NextConfigComplete) => {
   // set the path to the cache handler
-  runtimeConfig.config.experimental = {
-    ...runtimeConfig.config.experimental,
+  config.experimental = {
+    ...config.experimental,
     incrementalCacheHandlerPath: `${TASK_DIR}/dist/handlers/cache.cjs`,
   }
 
   // set config
-  process.env.__NEXT_PRIVATE_STANDALONE_CONFIG = JSON.stringify(runtimeConfig.config)
+  process.env.__NEXT_PRIVATE_STANDALONE_CONFIG = JSON.stringify(config)
 }

src/helpers/headers.ts

@@ -1,97 +1,94 @@
-import type { HandlerEvent } from '@netlify/functions'
+import type { IncomingMessage, ServerResponse } from 'http'
+
 import type { NextConfigComplete } from 'next/dist/server/config-shared.js'
 
-export interface NetlifyVaryHeaderBuilder {
+type HeaderValue = number | string | string[]
+
+interface NetlifyVaryDirectives {
   headers: string[]
   languages: string[]
   cookies: string[]
 }
 
-const generateNetlifyVaryHeaderValue = ({ headers, languages, cookies }: NetlifyVaryHeaderBuilder): string => {
-  let NetlifyVaryHeader = ``
-  if (headers && headers.length !== 0) {
-    NetlifyVaryHeader += `header=${headers.join(`|`)}`
+const generateNetlifyVaryDirectives = ({
+  headers,
+  languages,
+  cookies,
+}: NetlifyVaryDirectives): string[] => {
+  const directives = []
+  if (headers.length !== 0) {
+    directives.push(`header=${headers.join(`|`)}`)
   }
-  if (languages && languages.length !== 0) {
-    if (NetlifyVaryHeader.length !== 0) {
-      NetlifyVaryHeader += `,`
-    }
-    NetlifyVaryHeader += `language=${languages.join(`|`)}`
+  if (languages.length !== 0) {
+    directives.push(`language=${languages.join(`|`)}`)
   }
-  if (cookies && cookies.length !== 0) {
-    if (NetlifyVaryHeader.length !== 0) {
-      NetlifyVaryHeader += `,`
-    }
-    NetlifyVaryHeader += `cookie=${cookies.join(`|`)}`
+  if (cookies.length !== 0) {
+    directives.push(`cookie=${cookies.join(`|`)}`)
   }
-
-  return NetlifyVaryHeader
+  return directives
 }
 
-const getDirectives = (headerValue: string): string[] => headerValue.split(',').map((directive) => directive.trim())
-
-const removeSMaxAgeAndStaleWhileRevalidate = (headerValue: string): string =>
-  getDirectives(headerValue)
-    .filter((directive) => {
-      if (directive.startsWith('s-maxage')) {
-        return false
-      }
-      if (directive.startsWith('stale-while-revalidate')) {
-        return false
-      }
-      return true
-    })
-    .join(`,`)
-
-export const handleVary = (headers: Record<string, string>, event: HandlerEvent, nextConfig: NextConfigComplete) => {
-  const netlifyVaryBuilder: NetlifyVaryHeaderBuilder = {
+/**
+ * Parse a header value into an array of directives
+ */
+const getDirectives = (headerValue: HeaderValue): string[] => {
+  const directives = Array.isArray(headerValue) ? headerValue : String(headerValue).split(',')
+  return directives.map((directive) => directive.trim())
+}
+/**
+ * Ensure the Netlify CDN varies on things that Next.js varies on,
+ * e.g. i18n, preview mode, etc.
+ */
+export const setVaryHeaders = (
+  res: ServerResponse,
+  req: IncomingMessage,
+  { basePath, i18n }: NextConfigComplete,
+) => {
+  const netlifyVaryDirectives: NetlifyVaryDirectives = {
     headers: [],
     languages: [],
     cookies: ['__prerender_bypass', '__next_preview_data'],
   }
 
-  if (headers.vary.length !== 0) {
-    netlifyVaryBuilder.headers.push(...getDirectives(headers.vary))
+  const vary = res.getHeader('vary')
+  if (vary !== undefined) {
+    netlifyVaryDirectives.headers.push(...getDirectives(vary))
   }
 
-  const autoDetectedLocales = getAutoDetectedLocales(nextConfig)
-
-  if (autoDetectedLocales.length > 1) {
-    const logicalPath =
-      nextConfig.basePath && event.path.startsWith(nextConfig.basePath)
-        ? event.path.slice(nextConfig.basePath.length)
-        : event.path
+  const path = new URL(req.url ?? '/', `http://${req.headers.host}`).pathname
+  const locales = i18n && i18n.localeDetection !== false ? i18n.locales : []
 
+  if (locales.length > 1) {
+    const logicalPath = basePath && path.startsWith(basePath) ? path.slice(basePath.length) : path
     if (logicalPath === `/`) {
-      netlifyVaryBuilder.languages.push(...autoDetectedLocales)
-      netlifyVaryBuilder.cookies.push(`NEXT_LOCALE`)
+      netlifyVaryDirectives.languages.push(...locales)
+      netlifyVaryDirectives.cookies.push(`NEXT_LOCALE`)
     }
   }
 
-  const NetlifyVaryHeader = generateNetlifyVaryHeaderValue(netlifyVaryBuilder)
-  if (NetlifyVaryHeader.length !== 0) {
-    headers[`netlify-vary`] = NetlifyVaryHeader
-  }
-}
-
-export const handleCacheControl = (headers: Record<string, string>) => {
-  if (headers['cache-control'] && !headers['cdn-cache-control'] && !headers['netlify-cdn-cache-control']) {
-    headers['netlify-cdn-cache-control'] = headers['cache-control']
-
-    const filteredCacheControlDirectives = removeSMaxAgeAndStaleWhileRevalidate(headers['cache-control'])
-
-    // use default cache-control if no directives are left
-    headers['cache-control'] =
-      filteredCacheControlDirectives.length === 0
-        ? 'public, max-age=0, must-revalidate'
-        : filteredCacheControlDirectives
-  }
+  res.setHeader(`netlify-vary`, generateNetlifyVaryDirectives(netlifyVaryDirectives))
 }
 
-export const getAutoDetectedLocales = (config: NextConfigComplete): Array<string> => {
-  if (config.i18n && config.i18n.localeDetection !== false && config.i18n.locales.length > 1) {
-    return config.i18n.locales
+/**
+ * Ensure stale-while-revalidate and s-maxage don't leak to the client, but
+ * assume the user knows what they are doing if CDN cache controls are set
+ */
+export const setCacheControlHeaders = (res: ServerResponse) => {
+  const cacheControl = res.getHeader('cache-control')
+  if (
+    cacheControl !== undefined &&
+    !res.hasHeader('cdn-cache-control') &&
+    !res.hasHeader('netlify-cdn-cache-control')
+  ) {
+    const directives = getDirectives(cacheControl).filter(
+      (directive) =>
+        !directive.startsWith('s-maxage') && !directive.startsWith('stale-while-revalidate'),
+    )
+
+    res.setHeader('netlify-cdn-cache-control', cacheControl)
+    res.setHeader(
+      'cache-control',
+      directives.length === 0 ? 'public, max-age=0, must-revalidate' : directives,
+    )
   }
-
-  return []
 }