JavaScript-Framework Next.js 14 erlaubt ersten Blick auf Partial Prerendering

Das Unternehmen Vercel hat auf seiner Entwicklerkonferenz Next.js Conf die Veröffentlichung der neuen Hauptversion Next.js 14 bekanntgegeben. Das quelloffene React-Framework erlaubt nun unter anderem das Verwenden von Partial Prerendering als Preview, stabilisiert Server Actions und arbeitet weiterhin an der Stabilisierung von Turbopack.

Vorschau auf Partielles Prerendering

Next.js 14 hat Partial Prerendering als Preview an Bord. Dabei handelt es sich um eine Compiler-Optimierung für dynamische Inhalte mit schneller, initialer statischer Antwort. Wie das Next.js-Team betont, müssen Entwicklerinnen und Entwickler dafür keine neuen APIs erlernen, was eine gute Developer Experience bieten soll.

Das partielle Vorrendern basiert auf dem React-Feature Suspense und ist durch <Suspense />-Grenzen definiert. Das Entwicklungsteam zeigt die Anwendung anhand einer beispielhaften eCommerce-Webseite:

export default function Page() {
  return (
    <main>
      <header>
        <h1>My Store</h1>
        <Suspense fallback={<CartSkeleton />}>
          <ShoppingCart />
        </Suspense>
      </header>
      <Banner />
      <Suspense fallback={<ProductListSkeleton />}>
        <Recommendations />
      </Suspense>
      <NewProducts />
    </main>
  );
}

Mit aktiviertem Partial Prerendering erstellt die Seite eine statische Shell gemäß der <Suspense />-Grenzen. Der fallback von React Suspense wird vorgerendert. Suspense-Fallbacks werden dann in der Shell durch dynamische Komponenten, wie Cookies zum Feststellen des Warenkorbs, ersetzt. Bei einem Request wird die statische HTML-Shell unmittelbar angezeigt:

<main>
  <header>
    <h1>My Store</h1>
    <div class="cart-skeleton">
      <!-- Hole -->
    </div>
  </header>
  <div class="banner" />
  <div class="product-list-skeleton">
    <!-- Hole -->
  </div>
  <section class="new-products" />
</main>

Weitere Details zum Preview-Feature sind im Blogeintrag zur Ankündigung zu finden.

Über 5000 Tests mit Turbopack bestanden

Vor einem Jahr erschien Turbopack erstmals in Next.js 13, um den etablierten Bundler webpack abzulösen. Derzeit befindet sich der inkrementelle, in Rust geschriebene neue Bundler noch im Beta-Status, doch das Next.js-Team arbeitet daran, die stabile Version zu erreichen. Diese soll in einem der nächsten Minor Releases enthalten sein.

Voraussetzung dafür ist, dass 100 Prozent aller Integrationstests für next dev mit Turbopack erfolgreich ablaufen – und das gelingt bereits bei über 5000 Tests, was mehr als 90 Prozent entspricht. Wer über den genauen Fortgang informiert bleiben möchte, kann die Website areweturboyet.com aufsuchen.

Informationen zu den Hintergründen von Turbopack und weshalb der Bundler webpack ablösen soll, erfuhr heise Developer im Interview von webpack-Erfinder Tobias Koppers, der bei Vercel die Turbopack-Entwicklung vorantreibt.

Stabilisierte Server Actions

Zu den weiteren Neuerungen in Next.js 14 zählt die Stabilisierung von Server Actions. Diese sind Teil des App Router, der auf dem React Canary Channel aufbaut. Im neuesten Canary Release, das Next.js nun verwendet, gelten Server Actions als stabil.

Lesen Sie auch

Webentwicklung: Fullstack-Anwendungen mit dem Next.js App Router

---

Enterprise-JavaScript: Call for Proposals für enterJS 2024 gestartet

Hinter der Entwicklung des Full-Stack-Frameworks Next.js stehen neben dem Anbieter Vercel über 2900 individuelle Entwicklerinnen und Entwickler sowie Industriepartner wie Google und Meta.

Alle Informationen zum neuen Release bietet der Next.js-Blog.

(mai)