如何使用Gatsby创建应用外壳？

如何解决如何使用Gatsby创建应用外壳？

我一直在极大地提高我的React应用程序（使用create-react-app创建）的性能。我将应用程序托管在AWS S3中，并且希望避免服务器端渲染，因此我可以利用无忧的静态托管世界。长话短说，我想提取该应用程序的外壳程序（将页脚，页眉和侧边栏表示为静态内容，一旦用户登录，后者将被重新补水并添加更多详细信息）和条款服务，注册以及关于静态页面。这样，该应用程序在本质上将是完全动态的（包括主索引条目）。

我尝试使用react-snap，但是在渲染服务工作者时遇到了麻烦，并且由于此应用程序位于身份验证墙的后面，因此无法提供完整的体验（我不得不做出一些妥协，例如手动要求用户登录，我希望该过程是自动的）。

我看到Gatsby可以满足我正在寻找的需求（我的应用程序已经在Reach Router中进行了架构）。我暂时不想要任何其他功能，仅是应用程序外壳的预渲染，服务条款和注册页面。

我该如何实现？

我已经在Gatsby中启动了应用程序，并加载了主页。但是，如果更改路线，则会被404击中（这是正常现象，因为我没有在页面中定义它们）。我检查了the documentation和一些启动器，但似乎找不到答案。

这是/src/pages中我唯一的文件。

// src/pages/index.tsx
import React from 'react';
import Root from '../views/Root';

export default () => <Root />;

<Root />是我的整个应用程序。 （我知道About页面不会是静态的，因为尚未在/src/pages中定义）

我尝试将其添加到gatsby-node.js中，以便可以动态捕获除“关于”页面以外的所有路由，但该路由无效。

// gatsby-node.js
// Includes everything but the about page.
const regex = /^((?!(\/about)).)*$/;
exports.onCreatePage = async ({ page,actions }) => {
  const { createPage } = actions;
  // Only update the `/app` page.
  if (page.path.match(regex)) {
    // page.matchPath is a special key that's used for matching pages
    // with corresponding routes only on the client.
    page.matchPath = '/*';
    // Update the page.
    createPage(page);
  }
};

我该如何实现？

解决方法

您可以使用 gatsby 插件“gatsby-plugin-offline”，它不仅可以将您的网站设置为离线工作和缓存您的请求，而且还带有内置的 App Shell 功能。

https://www.gatsbyjs.com/plugins/gatsby-plugin-offline/?=offline

来自上面的链接：

应用程序外壳和服务器日志服务器日志（如来自 Netlify 分析）可能会显示大量的页面浏览量，如 /offline-plugin-app-shell-fallback/index.html，这是一个结果 gatsby-plugin-offline 向页面添加应用程序外壳。应用程序外壳 是可以离线缓存的最少量用户界面 重复访问时的可靠性能负载。外壳可以加载 从缓存中，并将站点的内容加载到外壳中 服务工作者。