组合静态站点+客户端呈现(Reaction,Gatsby)

Combining Static Sites + Client Side Rendering (React, Gatsby)(组合静态站点+客户端呈现(Reaction,Gatsby))
本文介绍了组合静态站点+客户端呈现(Reaction,Gatsby)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想用Reaction构建一个Web应用程序。 当用户访问网站时,他们会看到一个Landing Page,可以转到一个Pricing Page,一个About page,一个Blog。等等。他们还可以Sign UpLog 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
  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/*`] },
 },
 ...
  1. 这将导致/app中的所有内容仅在浏览器(即客户端)中呈现。
  2. 构建后转到浏览器(gatsby develop)并选中/app

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

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

Update another component when Formik form changes(当Formik表单更改时更新另一个组件)
Formik validation isSubmitting / isValidating not getting set to true(Formik验证正在提交/isValiating未设置为True)
React Validation Max Range Using Formik(使用Formik的Reaction验证最大范围)
Validation using Yup to check string or number length(使用YUP检查字符串或数字长度的验证)
Updating initialValues prop on Formik Form does not update input value(更新Formik表单上的初始值属性不会更新输入值)
password validation with yup and formik(使用YUP和Formick进行密码验证)