Static Rendering and Caching Fundamentals
Explore how to implement static rendering and caching in Next.js for better performance and SEO. Understand how to pre-build static pages and dynamic routes by using fetch caching, generateStaticParams, and generateMetadata functions to create efficient, scalable web applications.
In Next.js, we have two primary ways to render our pages: dynamically or statically.
By default, any page that fetches data is rendered dynamically, on demand for every single user. This is great for ensuring data is always fresh.
However, for a huge portion of the web (think blogs, marketing pages, and documentation), the content doesn’t change with every visit. For these pages, we can use static rendering. This technique, also known as static site generation (SSG), generates the HTML just once at build time. It’s often the most efficient way to build for these reasons:
Performance: Serving static files is much faster than generating a page on every request.
SEO: Search engine crawlers can easily index static HTML, which is great for SEO.
Cost-effectiveness: The HTML files can be served from a global CDN. These CDNs are cheap, and we’re not hitting our server on every page view.
In this lesson, we’ll learn how to explicitly tell Next.js to render statically.
Opting into static rendering with fetch
In JavaScript, fetch(url, options) accepts an optional second argument for configuration. Next.js extends this options object to control how the request is cached and rendered. To make the page static, we explicitly instruct ...