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

Question

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

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

（首先，因为它不能是静态的，因为这是动态内容。而且，因为无论如何我都不关心这里的 SEO，所以 next.js 的一个主要原因消失了，因为应用程序是反正在 SignUp/Login 墙后面。）

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

Answer 1

我会尽量解释jamstack-hackathon-starter (which @ksav评论背后的过程。

它是 gatsby 的入门模板，允许您将静态页面保存在-
结合动态页面（客户端反应应用程序）- "Hybrid Gatbsy App".

手动步骤：
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

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

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

这将导致 /app 中的所有内容仅在浏览器（即客户端）中呈现。
构建后转到浏览器 (gatsby develop) 并检查 /app

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

Combining Static Sites + Client Side Rendering (React, Gatsby)

javascript

client-side-scripting

reactjs

server-side-rendering

gatsby