Fix for SSR2 fixture not working locally (#24237)

* SS2 fixture not working locally fix * Fix prettier issue * prettier excess line fix * Update render.js * Update README.md Co-authored-by: dan <[email protected]>
facebook · Apr 14, 2022 · 51173d9 · 51173d9
1 parent c325da0
commit 51173d9
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 3 deletions.
diff --git a/fixtures/ssr2/README.md b/fixtures/ssr2/README.md
@@ -0,0 +1,30 @@
+# SSR Fixtures
+
+A set of test cases for quickly identifying issues with server-side rendering.
+
+## Setup
+
+To reference a local build of React, first run `npm run build` at the root
+of the React project. Then:
+
+```
+cd fixtures/ssr2
+yarn
+yarn start
+```
+
+The `start` command runs a webpack dev server and a server-side rendering server in development mode with hot reloading.
+
+**Note: whenever you make changes to React and rebuild it, you need to re-run `yarn` in this folder:**
+
+```
+yarn
+```
+
+If you want to try the production mode instead run:
+
+```
+yarn start:prod
+```
+
+This will pre-build all static resources and then start a server-side rendering HTTP server that hosts the React app and service the static resources (without hot reloading).
diff --git a/fixtures/ssr2/scripts/build.js b/fixtures/ssr2/scripts/build.js
@@ -40,7 +40,6 @@ webpack(
         console.error(err.details);
       }
       process.exit(1);
-      return;
     }
     const info = stats.toJson();
     if (stats.hasErrors()) {

diff --git a/fixtures/ssr2/server/render.js b/fixtures/ssr2/server/render.js
@@ -20,6 +20,7 @@ let assets = {
 };
 
 module.exports = function render(url, res) {
+  const data = createServerData();
   // This is how you would wire it up previously:
   //
   // res.send(
@@ -36,14 +37,17 @@ module.exports = function render(url, res) {
     console.error('Fatal', error);
   });
   let didError = false;
-  const data = createServerData();
   const {pipe, abort} = renderToPipeableStream(
     <DataProvider data={data}>
       <App assets={assets} />
     </DataProvider>,
     {
       bootstrapScripts: [assets['main.js']],
-      onCompleteShell() {
+      onAllReady() {
+        // Full completion.
+        // You can use this for SSG or crawlers.
+      },
+      onShellReady() {
         // If something errored before we started streaming, we set the error code appropriately.
         res.statusCode = didError ? 500 : 200;
         res.setHeader('Content-type', 'text/html');