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的入门模板，允许您将静态页面保存在-
与动态页面结合（客户端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

结合静态网站+客户端渲染（反应式，盖茨比）

1 个答案: