{"id":3316,"date":"2025-04-09T14:57:13","date_gmt":"2025-04-09T12:57:13","guid":{"rendered":"https:\/\/uniquedevs.com\/blog\/jak-dziala-cache-w-next-js-15-praktyczne-wprowadzenie-z-przykladami\/"},"modified":"2025-04-11T09:43:46","modified_gmt":"2025-04-11T07:43:46","slug":"how-does-caching-work-in-next-js-15","status":"publish","type":"post","link":"https:\/\/uniquedevs.com\/en\/blog\/how-does-caching-work-in-next-js-15\/","title":{"rendered":"How does caching work in Next.js 15? A practical introduction with examples"},"content":{"rendered":"\n

Why is cache so important?<\/h2>\n\n\n\n

Caching is a technique that allows an application to remember previously downloaded data and avoid unnecessary network queries or costly calculations. A well-designed cache can dramatically speed up page loading and reduce server load. But caching also has its dark side: out-of-date data, erroneous revalidations and loss of control over what refreshes when.<\/p>\n\n\n\n

Next.js<\/a> until version 14 used by default mechanisms that automatically cached data from fetch<\/code>. The problem was that this often led to unexpected results – especially in dynamic applications. In Next.js 15, the philosophy changes: by default, the cache is disabled, and the responsibility for making it work rests with the developer.<\/p>\n\n\n\n

This approach gives more control, but requires an understanding of how the new model works and when it is worth using it.<\/p>\n\n\n\n

New caching model in Next.js 15 – what has changed?<\/h2>\n\n\n\n

The biggest change is that asynchronous functions are no longer cached by default. In previous versions, when you used fetch<\/code> in a server component, Next.js could automatically cache the data and serve it as static. From now on, for something to be cached, you must explicitly declare it.<\/p>\n\n\n\n

What does this mean in practice?<\/h3>\n\n\n\n

Example – suppose you have a function that retrieves data from an API:<\/p>\n\n\n\n

async function getUser(id: string) {\n  const res = await fetch(`https:\/\/api.example.com\/users\/${id}`);\n  return res.json();\n}\n<\/code><\/pre>\n\n\n\n
In Next.js 14, this function could be automatically cached. In Next.js 15 – no<\/strong>. The data will be fetched anew with each request, unless you give a signal that you want to cache it.<\/p>\n\n\n\n
To restart the caching mechanism – you use the new 'use cache'<\/code> directive (more about it in a moment).<\/p>\n\n\n\n
New: dynamicIO<\/code><\/h3>\n\n\n\n
Next.js 15 also introduces an experimental mode called dynamicIO<\/strong>, which changes the way the framework treats dynamic functions. By default, Next.js considers everything dynamic (i.e., requiring SSR), but with dynamicIO<\/code> you can mark specific parts of your application as cache-safe or even static – giving you big performance gains.<\/p>\n\n\n\n
To activate it, simply add to next.config.js<\/code>:<\/p>\n\n\n\n
experimental: {\n  serverActions: true,\n  dynamicIO: true\n}\n<\/code><\/pre>\n\n\n\n
This opens the door to deeper management of what is dynamic and what is not – and achieves a balance between data freshness and performance.<\/p>\n\n\n                        
\n                
\n                    \"Looking\n                <\/div>\n                
\n                    \"Looking\n                <\/div>\n                
\n                                            
\n                            Looking for a trusted IT project contractor?                        <\/div>\n                                                                                            \n                                Write to us!                            <\/a>\n                                                            <\/div>\n            <\/div>\n            \n\n\n
Directive 'use cache'<\/code> – full control over cache<\/h2>\n\n\n\n
The new 'use cache'<\/code> directive is one of the most important tools in Next.js 15. It allows us to explicitly specify which functions should be cached – and for how long.<\/p>\n\n\n\n
How does 'use cache'<\/code> work ?<\/h3>\n\n\n\n
It is simply a special line added at the beginning of a file (or function) that says: “this function is to be cached”.<\/p>\n\n\n\n
'use cache';\n\nexport async function getUser(id: string) {\n  const res = await fetch(`https:\/\/api.example.com\/users\/${id}`);\n  return res.json();\n}\n<\/code><\/pre>\n\n\n\n
From this point on, getUser<\/code> becomes a function whose result is stored in a cache and is not queried again with each request – until it is invalidated or the cache lifetime (if we have defined one) expires.<\/p>\n\n\n\n
Where can you use 'use cache'<\/code>?<\/h3>\n\n\n\n
Use cache can be used in:<\/p>\n\n\n\n
– in asynchronous functions
– in server components
– in data loader helpers
– at the level of entire layouts or pages<\/p>\n\n\n\n
Example with component:<\/p>\n\n\n\n
'use cache';\n\nexport default async function Profile({ userId }: { userId: string }) {\n  const user = await getUser(userId); \/\/ also with 'use cache'\n  return <div>{user.name}<\/div>;\n}\n<\/code><\/pre>\n\n\n\n
In this case, the component and the getUser<\/code> function are cached, which means that user data will be retrieved only once for the life of the cache.<\/p>\n\n\n\n
Configuring the Next.js 15 project with dynamicIO<\/code><\/h2>\n\n\n\n
Next.js 15 introduces a new mechanism called dynamicIO<\/code>, which allows for more precise management of what can be cached and what should remain dynamic. This tool not only improves performance, but also simplifies complex scenarios where some data can be static and some dynamic – and within a single page or component.<\/p>\n\n\n\n
How to enable dynamicIO<\/code>?<\/h3>\n\n\n\n
To activate dynamicIO<\/code>, you need to add the appropriate flag in the file next.config.js<\/code>. In practice, it looks like this:<\/p>\n\n\n\n
\/\/ next.config.js\n\/** @type {import('next').NextConfig} *\/\nconst nextConfig = {\n  experimental: {\n    serverActions: true,\n    dynamicIO: true,\n  },\n};\n\nmodule.exports = nextConfig;\n<\/code><\/pre>\n\n\n\n
Practical note<\/strong>: dynamicIO<\/code> only works in applications using the App Router<\/strong> (\/app<\/code>), not with the older Pages Router(\/pages<\/code>). It’s also worth making sure you have an up-to-date version of Next.js 15 and Node 18+.<\/p>\n\n\n\n
What does dynamicIO<\/code> change ?<\/h3>\n\n\n\n
Bottom line:<\/p>\n\n\n\n