结合静态站点 + 客户端渲染（React、Gatsby）

Question

我想用 React 构建一个 Web 应用程序。

当用户访问该站点时，他们会看到一个Landing Page，可以转到一个Pricing Page、一个About page、一个Blog。等等。他们也可以Sign Up 或Log in 然后是实际的应用程序。我想静态地渲染某些页面 (Landing,Pricing,About,Blog)，但想将所有内容留在 SignUp/Login-Wall 客户端渲染之后。

（首先，因为它不能是静态的，因为这是动态内容。另外，因为我不关心这里的 SEO，所以 next.js 的一个主要原因消失了，因为该应用程序落后于 SignUp/无论如何都要登录墙。）

问题：首先：这有意义吗？其次：我怎么能实现这样的东西？我在网上没有找到任何东西！这是闻所未闻的吗？我想将Gatsby.js 用于我的静态内容，但我不确定如何将客户端渲染位加入其中。我之前曾与 create-react-app 合作过，它负责客户端渲染，但我不确定我将如何进行实施？

Answer 1

我将尝试解释jamstack-hackathon-starter 背后的过程（@ksav 评论）。

它是 gatsby 的入门模板，可让您将静态页面保存在-
结合动态页面（客户端反应应用程序） - “混合 Gatbsy 应用程序”。

手动步骤：
1. 创建一个文件夹src/app，其中将包含您的客户端 React 应用程序。
2.在src/pages中创建一个名为app.js的文件，内容如下：

// I'm using create-react-app's structure
import App from '../app/src/App' // make sure this path corresponds to your path

export default App

1. 现在安装gatsby-plugin-create-client-paths:
   npm install --save gatsby-plugin-create-client-paths
2. 通过将其添加到 gatsby-config.js 来配置它，如下所示：

 plugins: [
 {
      resolve: `gatsby-plugin-create-client-paths`,
      options: { prefixes: [`/app/*`] },
 },
 ...

5. 这将导致/app 中的所有内容仅在浏览器（即客户端）中呈现。
6. 编译后进入浏览器（gatsby develop）查看/app