redwoodjs · jtoar · Mar 27, 2023 · Mar 5, 2023 · Mar 5, 2023 · Mar 5, 2023
diff --git a/packages/core/config/webpack.common.js b/packages/core/config/webpack.common.js
@@ -233,11 +233,6 @@ module.exports = (webpackEnv) => {
       !isEnvProduction && new webpack.HotModuleReplacementPlugin(),
       new HtmlWebpackPlugin({
         template: path.resolve(redwoodPaths.base, 'web/src/index.html'),
-        templateParameters: {
-          prerenderPlaceholder: isEnvProduction
-            ? '<server-markup></server-markup>'
-            : '<!-- Prerender placeholder -->',
-        },
         scriptLoading: 'defer',
         inject: true,
         chunks: 'all',

diff --git a/packages/create-redwood-app/template/web/src/index.html b/packages/create-redwood-app/template/web/src/index.html
@@ -8,10 +8,8 @@
 </head>
 
 <body>
-  <div id="redwood-app">
-    <!-- Please keep the line below for prerender support. -->
-    <%= prerenderPlaceholder %>
-  </div>
+  <!-- Please keep this div empty -->
+  <div id="redwood-app"></div>
 </body>
 
 </html>
diff --git a/...internal/src/build/babelPlugins/__tests__/babel-plugin-redwood-routes-auto-loader.test.ts b/...internal/src/build/babelPlugins/__tests__/babel-plugin-redwood-routes-auto-loader.test.ts
@@ -32,10 +32,11 @@ describe('page auto loader correctly imports pages', () => {
     delete process.env.RWJS_CWD
   })
 
-  test('Pages are automatically imported', () => {
+  test('Pages get both a loader and a prerenderLoader', () => {
     expect(result?.code).toContain(`const HomePage = {
   name: "HomePage",
-  loader: () => import("`)
+  loader: () => import( /* webpackChunkName: "HomePage" */"./pages/HomePage/HomePage"),
+  prerenderLoader: () => __webpack_require__(require.resolveWeak("./pages/HomePage/HomePage"))`)
   })
 
   test('Already imported pages are left alone.', () => {

diff --git a/packages/internal/src/build/babelPlugins/babel-plugin-redwood-routes-auto-loader.ts b/packages/internal/src/build/babelPlugins/babel-plugin-redwood-routes-auto-loader.ts
@@ -62,9 +62,16 @@ export default function (
         )[0]
 
         // Remove Page imports in prerender mode (see babel-preset)
-        // This is to make sure that all the imported "Page modules" are normal imports
-        // and not asynchronous ones.
-        // But note that jest in a user's project does not enter this block, but our tests do
+        // The removed imports will be replaced further down in this file
+        // with declarations like these:
+        // const HomePage = {
+        //   name: "HomePage",
+        //   loader: () => import("./pages/HomePage/HomePage")
+        //   prerenderLoader: () => require("./pages/HomePage/HomePage")
+        // };
+        // This is to make sure that all the imported "Page modules" are normal
+        // imports and not asynchronous ones.
+        // Note that jest in a user's project does not enter this block, but our tests do
         if (useStaticImports) {
           // Match import paths, const name could be different
 
@@ -108,7 +115,23 @@ export default function (
           const nodes = []
           // Prepend all imports to the top of the file
           for (const { importName, relativeImport } of pages) {
-            // + const <importName> = { name: <importName>, loader: () => import(<relativeImportPath>) }
+            // + const <importName> = {
+            //     name: <importName>,
+            //     loader: () => import(/* webpackChunkName: "<importName>" */ <relativeImportPath>)
+            //     // prerender
+            //     prerenderLoader: () => require(<relativeImportPath>)
+            //     // crs
+            //     prerenderLoader: () => __webpack_require__(require.resolveWeak(<relativeImportPath>))
+            //   }
+
+            const importArgument = t.stringLiteral(relativeImport)
+
+            importArgument.leadingComments = [
+              {
+                type: 'CommentBlock',
+                value: ` webpackChunkName: "${importName}" `,
+              },
+            ]
 
             nodes.push(
               t.variableDeclaration('const', [
@@ -119,18 +142,39 @@ export default function (
                       t.identifier('name'),
                       t.stringLiteral(importName)
                     ),
+                    // loader for dynamic imports (browser)
                     t.objectProperty(
                       t.identifier('loader'),
                       t.arrowFunctionExpression(
                         [],
-                        t.callExpression(
-                          // If useStaticImports, do a synchronous import with require (ssr/prerender)
-                          // otherwise do a dynamic import (browser)
-                          useStaticImports
-                            ? t.identifier('require')
-                            : t.identifier('import'),
-                          [t.stringLiteral(relativeImport)]
-                        )
+                        t.callExpression(t.identifier('import'), [
+                          importArgument,
+                        ])
+                      )
+                    ),
+                    // prerenderLoader for ssr/prerender and first load of
+                    // prerendered pages in browser (csr)
+                    t.objectProperty(
+                      t.identifier('prerenderLoader'),
+                      t.arrowFunctionExpression(
+                        [],
+                        useStaticImports
+                          ? t.callExpression(t.identifier('require'), [
+                              t.stringLiteral(relativeImport),
+                            ])
+                          : t.callExpression(
+                              t.identifier(
+                                // Use __webpack_require__ otherwise all pages will
+                                // be bundled
+                                '__webpack_require__'
+                              ),
+                              [
+                                t.callExpression(
+                                  t.identifier('require.resolveWeak'),
+                                  [t.stringLiteral(relativeImport)]
+                                ),
+                              ]
+                            )
                       )
                     ),
                   ])

diff --git a/packages/prerender/src/detection/index.ts b/packages/prerender/src/detection/index.ts
@@ -19,6 +19,7 @@ export const detectPrerenderRoutes = () => {
       id: route.id,
       isNotFound: route.isNotFound,
       filePath: route.page?.filePath,
+      pageIdentifier: route.page_identifier_str,
     }))
 
   return prerenderRoutes

diff --git a/packages/prerender/src/runPrerender.tsx b/packages/prerender/src/runPrerender.tsx
@@ -3,16 +3,18 @@ import path from 'path'
 
 import React from 'react'
 
-import { load as loadHtml } from 'cheerio'
+import { CheerioAPI, load as loadHtml } from 'cheerio'
 import ReactDOMServer from 'react-dom/server'
 
 import { registerApiSideBabelHook } from '@redwoodjs/internal/dist/build/babel/api'
 import { registerWebSideBabelHook } from '@redwoodjs/internal/dist/build/babel/web'
 import { getPaths } from '@redwoodjs/internal/dist/paths'
 import { LocationProvider } from '@redwoodjs/router'
+import { matchPath } from '@redwoodjs/router/dist/util'
 import type { QueryInfo } from '@redwoodjs/web'
 
 import mediaImportsPlugin from './babelPlugins/babel-plugin-redwood-prerender-media-imports'
+import { detectPrerenderRoutes } from './detection'
 import {
   GqlHandlerImportError,
   JSONParseError,
@@ -131,6 +133,34 @@ async function recursivelyRender(
   }
 }
 
+function insertChunkLoadingScript(
+  indexHtmlTree: CheerioAPI,
+  renderPath: string
+) {
+  const prerenderRoutes = detectPrerenderRoutes()
+
+  const route = prerenderRoutes.find((route: any) => {
+    return matchPath(route.routePath, renderPath).match
+  })
+
+  if (!route) {
+    throw new Error('Could not find a Route matching ' + renderPath)
+  }
+
+  const buildManifest = JSON.parse(
+    fs.readFileSync(
+      path.join(getPaths().web.dist, 'build-manifest.json'),
+      'utf-8'
+    )
+  )
+
+  const chunkPath = buildManifest[`${route?.pageIdentifier}.js`]
+
+  indexHtmlTree('head').prepend(
+    `<script defer="defer" src="${chunkPath}"></script>`
+  )
+}
+
 interface PrerenderParams {
   queryCache: Record<string, QueryInfo>
   renderPath: string // The path (url) to render e.g. /about, /dashboard/me, /blog-post/3
@@ -229,8 +259,9 @@ export const runPrerender = async ({
     }
   }
 
-  // This is set by webpack by the html plugin
-  indexHtmlTree('server-markup').replaceWith(componentAsHtml)
+  insertChunkLoadingScript(indexHtmlTree, renderPath)
+
+  indexHtmlTree('#redwood-app').append(componentAsHtml)
 
   const renderOutput = indexHtmlTree.html()