使用 React-Snapshot 预渲染静态文件创建 React 应用程序

IT技术 reactjs service-worker create-react-app prerender
2021-05-11 06:12:24

我正在使用带有react-snapshot 的create react app来为我的路线预渲染静态标记。即分别"/", "/signIn", "/signUp"生成index.html, signIn.html, signUp.html。

我面临的问题是，无论我走哪条路线，最初都会index.html提供从根路由的 react-snapshot 生成的静态数据 "/"，然后提供正确的静态路由文件，然后提供main.js包（参见 gif）。如果我只是从捆绑中main.js单独提供我的应用程序，这会很好。但由于我想使用静态预生成的 html 文件，我如何禁用服务工作者在某些我已经拥有静态 html 文件的路由上提供 index.html 服务。

更新：如果我从 create react 应用程序中删除 service worker，该应用程序会加载路径的静态文件。但是，我想为 PWA 功能保留 Service Worker 的功能。

更新 2： 在chrome browser根路由的快速闪烁中，每条路由只发生一次静态标记。第一次闪烁后，似乎 chrome 浏览器缓存修复了它，另外，如果我从 chrome 开发工具禁用缓存并尝试转到新路由，根路由的闪烁会返回。对Firefox browser这个问题的存在，无论怎样，每个路由变化或刷新的根本途径静态标记出现瞬间轻弹。

如何避免在不删除服务工作者的情况下在服务工作者的所有路由上最初呈现 index.html。

更详细地：

当 Service Worker 处于活动状态时，以下代码会在所有路由的页面源的正文中呈现：

 <body>
 <script>window.react_snapshot_state = {};</script>
 <noscript>You need to enable JavaScript to run this app.</noscript>
 <div id="root" data-react-checksum="-928641672"><div data-reactroot="" class="sc-cSHVUG hyLStb"><div class="sc-fjdhpX dIRAsX"><ul class="sc-gqjmRU koKaUp"><li><a class="navItemActive sc-VigVT cZrGwO" href="/"><!-- react-text: 6 --> <!-- /react-text --><!-- react-text: 7 -->Home<!-- /react-text --></a></li><li><a class="sc-VigVT cZrGwO" href="/aboutUs/"> About US</a></li><li><a class="sc-VigVT cZrGwO" href="/faq/"> FAQ</a></li></ul><div class="sc-jzJRlG cLytIk"><button class="ui basic circular compact icon button sc-jTzLTM jfwzMH"><i aria-hidden="true" class="user circle icon"></i></button><button class="ui basic circular compact icon button sc-jTzLTM jfwzMH"><i aria-hidden="true" class="add user icon"></i></button></div></div><!-- react-empty: 17 --><div><div style="opacity: 1;"><div class="sc-bdVaJa eRTdVS">Home</div></div></div></div></div><script type="text/javascript" src="/static/js/main.04df5475.js"></script></body>

如果我删除 Service Worker，则该"/signIn"路由会在页面源的正文中呈现以下内容：

<body>
 <script>window.react_snapshot_state = {};</script>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root" data-react-checksum="143569200"><div data-reactroot="" class="sc-cSHVUG hyLStb"><div class="sc-fjdhpX dIRAsX"><ul class="sc-gqjmRU koKaUp"><li><a class="sc-VigVT cZrGwO" href="/"><!-- react-text: 6 --> <!-- /react-text --><!-- react-text: 7 -->Home<!-- /react-text --></a></li><li><a class="sc-VigVT cZrGwO" href="/aboutUs/"> About US</a></li><li><a class="sc-VigVT cZrGwO" href="/faq/"> FAQ</a></li></ul><div class="sc-jzJRlG cLytIk"><button class="ui basic circular compact icon button sc-jTzLTM jfwzMH"><i aria-hidden="true" class="user circle icon"></i></button><button class="ui basic circular compact icon button sc-jTzLTM jfwzMH"><i aria-hidden="true" class="add user icon"></i></button></div></div><!-- react-empty: 17 --><div><div style="opacity: 1;"><div><div class="sc-EHOje bssfxk"><div class="sc-EHOje bssfxk"><form class="ui large warning form sc-ifAKCX ljuaXJ"><div class="field"><label></label><input type="email" placeholder="email" name="email" value=""></div><p class="sc-bxivhb dXOlfT">error</p></form><form class="ui large warning form sc-ifAKCX ljuaXJ"><div class="field"><label></label><input type="password" placeholder="password" name="password" value=""></div><p class="sc-bxivhb dXOlfT">error</p></form></div><p class="sc-dnqmqq ccTWaR"></p><div><div class="sc-gzVnrw cCgvhR"><button class="ui basic button sc-iwsKbI Vfjvd"><!-- react-text: 37 -->Login<!-- /react-text --><!-- react-text: 38 --> <!-- /react-text --></button><div class="sc-gzVnrw cCgvhR"><!-- react-empty: 40 --><div class="ui horizontal divider" style="width: 220px;">Or</div><div class="sc-bZQynM kECAnI"><button class="ui google plus button" style="text-transform: capitalize;"><i aria-hidden="true" class="google icon"></i><!-- react-text: 45 --> Google<!-- /react-text --></button><button class="ui facebook button" style="text-transform: capitalize;"><i aria-hidden="true" class="facebook icon"></i><!-- react-text: 48 --> Facebook<!-- /react-text --></button></div></div></div><div><p class="sc-htoDjs dErAlA">forgot your password ?</p></div></div></div></div></div></div></div></div><script type="text/javascript" src="/static/js/main.04df5475.js"></script><iframe style="display: none;"></iframe>

GiF 显示我正在尝试访问"/signIn"Route，并注意到在路由的实际表单呈现之前出现了一段时间home（"/"路由的静态标记）"/signIn"。

在此处输入图片说明

2个回答

问题是，Service Worker(SW)在默认情况下Create React App只缓存的内容static folder和index.html。我.html从 react-snapshot预渲染的文件从未被SW. 在SW中create react app也设置为服务index.html于所有未知的URL，因此它是服务于根路径"/"静态文件index.html.我通过覆盖解决了这个service-worker.js通过修改构建命令文件package.json，如下所示：

"build": "react-scripts build && react-snapshot && sw-precache --config=sw-precache-config.js"

我sw-precache-config.js看起来像下面这样：

module.exports = {
  staticFileGlobs: [
    './build/**/**.html',
    './build/images/**.*',
    './build/static/**',
  ],
  dontCacheBustUrlsMatching: /\.\w{8}\./,
  swFilePath: './build/service-worker.js',
      // For unknown URLs, fallback to the index page
  navigateFallback: './200.html',
      // Ignores URLs starting from /__ (useful for Firebase):
      // https://github.com/facebookincubator/create-react-app/issues/2237#issuecomment-302693219
  navigateFallbackWhitelist: [/^(?!\/__).*/],
      // Don't precache sourcemaps (they're large) and build asset manifest:
  staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
  stripPrefix: './build'
}

如果您有从 react-snapshot 生成的所有标记的列表，您可以手动为它们设置重写规则，然后为其余的添加回退规则。

例如

"rewrites": [
  {
    "source": "/signup",
    "destination": "/signup.html"
  },
  {
    "source": "/orders",
    "destination": "/orders.html"
  },
  {
    "source": "**",
    "destination": "/index.html"
  }
]
其它你可能感兴趣的问题
上一篇Creality 3D Ender-4，“挤出机套件”不适合框架 下一篇使用 webpack 配置 CSS module时出错