fix: preview mode for odb/fallback pages (#564)

* fix: preview mode for odb/fallback pages

* chore: add new preview redirect to standard function for fallback srcRoutes

* chore: fix basePath redirects for fallback preview mode lol pain

* chore: fix incorrect pathing to new preview function

* chore: add additional test

* fix: revalidate pages with fallback werent getting new preview redirects

Co-authored-by: Matt Kane <[email protected]>

Author: lindsaylevine

src/lib/config.js

@@ -38,6 +38,8 @@ const CUSTOM_HEADERS_PATH = join('.', '_headers')
 // creating the next/image redirect
 const NEXT_IMAGE_FUNCTION_NAME = 'next_image'
 
+const PREVIEW_MODE_COOKIES = ['Cookie=__prerender_bypass,__next_preview_data']
+
 const SRC_FILES = [PUBLIC_PATH, NEXT_CONFIG_PATH, CUSTOM_REDIRECTS_PATH, CUSTOM_HEADERS_PATH, ...NEXT_SRC_DIRS]
 
 module.exports = {
@@ -52,4 +54,5 @@ module.exports = {
   CUSTOM_HEADERS_PATH,
   NEXT_IMAGE_FUNCTION_NAME,
   SRC_FILES,
+  PREVIEW_MODE_COOKIES,
 }

src/lib/helpers/convertToBasePathRedirects.js

@@ -34,6 +34,13 @@ const convertToBasePathRedirects = ({ basePath, nextRedirects }) => {
         },
       ]
       basePathRedirects.push(...indexRedirects)
+    } else if (r.specialPreviewMode) {
+      basePathRedirects.push({
+        route: `${basePath}${r.route}`,
+        target: r.target,
+        force: true,
+        conditions: r.conditions,
+      })
     } else if (!r.route.includes('_next/') && r.target.includes('/.netlify/functions') && r.conditions) {
       // If this is a preview mode redirect, we need different behavior than other function targets below
       // because the conditions prevent us from doing a route -> basePath/route force

src/lib/helpers/getPreviewModeFunctionName.js

@@ -0,0 +1,5 @@
+// Some pages (getStaticProps/withFallback) require a separate standard function for preview mode; this provides the name for that function, to be called in several places
+
+const getPreviewModeFunctionName = (functionName) => `preview-${functionName}`
+
+module.exports = getPreviewModeFunctionName

src/lib/helpers/isRouteWithFallback.js

@@ -1,6 +1,8 @@
 const getPrerenderManifest = require('./getPrerenderManifest')
 
 const isRouteWithFallback = async (route) => {
+  if (!route) return false
+
   const { dynamicRoutes } = await getPrerenderManifest()
 
   // Fallback "blocking" routes will have fallback: null in manifest

src/lib/helpers/setupNetlifyFunctionForPage.js

@@ -8,12 +8,14 @@ const getTemplate = require('../templates/getTemplate')
 const copyDynamicImportChunks = require('./copyDynamicImportChunks')
 const getNetlifyFunctionName = require('./getNetlifyFunctionName')
 const getNextDistDir = require('./getNextDistDir')
+const getPreviewModeFunctionName = require('./getPreviewModeFunctionName')
 const { logItem } = require('./logger')
 
 // Create a Netlify Function for the page with the given file path
-const setupNetlifyFunctionForPage = async ({ filePath, functionsPath, isApiPage, isISR }) => {
+const setupNetlifyFunctionForPage = async ({ filePath, functionsPath, isApiPage, isODB, forFallbackPreviewMode }) => {
   // Set function name based on file path
-  const functionName = getNetlifyFunctionName(filePath, isApiPage)
+  const defaultFunctionName = getNetlifyFunctionName(filePath, isApiPage)
+  const functionName = forFallbackPreviewMode ? getPreviewModeFunctionName(defaultFunctionName) : defaultFunctionName
   const functionDirectory = join(functionsPath, functionName)
 
   await ensureDir(functionDirectory)
@@ -24,7 +26,7 @@ const setupNetlifyFunctionForPage = async ({ filePath, functionsPath, isApiPage,
 
   // Write entry point to function directory
   const entryPointPath = join(functionDirectory, `${functionName}.js`)
-  await writeFile(entryPointPath, getTemplate({ filePath, isISR }))
+  await writeFile(entryPointPath, getTemplate({ filePath, isODB }))
 
   // Copy function helper
   await copy(join(TEMPLATES_DIR, 'getHandlerFunction.js'), join(functionDirectory, 'getHandlerFunction.js'))

src/lib/pages/getStaticProps/pages.js

@@ -1,4 +1,6 @@
+const asyncForEach = require('../../helpers/asyncForEach')
 const getPrerenderManifest = require('../../helpers/getPrerenderManifest')
+const isRouteWithFallback = require('../../helpers/isRouteWithFallback')
 
 // Get pages using getStaticProps
 const getPages = async () => {
@@ -7,9 +9,10 @@ const getPages = async () => {
   // Collect pages
   const pages = []
 
-  Object.entries(routes).forEach(([route, { dataRoute, initialRevalidateSeconds, srcRoute }]) => {
-    // Ignore pages with revalidate, these will need to be SSRed
-    if (initialRevalidateSeconds) return
+  await asyncForEach(Object.entries(routes), async ([route, { dataRoute, initialRevalidateSeconds, srcRoute }]) => {
+    // Ignore pages with revalidate (but no fallback), these will need to be SSRed
+    const isFallbackRoute = await isRouteWithFallback(srcRoute)
+    if (initialRevalidateSeconds && !isFallbackRoute) return
 
     pages.push({
       route,

src/lib/pages/getStaticProps/redirects.js

@@ -6,6 +6,8 @@ const addDefaultLocaleRedirect = require('../../helpers/addDefaultLocaleRedirect
 const asyncForEach = require('../../helpers/asyncForEach')
 const getFilePathForRoute = require('../../helpers/getFilePathForRoute')
 const getNetlifyFunctionName = require('../../helpers/getNetlifyFunctionName')
+const getPreviewModeFunctionName = require('../../helpers/getPreviewModeFunctionName')
+const isRouteWithFallback = require('../../helpers/isRouteWithFallback')
 
 const getPages = require('./pages')
 
@@ -35,11 +37,15 @@ const getRedirects = async () => {
     const relativePath = getFilePathForRoute(srcRoute || route, 'js')
     const filePath = slash(join('pages', relativePath))
     const functionName = getNetlifyFunctionName(filePath)
+    const isODB = await isRouteWithFallback(srcRoute)
 
     // Preview mode conditions
     const conditions = ['Cookie=__prerender_bypass,__next_preview_data']
+    // ODB pages' preview mode needs a special flagged standard function because
+    // their default function (an ODB) is not functional for preview mode
     const target = `/.netlify/functions/${functionName}`
-    const previewModeRedirect = { conditions, force: true, target }
+    const previewModeTarget = isODB ? `/.netlify/functions/${getPreviewModeFunctionName(functionName)}` : target
+    const previewModeRedirect = { conditions, force: true, target: previewModeTarget }
 
     // Add a preview mode redirect for the standard route
     redirects.push({
@@ -54,7 +60,7 @@ const getRedirects = async () => {
     })
 
     // Preview mode default locale redirect must precede normal default locale redirect
-    await addDefaultLocaleRedirect(redirects, route, target, previewModeRedirect)
+    await addDefaultLocaleRedirect(redirects, route, target, { conditions, force: true })
     await addDefaultLocaleRedirect(redirects, route)
   })
 

src/lib/pages/getStaticPropsWithFallback/redirects.js

@@ -2,10 +2,12 @@ const { join } = require('path')
 
 const slash = require('slash')
 
+const { PREVIEW_MODE_COOKIES } = require('../../config')
 const addLocaleRedirects = require('../../helpers/addLocaleRedirects')
 const asyncForEach = require('../../helpers/asyncForEach')
 const getFilePathForRoute = require('../../helpers/getFilePathForRoute')
 const getNetlifyFunctionName = require('../../helpers/getNetlifyFunctionName')
+const getPreviewModeFunctionName = require('../../helpers/getPreviewModeFunctionName')
 
 const getPages = require('./pages')
 
@@ -18,10 +20,20 @@ const getRedirects = async () => {
     const filePath = slash(join('pages', relativePath))
     const functionName = getNetlifyFunctionName(filePath)
     const target = `/.netlify/functions/${functionName}`
+    const previewModeTarget = `/.netlify/functions/${getPreviewModeFunctionName(functionName)}`
 
     await addLocaleRedirects(redirects, route, target)
 
-    // Add one redirect for the page
+    // Add a redirect for preview mode pointing to the standard function
+    redirects.push({
+      route,
+      target: previewModeTarget,
+      conditions: PREVIEW_MODE_COOKIES,
+      force: true,
+      specialPreviewMode: true,
+    })
+
+    // Add one redirect pointing to the ODB
     redirects.push({
       route,
       target,

src/lib/pages/getStaticPropsWithFallback/setup.js

@@ -14,11 +14,16 @@ const setup = async (functionsPath) => {
   const pages = await getPages()
 
   // Create Netlify Function for every page
-  return pages.map(({ route }) => {
+  return pages.reduce((jobs, { route }) => {
     const relativePath = getFilePathForRoute(route, 'js')
     const filePath = slash(join('pages', relativePath))
-    return { type: 'function', filePath, functionsPath, isISR: true }
-  })
+    // Need two different functions - one ODB for normal pages, one standard for preview mode
+    return [
+      ...jobs,
+      { type: 'function', filePath, functionsPath, isODB: true },
+      { type: 'function', filePath, functionsPath, forFallbackPreviewMode: true },
+    ]
+  }, [])
 }
 
 module.exports = setup

src/lib/templates/getTemplate.js

@@ -1,5 +1,5 @@
-const getTemplate = ({ filePath, isISR }) => {
-  if (isISR) {
+const getTemplate = ({ filePath, isODB }) => {
+  if (isODB) {
     return `// Auto-generated file. DO NOT MODIFY.
 const { getHandlerFunction } = require('./getHandlerFunction')
 const { builder } = require('@netlify/functions')