DEV Community

Cover image for Cool updates in Nextjs 15
Hussain Ahmed Siddiqui
Hussain Ahmed Siddiqui

Posted on

Cool updates in Nextjs 15

Hello NextJs users there are some interesting updates of nextjs

  • React Compiler
  • Hydration error improvements
  • Caching updates

React Compiler:
In order to optimize applications, React Compiler automatically memoizes your code. You may be familiar today with memoization through APIs such as useMemo, useCallback, and React.memo. With these APIs you can tell React that certain parts of your application don’t need to recompute if their inputs haven’t changed, reducing work on updates. While powerful, it’s easy to forget to apply memoization or apply them incorrectly. This can lead to inefficient updates as React has to check parts of your UI that don’t have any meaningful changes.

The compiler uses its knowledge of JavaScript and React’s rules to automatically memoize values or groups of values within your components and hooks. If it detects breakages of the rules, it will automatically skip over just those components or hooks, and continue safely compiling other code.
Click for more details

Hydration error improvements:
Next.js 14.1 made improvements to error messages and hydration errors. Next.js 15 continues to build on those by adding an improved hydration error view. Hydration errors now display the source code of the error with suggestions on how to address the issue.

For example, this was a previous hydration error message in Next.js 14.1:

Image description

Next.js 15 RC has improved this to:

Image description

Caching updates:
With Next.js 15, we’re changing the caching default for fetch requests, GET Route Handlers, and Client Router Cache from cached by default to uncached by default. If you want to retain the previous behavior, you can continue to opt-into caching.

We're continuing to improve caching in Next.js in the coming months and we'll share more details in the Next.js 15 GA announcement.
fetch('https://...', { cache: 'force-cache' | 'no-store' });

  • no-store - fetch a resource from a remote server on every request and do not update the cache
  • force-cache - fetch a resource from the cache (if it exists) or a remote server and update the cache Click for more details

The best part is the update in hydration error!

Top comments (0)