Creating an SSG (Static Site Generation) Application with Strapi Webhooks and NextJs

1

Next.js is a popular and widely-used React framework. It allows us to use various pre-rendering techniques. In a Next.js application, we can use Client-Side Rendering, Server-Side Rendering (SSR), and Static Site Generation (SSG).

This is a companion discussion topic for the original entry at https://strapi.io/blog/how-to-create-an-ssg-static-site-generation-application-with-strapi-webhooks-and-nextjs
2

Hey, thanks for the article! It was very useful for me! But, I have met some difficulties because of Next.js 13 update… Could you also update your article, please? @ Olaoluwa Ajibade

4

Could you update this blog? Thanks man!

5

This post is great. Very useful!!! New strapi fan.

1 Like
6

Nice article. A lot of attention to details.
I have took a close look at the webhooks section and in this particular case the webhook itself is useless as you are getting all the blogs from the API anyway.

7

The point you stated is valid for websites which do not generate static pages and client makes api call everytime. But here it is using NextJs to build static pages.
When using getStaticProps function on Nextjs, an API call is made only Once by the Nextjs server to build that particular page using getStaticProps function as a Static page. This prevents clients from making the api call and instead NextJs server serves them the Static Page that it has prepared. Which means, when a page is updated on strapi, the changes won’t be reflected when the client views the page because that page has already been generated during build. So the only solution is rebuild the page with it’s updated content. But how will the server know when the page has been updated? It’s impractical for developer to manually check and rebuild so the concept of webhook comes into play when anytime update is done, the webhook is automatically triggered which calls a certain url listening to build that.
However, it’s always not a best practice to rebuild the entire project just for updating one page. Which is why NextJs has something called Incremental Static Regeneration (ISR) which only updates the page which has been updated. And this can be done either at fixed interval or on demand. I’d like to request the Author of this article to create an updated version of this article using the ISR.

8

Can you update it, please?

9

Thank you for the comment. We will add it to the list of articles to update to use Next 15. I added the issue on github [UPDATE OUTDATED CONTENT] How To Create An SSG Static Site Generator Post Update to use Strapi 5 and Next 15 · Issue #1603 · strapi/community-content · GitHub

10

Cool, that’s great!