CODEWITHSUNDEEP
reactjsgatsbynetlify
Sebastiaan
Sebastiaan

Reputation: 115

Gatsby add dynamic page on client side

I'm using a Gatsby setup hosted on Netlify.

I'm building some sort of recipe website where users can register, login and add recipes to their own cookbook page. To add a new recipe a user can fill in a form with some data (like recipe name, ingredients etc.). On submit the data will be stored inside a database. I then also want a dynamic page to be created for that specific recipe. (This is where you come in).

I know I can add pages via the gatsby-node.js file but I would prefer if this page can be added on the client side and exists instantly after the form submit without rebuilding the project. Is this possible in Gatsby and if so... how?

If this is not possible my best option would be calling the Netlify webhook to rebuild the project after the form submit and simply wait for the build to be completed before I can show the recipe detail page? Any thoughts on this?

Hope one of you coders can help me out here!

Upvotes: 0

Views: 311

Answers (2)

Sebastiaan
Sebastiaan

Reputation: 115

Okay so I figured out there isn't a way in Gatsby to create the page directly in the client side. I decided to go with Albert's idea of first showing a dynamic page including a message saying this is a temporary page and the real recipe is "being cooked up".

On form submit I also just simply call the webhook to trigger Netlify deploy. This triggers a new deploy and in the gatsby-node.js I will create the new page based on the data I saved in my database on the form submit.

Upvotes: 0

Albert Skibinski
Albert Skibinski

Reputation: 499

The way I would approach this is first show a dynamic version of the new recipe page (directly after submitting), which will only be visible to the authenticated user (based on its user ID and post ID). Maybe make this clear for the author with a note on that page. Something like: "This is a preview. Your recipe is being cooked up right now and will be ready in a few minutes."

At the same time, an incremental build would be triggered using a webhook from the backend. Both gatsby cloud and netlify support this now, so theoretically the build should be fast.

Triggering the webhook depends on your backend solution which you didn't mention. But when using for example Drupal you can use the build_hooks module. This can be configured to trigger a build when a recipe is posted back to Drupal.

I'm sure there would be a number of technical challenges but I think it should be possible. The trick would be not to generate too many dependencies in your new content, so the incremental build stays as small as possible.

Upvotes: 2

Related Questions