Gatsby在客户端添加动态页面

时间:2020-05-24 10:37:32

标签: reactjs gatsby netlify

我正在使用Netlify上托管的Gatsby设置。

我正在建立某种食谱网站,用户可以在其中注册,登录并将食谱添加到自己的食谱页面。要添加新食谱,用户可以在表单中填写一些数据(例如食谱名称,配料等)。提交后,数据将存储在数据库中。然后,我还希望为该特定配方创建一个动态页面。 (这是您来的地方)。

我知道我可以通过gatsby-node.js文件添加页面,但是我希望此页面可以添加到客户端,并且在表单提交后立即存在而无需重建项目。在盖茨比有可能吗?如果可以,怎么办?

如果这不可能,我的最佳选择是在提交表单后调用Netlify Webhook重建项目,然后仅等待构建完成才能显示食谱详细信息页面?有什么想法吗?

希望你们的编码员可以在这里帮助我!

2 个答案:

答案 0 :(得分:2)

我将采用的方法是首先显示新食谱页面的动态版本(提交后立即显示),该版本仅对经过身份验证的用户可见(基于其用户ID和帖子ID)。也许通过在该页面上的注释为作者澄清这一点。像这样的内容:“这是预览。您的食谱目前正在烹饪中,将在几分钟内准备就绪。”

同时,将使用后端的Webhook触发增量构建。 gatsby cloudnetlify现在都支持此功能,因此从理论上讲构建应该很快。

触发网络挂钩取决于您未提及的后端解决方案。但是,例如在使用Drupal时,您可以使用build_hooks模块。可以将其配置为在将配方发布回Drupal时触发构建。

我敢肯定会有很多技术挑战,但我认为应该有可能。诀窍是不要在新内容中产生太多依赖关系,因此增量构建应保持尽可能小。

答案 1 :(得分:0)

好的,所以我发现Gatsby中没有办法直接在客户端创建页面。我决定遵循Albert的想法,首先显示一个动态页面,其中包括一条消息,说这是一个临时页面,真正的食谱是“正在煮熟”。

在提交表单时,我也只是简单地调用webhook来触发Netlify部署。这将触发新的部署,并在gatsby-node.js中,我将基于在表单提交中保存在数据库中的数据创建新页面。