Next.js rearchitects router for smoother server-side rendering

Now stable in Next.js 13.4, the new App Router builds on React Server Components and React Suspense to improve data fetching, page loading, and the developer experience.

Next.js 13.4, the latest version of Vercel’s web development framework, stabilizes the App Router, which builds on React Server Components and React Suspense to bring a number of improvements to server-side rendering.

The Next.js update, which was announced on May 4, also features a beta of the new Turbopack bundler and an alpha of Server Actions, a new feature for mutating and revalidating data on the server and managing form state. 

But highlighting Next.js 13.4 is a production version of App Router, which serves as an evolution of the existing file system-based router in the Pages Router. With App Router, content can be streamed from the server, improving the perceived loading performance of a page. Also, App Router now has built-in SEO support with a metadata API, for customizing a page for searching on the web, compatible with streaming.

Initially introduced with Next.js 13, which arrived last October, App Router was built on the foundation of React Server Components and React Suspense, which allow for more flexible data fetching and pages to be either progressively rendered or instantly streamed from the server. And with App Router, unlike Pages Router, data fetching can be co-located with the component.

Vercel recommends using App Router for new applications; users can incrementally migrate existing applications. Instructions for getting started with Next.js can be found at next.js.org. 

Next.js 13.4 also features a beta of Turbopack, a bundler intended to speed up local iterations while work ensues on a future Next.js application and, soon, production builds. Written in Rust, Turbopack is an incremental builder optimized for TypeScript and JavaScript. Since being released in an alpha state with Next.js 13, Turbopack has had bugs patched and support added for missing features. But Turbopack still lacks full feature parity with Webpack and Next.js. The goal with the beta is to continue addressing remaining bugs from increased adoption and prepare for a stable version.

In an alpha state in Next.js 13.4, Server Actions enables mutating of data on the server, calling functions directly without needing to create an in-between API layer. This provides for “powerful” server-first data mutations, less client-side JavaScript and progressively enhanced forms, according to Vercel. Next.js 13.4 also features a Draft Mode capability, for fetching and rendering draft content from a headless CMS.