Making Static Site Generation More Flexible in Next.js 12
Photo by Dan-Cristian Pădureț on Unsplash
If you want to learn about the latest static site generation features and/or you are interested in Next.js this article is for you.
Next.js, a frontend framework capable of static site generation (SSG), just released version 12.0, and it's apparent that the goal of Next.js is to make SSG as flexible as possible. You rarely hear flexible and static in the same sentence, but Next.js is making strides to change that.
I believe the goal of the Next.js team is to break people away from client side rendering and show developers how to embrace static site generation. It's clear that Vercel, the creators of Next.js, are putting in a lot of effort and support for their frontend framework.
Let's look at two things Next.js does to push towards more flexible static site generation.
Middleware Functions (Edge Functions)
One of the big features of Next.js 12 was the beta release of middleware functions. Middleware functions, also referred to as edge functions, allow you to run code before a web request is processed and change the response you would have normally given. What does that mean?
This means you can rewrite URLs, redirect users, add header content before a user sees your page. Add authentication, personalization, bot protection, feature flags, accessibility, logging, and more. And this works with static pages!
One major use case for this that I have seen people asking for is authentication. Middleware gives you the ability to authenticate requests to static content. Maybe you have static learning materials that you have behind a paywall. You can now easily add authentication that checks your visitor has paid to see the content.
A second use case for middleware is adding personalization features. You can check a visitors cookies and change the content they see by redirecting them to a page with personalized content. You could also check your visitors geolocation and redirect them to a page with content tailored to their location.
I'm especially excited about the middleware functions because of how you can add personalization to your static apps. Lee Robinson and Suzanne Aldrich of Vercel created a video demoing middleware functions.
Incremental Static Regeneration (ISR)
This feature of Next.js is not new but got some upgrades in version 12.0 and lends itself well to add flexibility to static pages. Next.js 12.0 added bot-aware ISR. What this means is your Next.js app will display your page content to web crawling bots instead of a fallback page. Turns out web crawlers can trigger ISR to kick off, and Next.js wants to ensure crawlers get the right content too.
If you are not familiar with the ISR feature in Next.js, then being bot aware may not make sense to you, so let's look at what ISR at its core really is.
What is Incremental Static Regeneration (ISR)?
ISR lets you rebuild static content on a page without rebuilding every page of your application. This is amazing for static sites because a full site build is no longer required to update a single page. For your 10,000 page e-commerce site, you can regenerate a single page only when it's actually visited.
How is this possible? Incremental Static Regeneration, lives inside the getStaticProps() method, there is a revalidate property which you can set to a number of seconds. If you set this property, it means ISR is turned on. If you set it to 30, that means if 30 seconds has elapsed, since the last request to the page, it will re-run the getStaticProps() method and determine if new props values are returned. If new data is returned, the pages static content is regenerated and the NEXT person to visit the page will see the new content.
This is how the ISR feature has worked for a while now and is a great way to update your static pages with new content without regenerating every single page. And it's nice to see the Next.js team improving ISR with the new bot aware feature.
A scenario where this is useful is when you have your site connected to a content management system (CMS). Anyone can update pictures, text, documents on the CMS and now your static app will automatically incorporate those changes next time someone visits the pe. Next.js and ISR kick in and grab the new content from your CMS.
I made a YouTube vide on ISR as well, that shows a demo of ISR in action.
What's next?
Middleware functions and Incremental Static Regeneration are two powerful ways to add flexibility to your static applications. I believe the Next.js development team will continue releasing and improving features focused on adding flexibility to Next.js static site generation. The team wants to shrink the gap between dynamic server and client side rendered applications and those that use static site generation. Expect more innovative ways to improve what you can do with static site generation.