Gatsby 在客户端添加动态页面

Gatsby add dynamic page on client side

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

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

我知道我可以通过 gatsby-node.js 文件添加页面,但我更希望该页面可以添加到客户端并在表单提交后立即存在而无需重建项目。这在 Gatsby 中是否可行?如果可行...如何实现?

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

希望你们中的一位程序员能帮我解决这个问题!

我采用的方法是首先显示新食谱页面的动态版本(提交后直接显示),该页面仅对经过身份验证的用户可见(基于其用户 ID 和 post ID ).也许在该页面上用注释向作者说明这一点。类似于:"This is a preview. Your recipe is being cooked up right now and will be ready in a few minutes."

同时,将使用后端的 webhook 触发增量构建。 gatsby cloud and netlify 现在都支持这个,所以理论上构建应该很快。

触发webhook取决于你没有提到的后端解决方案。但是当使用例如 Drupal 时,您可以使用 build_hooks 模块。这可以配置为在配方 post 返回 Drupal 时触发构建。

我确信会有很多技术挑战,但我认为这应该是可能的。诀窍是不要在您的新内容中生成太多依赖项,因此增量构建尽可能小。

好吧,我发现在 Gatsby 中没有办法直接在客户端创建页面。我决定采用 Albert 的想法,首先显示一个动态页面,其中包含一条消息,说明这是一个临时页面,真正的配方是 "being cooked up"。

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