New Features in React v18+

React v18 brings several significant enhancements and new concepts, many of which are leveraged by Next.js to improve both developer experience and application performance.

Server Components

React Server Components allow developers to build components that render on the server without sending the associated JavaScript to the client. This results in reduced bundle sizes and faster load times. In Next.js, Server Components are seamlessly integrated, enabling developers to specify server-side logic with minimal client-side impact.

Streaming and Suspense (introduced in earlier react versions)

React v18 introduces streaming server-side rendering with built-in support for Suspense. Suspense lets your components “wait” for something before they can render, making it easier to manage asynchronous operations and improve perceived performance. Next.js utilizes Suspense to intelligently load and render components based on data dependencies, enhancing user experience with smoother transitions and loading states.

Cache function

Per request memoization of server side actions was introduced in React v18.

Transitions

Not all state changes need to block the UI. React introduced the useTransition hook to solve this issue.

Server / Form Actions

Next.js did not create server and form actions. This was introduced with react v18.

Next.js: Building on React’s Foundations