javascript - 结合静态站点 + 客户端渲染(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 的一个主要原因消失了，因为无论如何该应用程序都位于注册/登录墙后面.)

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

Answer 1

我将尝试解释jamstack-hackathon-starter背后的过程(其中 @ksav 评论)。

它是 gatsby 的入门模板，可让您将静态页面保存在-
结合动态页面(客户端 react 应用程序) - “混合 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

现在安装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