Migrate middleware ssr to edge functions

packages/next/build/webpack/loaders/next-middleware-ssr-loader/render.ts

@@ -106,16 +106,6 @@ export function getRender({
   const requestHandler = server.getRequestHandler()
 
   return async function render(request: NextRequest) {
-    // Preflight request
-    if (request.method === 'HEAD') {
-      // Hint the client that the matched route is a SSR page.
-      return new Response(null, {
-        headers: {
-          'x-middleware-ssr': '1',
-        },
-      })
-    }
-
     const extendedReq = new WebNextRequest(request)
     const extendedRes = new WebNextResponse()
     requestHandler(extendedReq, extendedRes)

packages/next/build/webpack/plugins/middleware-plugin.ts

@@ -26,7 +26,6 @@ interface EdgeFunctionDefinition {
 export interface MiddlewareManifest {
   version: 1
   sortedMiddleware: string[]
-  clientInfo: [location: string, isSSR: boolean][]
   middleware: { [page: string]: EdgeFunctionDefinition }
   functions: { [page: string]: EdgeFunctionDefinition }
 }
@@ -42,7 +41,6 @@ interface EntryMetadata {
 const NAME = 'MiddlewarePlugin'
 const middlewareManifest: MiddlewareManifest = {
   sortedMiddleware: [],
-  clientInfo: [],
   middleware: {},
   functions: {},
   version: 1,
@@ -512,7 +510,7 @@ function getCreateAssets(params: {
         wasm: Array.from(metadata.wasmBindings),
       }
 
-      if (metadata.edgeApiFunction /* || metadata.edgeSSR */) {
+      if (metadata.edgeApiFunction || metadata.edgeSSR) {
         middlewareManifest.functions[page] = edgeFunctionDefinition
       } else {
         middlewareManifest.middleware[page] = edgeFunctionDefinition
@@ -523,13 +521,6 @@ function getCreateAssets(params: {
       Object.keys(middlewareManifest.middleware)
     )
 
-    middlewareManifest.clientInfo = middlewareManifest.sortedMiddleware.map(
-      (key) => [
-        middlewareManifest.middleware[key].regexp,
-        !!metadataByEntry.get(middlewareManifest.middleware[key].name)?.edgeSSR,
-      ]
-    )
-
     assets[MIDDLEWARE_MANIFEST] = new sources.RawSource(
       JSON.stringify(middlewareManifest, null, 2)
     )
@@ -624,7 +615,7 @@ function makeUnsupportedApiError(
   loc: any
 ) {
   const error = new WebpackError(
-    `You're using a Node.js API (${name} at line: ${loc.start.line}) which is not supported in the Edge Runtime that Middleware uses. 
+    `You're using a Node.js API (${name} at line: ${loc.start.line}) which is not supported in the Edge Runtime that Middleware uses.
 Learn more: https://nextjs.org/docs/api-reference/edge-runtime`
   )
   error.name = NAME

packages/next/server/base-server.ts

@@ -82,6 +82,7 @@ export interface RoutingItem {
   page: string
   match: RouteMatch
   ssr?: boolean
+  re?: RegExp
 }
 
 export interface Options {
@@ -199,7 +200,7 @@ export default abstract class Server<ServerOptions extends Options = Options> {
   protected abstract generateImageRoutes(): Route[]
   protected abstract generateStaticRoutes(): Route[]
   protected abstract generateFsStaticRoutes(): Route[]
-  protected abstract generateCatchAllMiddlewareRoute(): Route | undefined
+  protected abstract generateCatchAllMiddlewareRoute(): Route[]
   protected abstract generateRewrites({
     restrictedRedirectPaths,
   }: {
@@ -213,7 +214,7 @@ export default abstract class Server<ServerOptions extends Options = Options> {
   protected abstract findPageComponents(
     pathname: string,
     query?: NextParsedUrlQuery,
-    params?: Params | null
+    params?: Params
   ): Promise<FindComponentsResult | null>
   protected abstract getPagePath(pathname: string, locales?: string[]): string
   protected abstract getFontManifest(): FontManifest | undefined
@@ -237,7 +238,7 @@ export default abstract class Server<ServerOptions extends Options = Options> {
     req: BaseNextRequest,
     res: BaseNextResponse,
     query: ParsedUrlQuery,
-    params: Params | boolean,
+    params: Params | undefined,
     page: string,
     builtPagePath: string
   ): Promise<boolean>
@@ -714,7 +715,7 @@ export default abstract class Server<ServerOptions extends Options = Options> {
     fsRoutes: Route[]
     redirects: Route[]
     catchAllRoute: Route
-    catchAllMiddleware?: Route | undefined
+    catchAllMiddleware: Route[]
     pageChecker: PageChecker
     useFileSystemPublicRoutes: boolean
     dynamicRoutes: DynamicRoutes | undefined
@@ -938,12 +939,12 @@ export default abstract class Server<ServerOptions extends Options = Options> {
     query: ParsedUrlQuery
   ): Promise<boolean> {
     let page = pathname
-    let params: Params | false = false
+    let params: Params | undefined = undefined
     let pageFound = !isDynamicRoute(page) && (await this.hasPage(page))
 
     if (!pageFound && this.dynamicRoutes) {
       for (const dynamicRoute of this.dynamicRoutes) {
-        params = dynamicRoute.match(pathname)
+        params = dynamicRoute.match(pathname) || undefined
         if (dynamicRoute.page.startsWith('/api') && params) {
           page = dynamicRoute.page
           pageFound = true
@@ -1872,7 +1873,7 @@ export default abstract class Server<ServerOptions extends Options = Options> {
     }
 
     if (
-      this.router.catchAllMiddleware &&
+      this.router.catchAllMiddleware[0] &&
       !!ctx.req.headers['x-nextjs-data'] &&
       (!res.statusCode || res.statusCode === 200 || res.statusCode === 404)
     ) {

packages/next/server/dev/next-dev-server.ts

@@ -112,6 +112,7 @@ export default class DevServer extends Server {
    * routing items to be returned in `getMiddleware()`
    */
   private middleware?: RoutingItem[]
+  private edgeFunctions?: RoutingItem[]
 
   protected staticPathsWorker?: { [key: string]: any } & {
     loadStaticPaths: typeof import('./static-paths-worker').loadStaticPaths
@@ -382,18 +383,25 @@ export default class DevServer extends Server {
         }
 
         this.appPathRoutes = appPaths
-        this.middleware = getSortedRoutes(routedMiddleware).map((page) => {
-          const middlewareRegex =
-            page === '/' && middlewareMatcher
-              ? { re: middlewareMatcher, groups: {} }
-              : getMiddlewareRegex(page, {
-                  catchAll: !ssrMiddleware.has(page),
-                })
-          return {
+        this.middleware = []
+        this.edgeFunctions = []
+        getSortedRoutes(routedMiddleware).forEach((page) => {
+          const isRootMiddleware = page === '/' && !!middlewareMatcher
+          const middlewareRegex = isRootMiddleware
+            ? { re: middlewareMatcher!, groups: {} }
+            : getMiddlewareRegex(page, {
+                catchAll: !ssrMiddleware.has(page),
+              })
+          const routeItem = {
             match: getRouteMatcher(middlewareRegex),
             page,
             re: middlewareRegex.re,
-            ssr: ssrMiddleware.has(page),
+            ssr: !isRootMiddleware,
+          }
+
+          this.middleware!.push(routeItem)
+          if (!isRootMiddleware) {
+            this.edgeFunctions!.push(routeItem)
           }
         })
 
@@ -690,6 +698,28 @@ export default class DevServer extends Server {
     }
   }
 
+  async runEdgeFunction(params: {
+    req: BaseNextRequest
+    res: BaseNextResponse
+    query: ParsedUrlQuery
+    params: Params | undefined
+    page: string
+  }) {
+    try {
+      return super.runEdgeFunction(params)
+    } catch (error) {
+      if (error instanceof DecodeError) {
+        throw error
+      }
+      this.logErrorWithOriginalStack(error, 'warning')
+      const err = getProperError(error)
+      const { req, res, page } = params
+      res.statusCode = 500
+      this.renderError(err, req, res, page)
+      return null
+    }
+  }
+
   async run(
     req: NodeNextRequest,
     res: NodeNextResponse,
@@ -859,6 +889,10 @@ export default class DevServer extends Server {
     return this.middleware ?? []
   }
 
+  protected getEdgeFunctions() {
+    return this.edgeFunctions ?? []
+  }
+
   protected getServerComponentManifest() {
     return undefined
   }
@@ -929,7 +963,7 @@ export default class DevServer extends Server {
           .body(
             JSON.stringify(
               this.getMiddleware().map((middleware) => [
-                (middleware as any).re.source,
+                middleware.re!.source,
                 !!middleware.ssr,
               ])
             )