Incremental Static Regeneration: Static Sites on Steroids

Rate this content
Bookmark

Static sites are great. They are fast, cheap, secure, and easy to maintain. But generating static assets is a process that takes more and more time while our site gets bigger. We will talk about ISR, a feature that Next.js framework offers us to generate static pages at runtime.

This talk has been presented at React Advanced Conference 2021, check out the latest edition of this React Conference.

FAQ

A static web page is a webpage that is delivered to the user's browser exactly as stored, typically consisting of HTML, CSS, and JavaScript files. The content is the same for all users who visit the site.

Server-side rendering dynamically generates HTML content on the web server before delivering it to the user, appearing as a static page but generated on demand. Client-side rendering, on the other hand, uses JavaScript in the browser to render HTML content dynamically, common in frameworks like React.

Static web pages are fast, cheap, easy to maintain, secure, easy to scale, and stable because they involve delivering files stored on a web server without executing code on each request.

Static site generation is a process where a web application is compiled and rendered at build time, creating static assets like HTML, JavaScript, and CSS files from various data sources and content systems using static site generators.

Incremental static regeneration is a feature in Next.js that allows developers to update static content on a per-page basis without rebuilding the entire site. It uses caching and revalidates the content at specified intervals, generating a new version of the page in the background for subsequent visitors.

Incremental static regeneration improves performance by reducing build times and increasing cache effectiveness. It generates fewer static assets during build and updates content in the background, allowing users to access cached versions of pages while new versions are being prepared.

Atomic deployment ensures that all static assets of a website are updated simultaneously during the build process. If any error occurs, or if any page is not generated, it breaches this atomic deployment, potentially leading to inconsistencies across the site.

Next.js supports multiple rendering methods including static site generation, server-side rendering, and incremental static regeneration. It allows developers to choose the appropriate rendering technique based on the page or feature requirements, optimizing performance and user experience.

Facundo Giuliani
Facundo Giuliani
22 min
25 Oct, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Incremental static regeneration is a feature in Next.js that allows for static generation on a per-page basis without rebuilding the entire site. It helps with headless content management systems and persists between deployments. The example demonstrates how server-side rendering, static site generation, and incremental static regeneration work together. The real-time visual editor allows for immediate changes to be seen. Visit the NetJS website for an e-commerce demo and learning platform.

1. Introduction to Incremental Static Regeneration

Short description:

Hello, everyone. My name is Facundo, and today we will talk about incremental static regeneration. A static web page is delivered to the user's browser exactly as a store. We have different ways of generating dynamic content, such as server-side rendering and client-side rendering. Static web pages offer benefits like speed, cost-effectiveness, ease of maintenance, security, scalability, and stability.

Hello, everyone. My name is Facundo, and today we will talk about incremental static regeneration.

I want to introduce myself. As I said, my name is Facundo Giuliani, I'm from Buenos Aires, Argentina. I work as a developer relations engineer at Storyblock. I'm also an Auth0 ambassador, Prisma ambassador, and Cloudinary media developer expert. If you want to talk about any of these products or anything, you can write me. My website is fgiuliani.com, and I'm on Twitter as Facundo Zurdo.

First of all, I wanted to define what a static web page is. It's a web page that is delivered to the user's browser exactly as a store. So we can have a web page that is conformed by an HTML file, CSS file, and JavaScript file. And that will be considered a static page. That doesn't mean that the content of the page will be static, but we will be delivering the same files to all the users that visit our website. And that is the difference with a dynamic web page, where it's a web page where some of the content is generated dynamically when needed.

We have different ways of generating this dynamic content. One of these ways is using server side rendering, where the HTML content that is generated dynamically is done in the web server. So the web server will be the one that will generate the HTML content and will deliver to the user a web page that will look like a static page, but on the flight, it was the HTML content or part of the HTML content was generated. On the other hand, the client side rendering is when the HTML content is rendered directly in the browser using JavaScript. This will be like the common use case for React where the HTML content that we generate or the markup that we generate is based on the components that we have in our application. And what any other single page application that we can create using React or other JavaScript frameworks.

But let's go back to the static web page, because if we analyze them we can see that we have different benefits that the static web pages offer. For instance the static web pages are fast because we are just delivering files that are stored in a web server as they are stored, so we don't have to do any logic to generate the content that we want to deliver. They are cheap because we are just storing files like any other file system. They are easier to maintain because these files that we create I don't know probably write in the content in a text editor or something like that uh using the method that we want. We can move one file from one place to the other we can deploy new versions of our website like just moving the new files to the web server and etc. They are secure because we are not executing any code in each request that we receive so we don't have to worry about the security of any code that is executed because there is no code being executed. It's easier to scale because we can add storage space to our web server and that will be enough to get more files and create more pages for our website. And it's stable because as we are not doing any calculation or processing on every request we are just delivering files and that will be more stable for our website. So having these benefits in mind from the static web pages that were created, I don't know, at the beginning of the 90s for instance, with the latest frameworks and tools that were developed in the latest years a new concept appeared.

2. Introduction to Static Site Generation

Short description:

So having these benefits in mind from the static web pages that were created, a new concept appeared: static site generation. We can generate static assets at build time using different data sources, content, template engines, databases, APIs, and third-party services. Next.js is a react framework that allows us to create user interfaces, static pages, and server-side rendered pages. We can use static site generation for some pages, while using server-side rendering or client-side rendering for dynamic pages. Next.js also provides API routes and fast refresh on the development environment.

So having these benefits in mind from the static web pages that were created, I don't know, at the beginning of the 90s for instance, with the latest frameworks and tools that were developed in the latest years a new concept appeared. The concept of static site generation which is compiling and rendering a web application at build time, generating static assets like HTML, JavaScript and CSS files.

So we will have different data sources, content, template engines, databases, APIs, third-party services and we can generate the logic that will create the HTML content for our website and we will use a static site generator to run a build process for our project and generate static assets that will be our website.

So these static assets that we will deploy to the web server later are generated when we run a build process with the static site generator and all the dynamic content that we generate using the different processing and data resources that we have will be analyzed and let's say rendered at build time. So we can be sure that when the users visit our website they will be seeing static assets, static pages and I mean that is using the benefits of the static sites but using frameworks and tools from the latest years.

There are several static site generators, today I will focus on Next.js which is a react framework that allows us to create user interfaces, static pages and server side rendered pages. So we can work at the page-based level, let's say I mean we can create javascript files for each page that we will have in our website or we can create dynamic routes that will generate different pages that follow a certain criteria or certain URL let's say and we can use per page level or differentiating each page, how we want to render the content for it.

So we can have static site generation for some of the pages in our website, let's say that we have for instance a blog, we can like use static site generator to generate the home of our blog and then one page per article or per blog post let's say as the content that we will expose in our blog post will be always the same and for all the visitors of our website, we can generate them ahead of time and in a build time, generate static pages and static assets that we will deploy to the web server and they will be available to be visit by our visitors. But we can also have I don't know dynamic pages in our platform or our website and we can use server side rendering in those cases or client-side rendering depending on what we need. I mean client-side rendering would be like the regular react but we can use server side rendering too so the server returns a page with a dynamic html content that was created on the fly but on the server. We can also have API routes in Next.js to execute code like the serverless functions do so they can return we can consume services or APIs using API routes and one of the other cool features that Next.js has is that we will have fast refresh on developed environment. So if we are using for instance static site generation that doesn't mean that whenever we apply a change on the content or the code of our website we will have to run the build process again. The code will be changed for instance and the changes will appear automatically on our browser while we are working locally. So we see that we can create static sites but using new tools and different data sources and template engines and etc everything at build time so again going back to the same example we can create a blog post sorry a blog site with a lot of blog post rendering all the content that we need ahead of time and deploying static assets but this have a problem because um when we start creating more and more articles and blog posts and etc and our website gets bigger and bigger the amount of time that we will need to generate all the static assets at build time will be bigger too.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Routing in React 18 and Beyond
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.
RedwoodJS: The Full-Stack React App Framework of Your Dreams
React Summit Remote Edition 2021React Summit Remote Edition 2021
43 min
RedwoodJS: The Full-Stack React App Framework of Your Dreams
Top Content
Redwood JS is a full stack React app framework that simplifies development and testing. It uses a directory structure to organize code and provides easy data fetching with cells. Redwood eliminates boilerplate and integrates Jest and Storybook. It supports pre-rendering and provides solutions for authentication and deployment. Redwood is a cross-client framework that allows for building web and mobile applications without duplicating work.
A Practical Guide for Migrating to Server Components
React Advanced Conference 2023React Advanced Conference 2023
28 min
A Practical Guide for Migrating to Server Components
Top Content
Watch video: A Practical Guide for Migrating to Server Components
React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.
The New Next.js App Router
React Summit 2023React Summit 2023
27 min
The New Next.js App Router
Watch video: The New Next.js App Router
Today's Talk is about the Next.js App Router, which has evolved over the years and is now a core feature of Next.js. The Talk covers topics such as adding components, fetching remote data, and exploring layouts. It also discusses submitting form data, simplifying code, and reusing components. The App Router allows for coexistence with the existing pages router and enables data fetching at the layout level using React Server Components.
You Don’t Know How to SSR
DevOps.js Conf 2024DevOps.js Conf 2024
23 min
You Don’t Know How to SSR
The Talk covers the speaker's personal journey into server-side rendering (SSR) and the evolution of web development frameworks. It explores the use of jQuery for animations in SSR, the challenges faced in integrating React with Umbraco, and the creation of a custom SSR framework. The Talk also discusses the benefits of Next.js and the use of serverless artifacts for deployment. Finally, it highlights the features of Astro, including its function per route capability.
A Saga of Web Rendering Woes
Vue.js London 2023Vue.js London 2023
28 min
A Saga of Web Rendering Woes
This Talk discusses the problems faced in building and rendering web applications, different rendering methods and strategies, and the benefits of the Yamstack architecture. It covers server-side rendering, static site generation, incremental static regeneration, and edge rendering. The speaker demonstrates how to build a static site using a Hello CMS and the JAMstack architecture. Other topics include connecting Storyboard with a Nuxt application, mock data, hybrid rendering, and handling I18N with a static site generator.

Workshops on related topic

Build a Headless WordPress App with Next.js and WPGraphQL
React Summit 2022React Summit 2022
173 min
Build a Headless WordPress App with Next.js and WPGraphQL
Top Content
WorkshopFree
Kellen Mace
Kellen Mace
In this workshop, you’ll learn how to build a Next.js app that uses Apollo Client to fetch data from a headless WordPress backend and use it to render the pages of your app. You’ll learn when you should consider a headless WordPress architecture, how to turn a WordPress backend into a GraphQL server, how to compose queries using the GraphiQL IDE, how to colocate GraphQL fragments with your components, and more.
Next.js 13: Data Fetching Strategies
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
WorkshopFree
Alice De Mauro
Alice De Mauro
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up
Create a Visually Editable Next.js Website Using React Bricks, With Blog and E-commerce
React Summit 2023React Summit 2023
139 min
Create a Visually Editable Next.js Website Using React Bricks, With Blog and E-commerce
Top Content
WorkshopFree
Matteo Frana
Matteo Frana
- React Bricks: why we built it, what it is and how it works- Create a free account- Create a new project with Next.js and Tailwind- Explore the directory structure- Anatomy of a Brick- Create a new Brick (Text-Image)- Add a title and description with RichText visual editing- Add an Image with visual editing- Add Sidebar controls to edit props (padding and image side)- Nesting Bricks using the Repeater component- Create an Image gallery brick- Publish on Netlify or Vercel- Page Types and Custom fields- Access Page meta values- Internationalization- How to reuse content across pages: Stories and Embeds- How to create an E-commerce with Products’ data from an external database and landing pages created visually in React Bricks- Advanced enterprise features: flexible permissions, locked structure, custom visual components
From Todo App to B2B SaaS with Next.js and Clerk
React Summit US 2023React Summit US 2023
153 min
From Todo App to B2B SaaS with Next.js and Clerk
WorkshopFree
Dev Agrawal
Dev Agrawal
If you’re like me, you probably have a million side-project ideas, some that could even make you money as a micro SaaS, or could turn out to be the next billion dollar startup. But how do you know which ones? How do you go from an idea into a functioning product that can be put into the hands of paying customers without quitting your job and sinking all of your time and investment into it? How can your solo side-projects compete with applications built by enormous teams and large enterprise companies?
Building rich SaaS products comes with technical challenges like infrastructure, scaling, availability, security, and complicated subsystems like auth and payments. This is why it’s often the already established tech giants who can reasonably build and operate products like that. However, a new generation of devtools are enabling us developers to easily build complete solutions that take advantage of the best cloud infrastructure available, and offer an experience that allows you to rapidly iterate on your ideas for a low cost of $0. They take all the technical challenges of building and operating software products away from you so that you only have to spend your time building the features that your users want, giving you a reasonable chance to compete against the market by staying incredibly agile and responsive to the needs of users.
In this 3 hour workshop you will start with a simple task management application built with React and Next.js and turn it into a scalable and fully functioning SaaS product by integrating a scalable database (PlanetScale), multi-tenant authentication (Clerk), and subscription based payments (Stripe). You will also learn how the principles of agile software development and domain driven design can help you build products quickly and cost-efficiently, and compete with existing solutions.
Building Reusable Server Components in NextJS
React Summit US 2023React Summit US 2023
88 min
Building Reusable Server Components in NextJS
Workshop
Will Bishop
Mettin Parzinski
2 authors
React continues to evolve their beta capability, React Server Components, and they're continuing to further develop them in partnership with frameworks like NextJS.In this workshop, attendees will learn what React Server Components are, how to effectively build and use them in NextJS, and focus on one of the major advantages of React/NextJS: reusability through components.We will also cover related beta technologies enabled by the `app` directory, such as nested layouts and server actions (alpha/experimental capability).Join us for this hands-on, 120 minute workshop!Technologies:
React, JavaScript/Typescript, NextJS, Miro
Building Blazing-Fast Websites with Next.js and Sanity.io
React Summit 2023React Summit 2023
71 min
Building Blazing-Fast Websites with Next.js and Sanity.io
WorkshopFree
Nancy Du
Nataliya Ioffe
2 authors
Join us for a hands-on workshop where we'll show you how to level up your React skills to build a high-performance headless website using Next.js, Sanity, and the JAMstack architecture. No prior knowledge of Next.js or Sanity is required, making this workshop ideal for anyone familiar with React who wants to learn more about building dynamic, responsive websites.
In this workshop, we'll explore how Next.js, a React-based framework, can be used to build a static website with server-side rendering and dynamic routing. You'll learn how to use Sanity as a headless CMS to manage your website’s content, create custom page templates with Next.js, use APIs to integrate with the CMS, and deploy your website to production with Vercel.
By the end of this workshop, you will have a solid understanding of how Next.js and Sanity.io can be used together to create a high-performance, scalable, and flexible website.