When user requests a webpage, Next.js fetches the required data and render the page into an HTML document to serve to the user. However, rendering the page for every request can be very time-consuming and puts a lot of pressure on the server, especially for high-traffic applications.
Next.js resolves this issue by memorizing the fetched data and caching the rendered page, so these resource-intensive tasks only need to be performed once, improving the app's performance and delivering a smooth user experience.
In this lesson, we are going to investigate the caching mechanism of Next.js, which helps you better understand how to unitize these features to create better applications.
Request cache
Next.js follows a component based design system where each page can be divided into different reusable components, creating a tree structure.
Sometimes, different components may need to share the same information, but fetching the same data repeatedly for the same request would be inefficient and waste valuable resources.
Using Next.js, you don't have to fetch the data at the top of the tree and pass the data down through layers upon layers of props, and instead, Next.js automatically fixes this issue by extending the fetch() API.
When you use fetch() to request data, Next.js will memorize that data and share across different components of the webpage.
