Static site generation with NextJs and a headless CMS

In this article, we will briefly explore the difference between server-side rendering(SSR) and static site generation(SSG) and implement both of them in a simple NextJS application fetching data from a Headless CMS.

What and why use SSR or SSG

Modern websites to always stay performant for users and search engines are employing SSR or SSG techniques. NextJS is a great React framework to implement both of them quickly and straightforwardly, and we will use it to achieve them. But first, explore the differences between them and some pros and cons.

SSR-enabled pages are generated runtime on the server at each user request(if not cached in someway!). Instead, SSG pages are created at build time and served to the users.

The main advantages of SSR pages are that the content is always up-to-date, and there is no need to trigger a rebuild and redeploy the website when some content changes in the CMS. The downside is that each request executes server-side code to create the HTML by fetching content from the cms Delivery API; this, of course, creates a slower response for the users.

With SSG, all the pages are pre-generated at build-time. So they can easily be distributed through CDN, creating the fastest possible experience for the users and also making Google happy for SEO purposes. The main drawback is that each time content changes in the CMS, a new build it’s needed to make content live, and this may be suboptimal if your website needs constant changes!

Setting up an example application with NextJS and Headless CMS support

To complete this mini-tutorial, you will need git and Nodejs ( v10.13 or above) installed and working in your machine and a trial account of ContentChef, the headless CMS that we are going to use in these examples.

Let’s start by cloning the repo of our NextJS starter and installing all the dependencies.

git clone git@github.com:ContentChef/nextjs-starter.git cd nextjs-starer npm install

This is a brand-new NextJs application with the ContentChef SDK installed, as we will use to fetch content from the headless CMS API.

It’s a simple website that displays a list of websites and a detail page for each of them. All the sample data are pre-loaded on ContentChef account so you have to do nothing about that.

Get your SpaceID and Online API key from the dashboard. You will find them on the homepage of the dashboard like in the screenshot below

Now let’s open the file ./services/contentChefClient.js and fill the pieces of information.

Try the application to be sure that everything is in place by running:

Open the browser and head to http://localhost:3000, and you should see the list of the websites, and by clicking on one of them, you will access to the detail of that website.

Great, this simple app has already SSR enabled! In fact, NextJS makes it extremely easy to create applications with SSR because you just need to export a function named getServerSideProps to instruct the framework that you want a page to be server-side rendered. This is the example of the list page where we load the contents from the CMS in a very straightforward way:

Enable SSG for static routes

Now let’s change the code to generate a static version of the same website!

We will start from the list page, which will be fairly easy. To instruct the framework to generate the page at build time, you need to export a function named getStaticProps, and that's all!

So let’s change the code accordingly in the index page above.

And now verify that’s working with a build.

npm run build

And let’s look the output in console:

Tada! The home page list is now static! But we have not finished yet. We want to create a static version of all the pages, including the detail pages, but now we see they’re deployed as a lambda.

Enable SSG for dynamic routes

This step’s a little bit trickier because we need to deal with the dynamic nature of the number of pages that we want to generate from our headless CMS, one for each website detail page. To do that, we need to implement the getStaticProps function for the single page and also add a getStaticPaths function to tell to NextJs the paths we want to be generated. Let's see the code to implement in./pages/top-site/[publicId].js file by opening it and removing the old getServerSideProps.

We start by defining the getStaticPaths function, to read the list of contents PublicIDs from the Delivery API and creates a list of "Paths" to be processed.

Now, adding the getStaticProps function is pretty straightforward and similar to the one used for the list, we just need a content PublicID to fetch it from ContentChef.

Let’s try it by regenerating it:

npm run build 
npm run start

And check again the console output:

Yahoo! All the pages are now static and you can browse them at http://localhost:3000

Triggering builds on a CI/CD pipeline

As you can see, generating SSR or SSG sites with next and a Headless CMS like ContentChef is fast and straightforward. With ContentChef, you can also easily add webhooks, so when you publish new content is easy to trigger a rebuild and redeploy your site on CI/CD.

Why not give ContentChef and NextJS a try? Sign up for a 30-day trial and experience the benefits of a headless CMS for SSR and SSG for yourself!

Originally published at https://www.contentchef.io.