React-snapshot 使用 create-react-app 和 serve 在所有路由上预渲染 index.html

Question

I am using create-react-app and react-snapshot for pre-rendering. Serving the build using serve

serve -s build -l 80

But strangely for all the routes, only index.js is pre-rendered.

Below is the react-snapshot configuration in package.json

"reactSnapshot": {
    "exclude": [
      "/districts-data",
      "/districts-data?*",
      "/suggest-time",
      "/covid-19-statistics"
    ],
    "snapshotDelay": 300
  }

I have excluded all the paths that include lazy loading. I have gone through this answer but I am not catching anything in my service worker just kept it for PWA.

sw.js

self.addEventListener('fetch', function (event) {

});

self.addEventListener('install', function (event) {

});

self.addEventListener('activate', (event) => { });

Answer 1

After investing a couple of days and deep-diving in the serve code I realize the mistake I was doing is having -s option while running serve script.

serve -s build -l 80

Having -s option default all routes served from index.html.Having -s flag is essential if you are just serving build generated via Create react app else routes other than "/" will return a response 400.

You can simply use serve build if you have all the routes pre-rendered but if there are some routes for which you don't have pre-rendered HTML available (For my use case it was components using Lazy load) then you can create serve.json in public folder with specifying source and destination.

 {
  "rewrites": [
    { "source": "/districts-data", "destination": "/200.html" },
    { "source": "/districts-data?*", "destination": "/200.html" },
    { "source": "/suggest-time", "destination": "/200.html" },
    { "source": "/covid-19-statistics", "destination": "/200.html" }
  ]
}

You also need to change your serve command to serve -c serve.json build . -c is used to tell Specify custom path to serve.json .