通过使用关键路由的“快照”(静态渲染)来加速大型React项目的最佳方法

Question

我们有一个庞大而复杂的传统React应用程序，这是我们在过去几年里一直在开发的。它像往常一样加载index.html、注入javascript并从API获取数据。不幸的是，冷加载时间相当糟糕(平均5-7秒)。一旦加载了所有内容，它就会像往常一样快速加载，但在特定的“关键”页面中，冷加载时间会杀死我们。这些是我们的公共用户页面，格式为：https://mywebsite/userId

我们正在寻找一种方法，通过超越代码拆分或资源优化的方法，显著加快这些路由的加载时间。我们已经这样做了，并且正在通过CDN为我们的应用程序提供服务。

我们已经看到了如何创建这些用户页面的静态“快照”，我们需要使用诸如react-static之类的东西快速加载这些快照，并将其作为静态版本提供，并在以后对其进行水合。使用像next.js或gatsby这样的东西重写我们的项目不是一个选择，因为它需要太多的工作。SSR也不是一个选项，因为我们的整个后端都是用Django而不是Node.js编写的

我们在正确的轨道上吗？是否有可能/是否值得使用react-static (或类似的工具)来实现此目的？有很多关于如何从头开始创建react-static项目的文档，但没有关于如何转换现有项目的文档，即使它只是我们需要的一小部分路由。

此外，一旦我们的用户页面上的数据发生更改，我们如何触发适当快照的“重建”？用户并不经常更新他们的数据，大约每月更新3到4次，但我们有3K用户，所以平均每小时可能有15次更新。我们是否可以仅触发实际更改的路由的重建？

Answer 1

就像你说的，你可以使用react-static。

他们有一个功能，可以完全满足你的需要(用户的特定页面)。

在他们的示例中，他们使用帖子数组为每个帖子生成特定的静态文件。

这大大减少了加载所需的时间，因为它只是html静态文件。

想象一下这样的场景：

[
  {
    id: 'foo',
    ...
  },   
  {
    id: 'bar',
    ...
  },
  ...
]

按照下面的示例，这将生成如下所示(在运行时)：

- src
  - pages
    - blog
      - posts
        - foo // Specific post page
        - bar // Specific post page

查看下面的示例：

//static.config.js
export default {

  // resolves an array of route objects 
  getRoutes: async () => {

    // this is where you can make requests for data that will be needed for all
    // routes or multiple routes - values returned can then be reused in route objects below

    // ATTENTION: In here, instead of posts you'd fetch your users json data
    const { data: posts } = await axios.get(
      "https://jsonplaceholder.typicode.com/posts"
    );

    return [
      // route object
      {
        // React Static looks for files in src/pages (see plugins below) and matches them to path
        path: "/blog",
        // function that returns data for this specific route
        getData: () => ({
          posts
        }),
        // an array of children routes
        // in this case we are mapping through the blog posts from the post variable above
        // and setting a custom route for each one based off their post id
        children: posts.map(post => ({
          path: `/post/${post.id}`,
          // location of template for child route
          template: "src/containers/Post",
          // passing the individual post data needed
          getData: () => ({
            post
          })
        }))
      },
    ];
  },
  // basic template default plugins
  plugins: [
    [
      require.resolve("react-static-plugin-source-filesystem"),
      {
        location: path.resolve("./src/pages")
      }
    ],
    require.resolve("react-static-plugin-reach-router"),
    require.resolve("react-static-plugin-sitemap")
  ]
};

Answer 2

您可以使用Service Worker。将重要的快速页面作为静态页面加载，然后在后台使用Service worker加载较长的资源。

您还可以使用Service Worker进行智能缓存。例如，服务器可以使用当前资源版本(随第一页提供)设置cookie，服务工作者可以将其与其资源版本进行比较，并决定是从缓存中加载还是转到服务器。