Merge pull request #2 from netlify/rs/nf-cdn-cache-control

feat: implement stale while revalidate handling via the new CDN platform primitive

Author: orinokai

package-lock.json

@@ -39,14 +39,14 @@
     "@netlify/functions": "^2.0.1",
     "@vercel/nft": "^0.24.2",
     "@vercel/node-bridge": "^3.1.14",
-    "fs-extra": "^11.1.1",
-    "next": "^13.4.16"
+    "fs-extra": "^11.1.1"
   },
   "devDependencies": {
     "@netlify/eslint-config-node": "^7.0.1",
     "@types/fs-extra": "^11.0.1",
     "@types/mock-fs": "^4.13.1",
     "mock-fs": "^5.2.0",
+    "next": "^13.5.4",
     "typescript": "^5.1.6",
     "vitest": "^0.34.2"
   }

package.json

@@ -6,17 +6,19 @@ import { copySync, moveSync } from 'fs-extra/esm'
 import { __dirname, NETLIFY_PUBLISH_DIR, NETLIFY_TEMP_DIR } from './constants.js'
 
 /**
- * Modify the user's next.config.js to use standalone mode
+ * Modify the user's next.config.js to use standalone mode and cache handler
  */
 export const modifyNextConfig = () => {
   // revert any previous changes
   revertNextConfig()
 
+  // backup config and replace with our own
   moveSync('next.config.js', `${NETLIFY_TEMP_DIR}/next.config.js`)
   copySync(`${__dirname}/../templates/next.config.cjs`, 'next.config.js')
 }
 
 export const revertNextConfig = () => {
+  // check if modified, then revert
   if (readFileSync('next.config.js').includes('Netlify generated code')) {
     moveSync(`${NETLIFY_TEMP_DIR}/next.config.js`, 'next.config.js', { overwrite: true })
   }

src/helpers/config.ts

@@ -8,6 +8,6 @@ export const NETLIFY_TEMP_DIR = '.netlify/temp'
 export const FUNCTIONS_INTERNAL_DIR = '.netlify/functions-internal'
 export const FUNCTIONS_URL = '/.netlify/functions'
 
-export const HANDLER_NAME = '___netlify-handler'
-export const HANDLER_DIR = `${FUNCTIONS_INTERNAL_DIR}/${HANDLER_NAME}`
-export const HANDLER_URL = `${FUNCTIONS_URL}/${HANDLER_NAME}`
+export const SERVER_HANDLER_NAME = '___netlify-server-handler'
+export const SERVER_HANDLER_DIR = `${FUNCTIONS_INTERNAL_DIR}/${SERVER_HANDLER_NAME}`
+export const SERVER_HANDLER_URL = `${FUNCTIONS_URL}/${SERVER_HANDLER_NAME}`

src/helpers/constants.ts

@@ -1,45 +1,74 @@
+import { writeFileSync } from 'fs'
+
 import { NetlifyConfig } from '@netlify/build'
 import { nodeFileTrace } from '@vercel/nft'
 import { copySync, emptyDirSync, readJsonSync, writeJSONSync } from 'fs-extra/esm'
 
-import { HANDLER_DIR, HANDLER_NAME, HANDLER_URL, __dirname } from './constants.js'
+import {
+  NETLIFY_TEMP_DIR,
+  SERVER_HANDLER_DIR,
+  SERVER_HANDLER_NAME,
+  SERVER_HANDLER_URL,
+  __dirname,
+} from './constants.js'
 
 /**
  * Create a Netlify function to run the Next.js server
  * @param publishDir The publish directory
  * @param config Netlify config
  */
-export const createHandlerFunction = async (publishDir: string, config: NetlifyConfig) => {
-  emptyDirSync(HANDLER_DIR)
-
+export const createServerHandler = async (publishDir: string, config: NetlifyConfig) => {
   const pluginDir = `${__dirname}../..`
   const pluginPkg = readJsonSync(`${pluginDir}/package.json`)
 
+  emptyDirSync(SERVER_HANDLER_DIR)
+  await copyServerHandlerDependencies(pluginDir)
+  copyNextJsDependencies(publishDir)
+  writeServerHandlerFiles(pluginPkg)
+
+  config.redirects ||= []
+  config.redirects.push({ from: `/*`, to: SERVER_HANDLER_URL, status: 200 })
+}
+
+const copyServerHandlerDependencies = async (pluginDir: string) => {
+  const { fileList } = await nodeFileTrace(
+    [`${pluginDir}/dist/templates/server-handler.js`, `${pluginDir}/dist/templates/cache-handler.cjs`],
+    {
+      base: pluginDir,
+      ignore: ['package.json'],
+    },
+  )
+
+  fileList.forEach((path) => {
+    copySync(`${pluginDir}/${path}`, `${SERVER_HANDLER_DIR}/${path}`)
+  })
+}
+
+const copyNextJsDependencies = (publishDir: string) => {
+  copySync(`${publishDir}/standalone/.next`, `${SERVER_HANDLER_DIR}/.next`)
+  copySync(`${publishDir}/standalone/node_modules`, `${SERVER_HANDLER_DIR}/node_modules`)
+}
+
+const writeServerHandlerFiles = (pluginPkg: { name: string; version: string }) => {
   const metadata = {
     config: {
       name: 'Next.js Server Handler',
       generator: `${pluginPkg.name}@${pluginPkg.version}`,
       nodeBundler: 'none',
-      includedFiles: [`${HANDLER_DIR}/${HANDLER_NAME}.*`, `${HANDLER_DIR}/.next/**`, `${HANDLER_DIR}/node_modules/**`],
+      includedFiles: [`${SERVER_HANDLER_NAME}.*`, `dist/**`, `.next/**`, `node_modules/**`, `package.json`],
+      includedFilesBasePath: SERVER_HANDLER_DIR,
     },
     version: 1,
   }
 
-  const { fileList } = await nodeFileTrace([`${pluginDir}/dist/templates/handler.js`], {
-    base: pluginDir,
-  })
-  const [handler, ...dependencies] = [...fileList]
-
-  dependencies.forEach((path) => {
-    copySync(`${pluginDir}/${path}`, `${HANDLER_DIR}/${path}`)
-  })
-
-  copySync(`${publishDir}/standalone/.next`, `${HANDLER_DIR}/.next`)
-  copySync(`${publishDir}/standalone/node_modules`, `${HANDLER_DIR}/node_modules`)
-
-  copySync(`${pluginDir}/${handler}`, `${HANDLER_DIR}/${HANDLER_NAME}.mjs`)
-  writeJSONSync(`${HANDLER_DIR}/${HANDLER_NAME}.json`, metadata, { spaces: 2 })
+  writeJSONSync(`${SERVER_HANDLER_DIR}/${SERVER_HANDLER_NAME}.json`, metadata)
+  writeJSONSync(`${SERVER_HANDLER_DIR}/package.json`, { type: 'module' })
+  writeFileSync(
+    `${SERVER_HANDLER_DIR}/${SERVER_HANDLER_NAME}.js`,
+    `export { handler } from './dist/templates/server-handler.js'`,
+  )
+}
 
-  config.redirects ||= []
-  config.redirects.push({ from: `/*`, to: HANDLER_URL, status: 200 })
+export const createCacheHandler = () => {
+  copySync(`${__dirname}/../templates/cache-handler.cjs`, `${NETLIFY_TEMP_DIR}/cache-handler.js`)
 }

src/helpers/functions.ts

@@ -0,0 +1,97 @@
+import type { HandlerEvent } from '@netlify/functions'
+import type { NextConfigComplete } from 'next/dist/server/config-shared.js'
+
+export interface NetlifyVaryHeaderBuilder {
+  headers: string[]
+  languages: string[]
+  cookies: string[]
+}
+
+const generateNetlifyVaryHeaderValue = ({ headers, languages, cookies }: NetlifyVaryHeaderBuilder): string => {
+  let NetlifyVaryHeader = ``
+  if (headers && headers.length !== 0) {
+    NetlifyVaryHeader += `header=${headers.join(`|`)}`
+  }
+  if (languages && languages.length !== 0) {
+    if (NetlifyVaryHeader.length !== 0) {
+      NetlifyVaryHeader += `,`
+    }
+    NetlifyVaryHeader += `language=${languages.join(`|`)}`
+  }
+  if (cookies && cookies.length !== 0) {
+    if (NetlifyVaryHeader.length !== 0) {
+      NetlifyVaryHeader += `,`
+    }
+    NetlifyVaryHeader += `cookie=${cookies.join(`|`)}`
+  }
+
+  return NetlifyVaryHeader
+}
+
+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 = {
+    headers: [],
+    languages: [],
+    cookies: ['__prerender_bypass', '__next_preview_data'],
+  }
+
+  if (headers.vary.length !== 0) {
+    netlifyVaryBuilder.headers.push(...getDirectives(headers.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
+
+    if (logicalPath === `/`) {
+      netlifyVaryBuilder.languages.push(...autoDetectedLocales)
+      netlifyVaryBuilder.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
+  }
+}
+
+export const getAutoDetectedLocales = (config: NextConfigComplete): Array<string> => {
+  if (config.i18n && config.i18n.localeDetection !== false && config.i18n.locales.length > 1) {
+    return config.i18n.locales
+  }
+
+  return []
+}

src/helpers/headers.ts

@@ -2,17 +2,18 @@ import type { NetlifyPluginOptions } from '@netlify/build'
 
 import { modifyNetlifyConfig, modifyNextConfig, revertNextConfig } from './helpers/config.js'
 import { publishStaticAssets } from './helpers/files.js'
-import { createHandlerFunction } from './helpers/functions.js'
+import { createServerHandler, createCacheHandler } from './helpers/functions.js'
 
 type NetlifyPluginOptionsWithFlags = NetlifyPluginOptions & { featureFlags?: Record<string, unknown> }
 
 export const onPreBuild = () => {
+  createCacheHandler()
   modifyNextConfig()
 }
 
 export const onBuild = async ({ constants, netlifyConfig }: NetlifyPluginOptionsWithFlags) => {
   publishStaticAssets(constants.PUBLISH_DIR)
-  await createHandlerFunction(constants.PUBLISH_DIR, netlifyConfig)
+  await createServerHandler(constants.PUBLISH_DIR, netlifyConfig)
   modifyNetlifyConfig(netlifyConfig)
 }
 

src/index.ts

@@ -0,0 +1,22 @@
+module.exports = class CacheHandler {
+  options: any
+  cache: Map<string, any>
+
+  constructor(options: any) {
+    this.options = options
+    this.cache = new Map()
+  }
+
+  // eslint-disable-next-line require-await
+  async get(key: any) {
+    return this.cache.get(key)
+  }
+
+  // eslint-disable-next-line require-await
+  async set(key: any, data: any) {
+    this.cache.set(key, {
+      value: data,
+      lastModified: Date.now(),
+    })
+  }
+}

src/templates/cache-handler.cts

@@ -8,6 +8,6 @@ module.exports = {
   output: 'standalone',
   experimental: {
     ...original.experimental,
-    // incrementalCacheHandlerPath: require.resolve('./cache-handler.js'),
+    incrementalCacheHandlerPath: require.resolve('./.netlify/temp/cache-handler.js'),
   },
 }

src/templates/next.config.cts

@@ -3,26 +3,38 @@ import { createRequire } from 'node:module'
 import { fileURLToPath } from 'node:url'
 
 import type { Handler, HandlerContext, HandlerEvent } from '@netlify/functions'
-import '@vercel/node-bridge/bridge.js'
+import { Bridge } from '@vercel/node-bridge/bridge.js'
+import type { NextConfigComplete } from 'next/dist/server/config-shared.js'
 
+import { handleCacheControl, handleVary } from '../helpers/headers.js'
+
+// use require to stop NFT from trying to trace these dependencies
 const require = createRequire(import.meta.url)
 
-const { Bridge } = require('@vercel/node-bridge/bridge.js')
+/* these dependencies are generated during the build */
+// eslint-disable-next-line import/order
 const { getRequestHandlers } = require('next/dist/server/lib/start-server.js')
+const requiredServerFiles = require('../../.next/required-server-files.json')
 
-const requiredServerFiles = require('./.next/required-server-files.json')
+requiredServerFiles.config.experimental = {
+  ...requiredServerFiles.config.experimental,
+  incrementalCacheHandlerPath: '../dist/templates/cache-handler.cjs',
+}
 
+// read Next config from the build output
 process.env.__NEXT_PRIVATE_STANDALONE_CONFIG = JSON.stringify(requiredServerFiles.config)
+const nextConfig = requiredServerFiles.config as NextConfigComplete
 
-const __dirname = fileURLToPath(new URL('.', import.meta.url))
-
+// run the server in the root directory
+const __dirname = fileURLToPath(new URL('../..', import.meta.url))
 process.chdir(__dirname)
 
-let bridge: typeof Bridge
+// memoize the node bridge instance
+let bridge: Bridge
 
 export const handler: Handler = async function (event: HandlerEvent, context: HandlerContext) {
   if (!bridge) {
-    // initialize Next.js and create the request handler
+    // let Next.js initialize and create the request handler
     const [nextHandler] = await getRequestHandlers({
       port: 3000,
       hostname: 'localhost',
@@ -54,6 +66,9 @@ export const handler: Handler = async function (event: HandlerEvent, context: Ha
   const response = { headers, statusCode: result.statusCode }
   console.log('Next server response:', JSON.stringify(response, null, 2))
 
+  handleCacheControl(headers)
+  handleVary(headers, event, nextConfig)
+
   return {
     ...result,
     headers,