Évek óta az egyik legbosszantóbb kérdés a Next.js-ben: "Statikus vagy dinamikus ez az oldal?". Egyszerű kérdésnek tűnik, amíg fel nem hívja a cookies()-t, egy fetch-t különböző opciókkal, egy adatbázis-klienst, egy CMS-t, egy bevásárlókosarat vagy egy egyedi tartalmat.

A Next.js 16 azért érdekes, mert igyekszik kevésbé titokzatossá tenni ezt a beszélgetést. Nem szünteti meg a bonyolultságot, de megváltoztatja a mentális modellt: az útvonalak alapértelmezés szerint dinamikusak, a gyorsítótár deklarálja magát, ahol szükséges, és a Suspense a természetes mód a gyors shell-ek összeállítására olyan részekkel, amelyek frissek maradnak.

A funkció, amelyet meg kell érteni, a Cache Components. A Stable Turbopack, a React Compiler, a proxy.ts és az új érvénytelenítési API-k fontosak, de ugyanazt a problémát járják körül: gyors alkalmazásokat kell készíteni anélkül, hogy kitalálni kellene, mit döntött a keretrendszer a színfalak mögött.

Mert ez számít

Egy igazi alkalmazásban nem csak „statikus oldalak” és „dinamikus oldalak” vannak. Különböző darabjai vannak különböző igényekkel.

A terméklap naponta néhányszor változhat. Az ár gyakrabban változhat. Az elérhetőségnek szinte élőnek kell lennie. A felhasználónév személyes. Az értékelések streamelhetők. Az oldalléc lehet stabil. A kocsi nem.

Ha mindent egy egységként kezel, mindig a két véglet egyikébe kerül:

• agresszív gyorsítótárazás és a régi adatok megtekintésének kockázata;
• dinamikus renderelés mindenhol és a szükségesnél rosszabb teljesítmény.

A Cache Components pontosan arra szolgál, hogy elkerülje ezt a téves választást.

A modell a gyakorlatban

A cacheComponents: true használatával deklarálhatja, hogy mi tárolható a "use cache" használatával. Ezután az időtartamot és a címkéket társíthatja a cacheLife() és a cacheTag() címkékkel. A dinamikus részek dinamikusak maradnak, és a Suspense segítségével elkülöníthetők.

A beállítás kicsi:

// next.config.ts
import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  cacheComponents: true,
};

export default nextConfig;

A nagy változás nem a konfigurációban van. Ez abban áll, hogyan kezdi el írni az összetevőket.

// app/products/[slug]/page.tsx
import { Suspense } from 'react';
import { cacheLife, cacheTag } from 'next/cache';

async function getProduct(slug: string) {
  'use cache';

  cacheLife('hours');
  cacheTag(`product:${slug}`);

  return db.product.findUnique({ where: { slug } });
}

async function ProductDetails({ slug }: { slug: string }) {
  const product = await getProduct(slug);

  return (
    <section>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
    </section>
  );
}

async function LiveInventory({ slug }: { slug: string }) {
  const inventory = await db.inventory.findFirst({ where: { slug } });
  return <p>{inventory.quantity} pezzi disponibili</p>;
}

export default async function ProductPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;

  return (
    <>
      <ProductDetails slug={slug} />
      <Suspense fallback={<p>Controllo disponibilità...</p>}>
        <LiveInventory slug={slug} />
      </Suspense>
    </>
  );
}

Az oldalnak nem kell teljes mértékben gyorsítótárazottnak vagy dinamikusnak lennie. A terméklap gyors és újrafelhasználható lehet. A készlet friss maradhat. A felhasználó azonnal lát valamit, anélkül, hogy megvárná a leglassabb részt.

A use cache egy végrehajtható dokumentáció

Amit szeretek a "use cache"-ban, az az, hogy arra kényszerít, hogy kifejezze a szándékát. Amikor elolvas egy függvényt, azonnal megérti, hogy valaki úgy döntött: "ezek az adatok újra felhasználhatók".

Különösen hasznos, ha nem használja a fetch-t. Számos alkalmazás olvas adatokat a Prismából, a Drizzle-ből, a belső SDK-kból, a CMS-kliensekből vagy a szolgáltatási funkciókból. Ezekben az esetekben a régi, csak a fetch opciókon alapuló érvelés nem volt elég.

Egy ökölszabály:

• a cachea tartalma viszonylag stabil;
• használjon szemcsés címkéket;
• dinamikus engedélyeket, munkameneteket, kosarakat, értesítéseket és tranzakciós állapotokat hagy meg;
• tegyen lassú részeket a Suspense-ba;
• mérje meg, mielőtt azt mondaná, hogy "javítottuk a teljesítményt".

Érvénytelenítse anélkül, hogy mindent eldobna

A gyorsítótár csak akkor hasznos, ha pontosan tudja frissíteni. Itt a cacheTag, revalidateTag és updateTag válik fontossá.

Példa:

'use server';

import { updateTag } from 'next/cache';

export async function updateProductName(productId: string, name: string) {
  await db.product.update({
    where: { id: productId },
    data: { name },
  });

  updateTag(`product:${productId}`);
}

A fontos részlet a címke. A product:${productId} pontos határt mond. A products hatalmas vödröt mond. Eleinte kényelmes a hatalmas vödör; néhány hónap múlva ez lesz az oka annak, hogy érvénytelenít egy fél alkalmazást a cím megváltoztatása érdekében.

Stable Turbopack: az a rész, amit minden nap hallasz

A Next.js 16 a Turbopackot a fejlesztés és építés központjába hozza. Nem ez a legköltőibb funkció, de ez az, amit munka közben érez: a szerver, amely korábban indul, gyorsabb frissítés, olyan felépítések, amelyek nem érzik úgy, mint egy kényszerű kávészünet.

Ennek ellenére csukott szemmel nem migrálnék egy egyedi bővítményekkel teli kódbázist. Ellenőrizném:

• helyi építés;
• nem szabványos import;
• MDX, SVG és CSS;
• Webpack bővítmények maradtak;
• kritikus oldalak;
• különbségek az építési időkben.

Az új projekteknél az alapértelmezésből indulnék ki. Éretteknek csinálnék egy kimért vándorlást.

React Compiler: távolítsa el a zajt, ne a gondolatot

A React Compiler 1.0 stabil, és a Next.js 16 támogatja a reactCompiler használatával. Az ígéret a sok kézi memográfia csökkentése: kevesebb memo, kevesebb useMemo, kevesebb useCallback használt "biztonsági okokból".

// next.config.ts
import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  reactCompiler: true,
};

export default nextConfig;

Nem kezelném varázsporként. A fordító akkor segít, ha a kód jól követi a React szabályait. Ha az összetevőknek furcsa mellékhatásai vannak, rejtett mutációk vagy rosszul használt horgok vannak, először ezt kell javítani.

Az egészséges módja annak, hogy kipróbáld:

1. frissítés eslint-plugin-react-hooks;
2. a tényleges jogsértések kijavítása;
3. engedélyezze egy ellenőrzött területen;
4. mérje az építési időt és a viselkedést;
5. csak akkor távolítsa el a kézi memorizálást, ha már nincs rá szükség.

A cél nem minden useMemo törlése. A cél az, hogy ne írjunk megelőző memoizációt, mert félünk a rendereléstől.

proxy.ts és a hálózati határ

A régi middleware.ts proxy.ts lesz. Ez egy névváltoztatás, de logikus: ez a fájl a kérés határán van, nem hagyományos háttér-stílusú általános köztes szoftver.

// proxy.ts
import { NextRequest, NextResponse } from 'next/server';

export default function proxy(request: NextRequest) {
  const isLoggedIn = Boolean(request.cookies.get('session'));

  if (!isLoggedIn && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }

  return NextResponse.next();
}

A szabály itt egyszerű: legyen kicsi. Átirányítás, hitelesítési útválasztás, fejlécek, lényeges átírások. Ha kezd úgy érezni, mint egy második háttérprogram, akkor valószínűleg túl sokat csinál.

Hogy tényleg elvándorolnék

Nem kapcsolnám be egyszerre az összes funkciót. én ezt tenném:

1. Frissítem a Next, React és React DOM-ot;
2. Elindítom a hivatalos codemodet;
3. Javítom a hibás változásokat a params, searchParams, cookies(), headers() és draftMode();
4. Áttelepítem a middleware.ts-t a proxy.ts-ba;
5. Ellenőrzöm a buildeket és a kritikus oldalakat;
6. Engedélyezem a Cache Components funkciót egy olyan szakaszon, ahol a gyorsítótár jelenleg súrlódást okoz;
7. Meghatározom a címkék és az érvénytelenítés konvencióit;
8. A React Compiler-t külön próbálom ki;
9. az előtti és utáni mutatók összehasonlítása.

A jó migráció nem az, amely az összes új funkciót használja. Ez teszi olvashatóbbá az alkalmazás viselkedését.

Mi változik a gondolkodásmódban

A Next.js 16-ban az a leghasznosabb, hogy rákényszeríti a szándékok jobb megnevezésére. Egy funkció nem csak „szerezze le a terméket az adatbázisból”. Ez "szerezd be a terméket, órákig tárolhatom, ezzel a címkével érvénytelenítem". Egy komponens nem csak „megjeleníti az oldalt”. Ez a "ez a gyors shell, ez a darab személyes, ez streaming".

Eleinte több munkának tűnik. Aztán a nyugalom egy formájává válik. A teljesítményre vonatkozó döntések többé nem rejtőznek az alapértelmezett értékek, a heurisztika és a törzsi memória kombinációjában. Benne vannak a kódban.

Hasznos források

• Next.js 16 kiadási megjegyzések
• Gyorsítótár összetevői – Next.js docs
• gyorsítótár használata - Next.js docs
• React Compiler v1.0