This blog is powered by NextJS and Contentful, as explained in this post. I won't be covering how to start fetching data via Contentful as both NextJS and Contentful have articles on how to do this. I will however just cover the Static Site Generation (SSG) side of things, as well as how to keep the data fresh.
To fetch data from Contentful, I originally wrote this blog using
getServerSideProps. This meant that I wasn't actually getting the full benefits of NextJS from an SEO perspective. Yes, this blog was being pre-rendered so looked good to a crawler, but page-speed wasn't as high as it could have been - I really should have been using getStaticProps, which would have meant that the blog was just statically generated blob of HTML!
There is a time and place for
getServerSideProps though, e.g. if your page needs to know something about the current request at the time of render. E.g., if your page does something based off of a user's location, or if auth information needs to be considered for the rendering of the page, then
getServerSideProps is the way to go.
I don't need to know anything about you before this page needs to be rendered, so I only need to be using
getStaticProps. Utilising this made navigating through the blog lightning fast, but it did leave an issue: what happens if I update a post? We'll get on to how to solve that a little later.
Implementing getStaticProps is relatively easy. One needs to simply export the function as is shown in the contrived example below
This works quite well for a page with a static URL (e.g.
/blog). However, for my posts themselves, we need to also use
When dealing with dynamic routes, we need to tell NextJS which pages to actually generate, which is where getStaticPaths comes in. My blog posts follow the path
/blog/read/[slug], so in
[slug].tsx, I would also need to add something like the following
There are three values for fallback,
blocking. I chose
true because I wanted NextJS to still render blog posts that hadn't been cached, as opposed to generating a 404 page.
There you have it - now your site is SSG rendered... only there's one issue. How do you deal with updated content?
On Demand Incremental Site Revalidation (ISR)
As of NextJS version 12.2.0, On Demand ISR is stable and was the way I chose to keep my content updated. I knew Contentful allows for webhooks, so I got cooking a solution. I navigated to
/spaces/<space-id>/settings/webhooks and created a new webhook.
The webhook URL I chose was the one suggested, i.e.
Under Triggers, I opted to only fire webhooks for specific triggering events, just
Unpublish for Assets as that's all that I needed.
I added some headers for auth and some extras so that I could determine the origin of the request.
I chose to just send as a regular
application/json content type.
Most importantly for me, however, I chose to send a customised payload so that I only got what I needed:
Create a new route in
/pages/api/revalidate.ts, or whatever endpoint you decided to go for. The following, save for removing my personal code, should be enough to get your site revalidated when updating an entry on Contentful.
res.revalidate(revalidatePath) needs to be a completed relative URL, i.e. for me, passing
/blog/read/[slug] wouldn't work!
And that it's!