组合静态站点+客户端呈现(Reaction，Gatsby) [英] Combining Static Sites + Client Side Rendering (React, Gatsby)

问题描述

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

当用户访问网站时，他们会看到一个Landing Page，可以转到一个Pricing Page，一个About page，一个Blog。等等。他们还可以Sign Up或Log in，然后是实际的应用程序。我希望静态呈现某些页面(Landing,Pricing,About,Blog)，但希望将所有内容留在注册/登录墙客户端呈现。

(首先，因为它不能是静态的，因为这是动态内容。另外，因为我不关心这里的搜索引擎优化，所以next.js的一个主要原因就消失了，因为这个应用程序无论如何都在注册/登录墙后面。)

问题：首先：这有意义吗？其次：我怎么能实施这样的事情呢？我在网上什么都没找到！这是闻所未闻的吗？我想对我的静态内容使用Gatsby.js，但我不确定如何将客户端呈现的部分融入其中。我以前使用过create-react-app，它执行客户端渲染，但我不确定我将如何进行实现？

推荐答案

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

它是Gatsby的入门模板，允许您将静态页面保存在-
与动态页面(客户端Reaction应用程序)结合--"混合Gatbsy应用程序"。

手动步骤：
1.创建将包含您的客户端Reaction应用的文件夹src/app。
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

3. 立即安装gatsby-plugin-create-client-paths：
   npm install --save gatsby-plugin-create-client-paths
4. 将其添加到gatsby-config.js进行配置，如下所示：

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

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

这篇关于组合静态站点+客户端呈现(Reaction，Gatsby)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！