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.

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
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.
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
Tired of rebuilding your React-based web framework from scratch for every new project? You're in luck! RedwoodJS is a full-stack web application framework (think Rails but for JS/TS devs) based on React, Apollo GraphQL, and Prisma 2. We do the heavy integration work so you don't have to. We also beautifully integrate Jest and Storybook, and offer built-in solutions for declarative data fetching, authentication, pre-rendering, logging, a11y, and tons more. Deploy to Netlify, Vercel, or go oldschool on AWS or bare metal. In this talk you'll learn about the RedwoodJS architecture, see core features in action, and walk away with a sense of wonder and awe in your heart.
The New Next.js App Router
React Summit 2023React Summit 2023
27 min
The New Next.js App Router
Next.js 13.4 recently released the stable version of the "App Router" – a transformative shift for the core of the framework. In this talk, I'll share why we made this change, the key concepts to know, and why I'm excited about the future of React.
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
Server Components are the hot new thing, but so far much of the discourse around them has been abstract. Let's change that. This talk will focus on the practical side of things, providing a roadmap to navigate the migration journey. Starting from an app using the older Next.js pages router and React Query, we’ll break this journey down into a set of actionable, incremental steps, stopping only when we have something shippable that’s clearly superior to what we began with. We’ll also discuss next steps and strategies for gradually embracing more aspects of this transformative paradigm.
You Don’t Know How to SSR
DevOps.js Conf 2024DevOps.js Conf 2024
23 min
You Don’t Know How to SSR
A walk-through of the evolution of SSR in the last twelve years. We will cover how techniques changed, typical problems, tools you can use and various solutions, all from the point of view of my personal experience as a consumer and maintainer.
A Saga of Web Rendering Woes
Vue.js London 2023Vue.js London 2023
28 min
A Saga of Web Rendering Woes
This talk will look at the evolution of web rendering modes and what the Jamstack movement is all about. We will build a demo project to show how a static site generator and a Headless CMS can be combined to create dynamic and engaging stories while maintaining a static site's performance and scalability benefits.You will learn about the advantages and limitations of each rendering mode and gain a deeper understanding of how to use Jamstack to build powerful and dynamic storytelling experiences.

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
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
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.
Full Stack GraphQL In The Cloud With Neo4j Aura, Next.js, & Vercel
GraphQL Galaxy 2021GraphQL Galaxy 2021
161 min
Full Stack GraphQL In The Cloud With Neo4j Aura, Next.js, & Vercel
WorkshopFree
William Lyon
William Lyon
In this workshop we will build and deploy a full stack GraphQL application using Next.js, Neo4j, and Vercel. Using a knowledge graph of news articles we will first build a GraphQL API using Next.js API routes and the Neo4j GraphQL Library. Next, we focus on the front-end, exploring how to use GraphQL for data fetching with a Next.js application. Lastly, we explore how to add personalization and content recommendation in our GraphQL API to serve relevant articles to our users, then deploy our application to the cloud using Vercel and Neo4j Aura.

Table of contents:
- Next.js overview and getting started with Next.js
- API Routes with Next.js & building a GraphQL API
- Using the Neo4j GraphQL Library
- Working with Apollo Client and GraphQL data fetching in Next.js
- Deploying with Vercel and Neo4j Aura
High-performance Next.js
React Summit 2022React Summit 2022
50 min
High-performance Next.js
Workshop
Michele Riva
Michele Riva
Next.js is a compelling framework that makes many tasks effortless by providing many out-of-the-box solutions. But as soon as our app needs to scale, it is essential to maintain high performance without compromising maintenance and server costs. In this workshop, we will see how to analyze Next.js performances, resources usage, how to scale it, and how to make the right decisions while writing the application architecture.