fix: add text/x-component header to .rsc assets generated at build time, don't use rsc-data edge function when hitting .rsc path directly

Author: pieh

packages/runtime/src/helpers/config.ts

@@ -217,6 +217,19 @@ const buildHeader = (buildHeaderParams: BuildHeaderParams) => {
 // configuration does not support.
 const sanitizePath = (path: string) => path.replace(/:[^*/]+\*$/, '*')
 
+/**
+ * Sets Content-type header for static RSC assets (text/x-component), so application/octet-stream is not used when serving them
+ * @param netlifyHeaders - Existing headers that are already configured in the Netlify configuration
+ */
+export const addContentTypeHeaderToStaticRSCAssets = (netlifyHeaders: NetlifyHeaders = []) => {
+  netlifyHeaders.push({
+    for: `*.rsc`,
+    values: {
+      'Content-Type': 'text/x-component',
+    },
+  })
+}
+
 /**
  * Persist Next.js custom headers to the Netlify configuration so the headers work with static files
  * See {@link https://nextjs.org/docs/api-reference/next.config.js/headers} for more information on custom

packages/runtime/src/helpers/edge.ts

@@ -290,14 +290,14 @@ export const generateRscDataEdgeManifest = async ({
   const staticAppdirRoutes: Array<string> = []
   for (const [path, route] of Object.entries(prerenderManifest.routes)) {
     if (isAppDirRoute(route.srcRoute, appPathRoutesManifest) && route.dataRoute) {
-      staticAppdirRoutes.push(path, route.dataRoute)
+      staticAppdirRoutes.push(path)
     }
   }
   const dynamicAppDirRoutes: Array<string> = []
 
   for (const [path, route] of Object.entries(prerenderManifest.dynamicRoutes)) {
     if (isAppDirRoute(path, appPathRoutesManifest) && route.dataRouteRegex) {
-      dynamicAppDirRoutes.push(route.routeRegex, route.dataRouteRegex)
+      dynamicAppDirRoutes.push(route.routeRegex)
     }
   }
 

packages/runtime/src/index.ts

@@ -14,6 +14,7 @@ import {
   updateRequiredServerFiles,
   configureHandlerFunctions,
   generateCustomHeaders,
+  addContentTypeHeaderToStaticRSCAssets,
 } from './helpers/config'
 import { onPreDev } from './helpers/dev'
 import { writeEdgeFunctions, loadMiddlewareManifest, cleanupEdgeFunctions } from './helpers/edge'
@@ -250,6 +251,7 @@ const plugin: NetlifyPlugin = {
 
     const { basePath, appDir, experimental } = nextConfig
 
+    addContentTypeHeaderToStaticRSCAssets(headers)
     generateCustomHeaders(nextConfig, headers)
 
     warnForProblematicUserRewrites({ basePath, redirects })

packages/runtime/src/templates/edge-shared/rsc-data.ts

@@ -28,10 +28,9 @@ export declare type PrerenderManifest = {
 
 const noop = () => {}
 
-// Ensure that routes with and without a trailing slash map to different ODB paths
 const rscifyPath = (route: string) => {
   if (route.endsWith('/')) {
-    return route.slice(0, -1) + '.rsc/'
+    return route.slice(0, -1) + '.rsc'
   }
   return route + '.rsc'
 }

test/helpers/edge.spec.ts

@@ -46,12 +46,6 @@ describe('generateRscDataEdgeManifest', () => {
         name: 'RSC data routing',
         path: '/',
       },
-      {
-        function: 'rsc-data',
-        generator: '@netlify/next-runtime@1.0.0',
-        name: 'RSC data routing',
-        path: '/index.rsc',
-      },
     ])
   })
 
@@ -99,12 +93,6 @@ describe('generateRscDataEdgeManifest', () => {
         name: 'RSC data routing',
         pattern: '^/blog/([^/]+?)(?:/)?$',
       },
-      {
-        function: 'rsc-data',
-        generator: '@netlify/next-runtime@1.0.0',
-        name: 'RSC data routing',
-        pattern: '^/blog/([^/]+?)\\.rsc$',
-      },
     ])
   })
 

test/index.spec.ts

@@ -899,6 +899,12 @@ describe('onPostBuild', () => {
     })
 
     expect(netlifyConfig.headers).toEqual([
+      {
+        for: `*.rsc`,
+        values: {
+          'Content-Type': 'text/x-component',
+        },
+      },
       {
         for: '/',
         values: {
@@ -1001,6 +1007,12 @@ describe('onPostBuild', () => {
           'x-existing-header-in-configuration': 'existing header in configuration value',
         },
       },
+      {
+        for: `*.rsc`,
+        values: {
+          'Content-Type': 'text/x-component',
+        },
+      },
       {
         for: '/',
         values: {
@@ -1108,6 +1120,12 @@ describe('onPostBuild', () => {
           'x-existing-header-in-configuration': 'existing header in configuration value',
         },
       },
+      {
+        for: `*.rsc`,
+        values: {
+          'Content-Type': 'text/x-component',
+        },
+      },
     ])
   })