Caching in Next.js

So far, we have always been using Next.js in dev mode. In dev mode, most of the caching that Next.js does is turned off to make it easy for us to develop our apps with hot reloading and always up-to-date data. However, once we switch to production mode, static rendering and caching are turned on by default. Static rendering means that if a page only contains static components (such as an “About Us” or “Imprint” page, which only contains static content), it will be statically rendered and served as HTML, or as static text/JSON for routes. Additionally, Next.js will try to cache data and server-side rendered components as much as possible to keep your app performant.

Next.js has four main types of cache:

• Data cache: A server-side cache for storing data across user requests and deployments. This is persistent but can be revalidated.
• Request memoization: A server-side cache for return values of functions if they are called multiple...