fix: handle prefetch correctly

Author: ascorbic

packages/runtime/src/templates/getHandler.ts

@@ -17,7 +17,13 @@ const { URLSearchParams, URL } = require('url')
 
 const { Bridge } = require('@vercel/node-bridge/bridge')
 
-const { augmentFsModule, getMaxAge, getMultiValueHeaders, getNextServer } = require('./handlerUtils')
+const {
+  augmentFsModule,
+  getMaxAge,
+  getMultiValueHeaders,
+  getPrefetchResponse,
+  getNextServer,
+} = require('./handlerUtils')
 /* eslint-enable @typescript-eslint/no-var-requires */
 
 type Mutable<T> = {
@@ -90,6 +96,10 @@ const makeHandler = (conf: NextConfig, app, pageRoot, staticManifest: Array<[str
 
   return async function handler(event: HandlerEvent, context: HandlerContext) {
     let requestMode = mode
+    const prefetchResponse = getPrefetchResponse(event, mode)
+    if (prefetchResponse) {
+      return prefetchResponse
+    }
     // Ensure that paths are encoded - but don't double-encode them
     event.path = new URL(event.rawUrl).pathname
     // Next expects to be able to parse the query from the URL
@@ -164,7 +174,7 @@ export const getHandler = ({ isODB = false, publishDir = '../../../.next', appDi
   const { promises } = require("fs");
   // We copy the file here rather than requiring from the node module
   const { Bridge } = require("./bridge");
-  const { augmentFsModule, getMaxAge, getMultiValueHeaders, getNextServer } = require('./handlerUtils')
+  const { augmentFsModule, getMaxAge, getMultiValueHeaders, getPrefetchResponse, getNextServer } = require('./handlerUtils')
 
   ${isODB ? `const { builder } = require("@netlify/functions")` : ''}
   const { config }  = require("${publishDir}/required-server-files.json")

packages/runtime/src/templates/handlerUtils.ts

@@ -4,6 +4,7 @@ import path from 'path'
 import { pipeline } from 'stream'
 import { promisify } from 'util'
 
+import { HandlerEvent, HandlerResponse } from '@netlify/functions'
 import { http, https } from 'follow-redirects'
 import type NextNodeServer from 'next/dist/server/next-server'
 
@@ -105,8 +106,8 @@ export const augmentFsModule = ({
   const statsOrig = promises.stat
   // ...then money-patch it to see if it's requesting a CDN file
   promises.readFile = (async (file, options) => {
-    // In production use the public URL (e.g. https://example.com). Otherwise use the deploy URL, e.g. https://deploy-preview-123--example.netlify.app
-    const baseUrl = process.env.CONTEXT === 'production' ? process.env.URL : process.env.DEPLOY_PRIME_URL
+    // In production or dev use the public URL (e.g. https://example.com). Otherwise use the deploy URL, e.g. https://deploy-preview-123--example.netlify.app
+    const baseUrl = ['production', 'dev'].includes(process.env.CONTEXT) ? process.env.URL : process.env.DEPLOY_PRIME_URL
 
     // We only care about page files
     if (file.startsWith(pageRoot)) {
@@ -188,3 +189,19 @@ export const getNextServer = (): NextServerType => {
   }
   return NextServer
 }
+/**
+ * Prefetch requests are used to check for middleware redirects, and shouldn't trigger SSR.
+ */
+export const getPrefetchResponse = (event: HandlerEvent, mode: string): HandlerResponse | false => {
+  if (event.headers['x-middleware-prefetch'] && mode === 'ssr') {
+    return {
+      statusCode: 200,
+      body: '{}',
+      headers: {
+        'Content-Type': 'application/json',
+        'x-middleware-skip': '1',
+      },
+    }
+  }
+  return false
+}