本文介绍了组合静态站点+客户端呈现(Reaction,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
- 立即安装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
这篇关于组合静态站点+客户端呈现(Reaction,Gatsby)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!