Next15が出たらしい

https://nextjs.org/blog/next-15
ひさびさにキャッチアップ

パッと見で気になるのはここらへん
Async Request APIs (Breaking): Incremental step towards a simplified rendering and caching model.
Turbopack Dev (Stable): Performance and stability improvements.
unstable_after API (Experimental): Execute code after a response finishes streaming.
instrumentation.js API (Stable): New API for server lifecycle observability.
Enhanced Forms (next/form): Enhance HTML forms with client-side navigation.
Server Actions Security: Unguessable endpoints and removal of unused actions.

hajimism

 Async Request APIs (Breaking Change)ここらへんが async になるらしい。リクエスト前にレンダリングできるところとできないところをはっきり区別して将来の最適化につなげるため。PPRもあるしね。

cookies
headers
draftMode
params in layout.js, page.js, route.js, default.js, generateMetadata, and generateViewport
searchParams in page.js

hajimism

Caching Semantics

PPRあるしデフォルトのキャッシュはオフになりますよと

hajimism

 Client Router Cache no longer caches Page components by default
Shared layout data won't be refetched from the server to continue to support partial rendering.
Back/forward navigation will still restore from cache to ensure the browser can restore scroll position.
loading.js will remain cached for 5 minutes (or the value of the staleTimes.static configuration).

クライアントキャッシュねー、こっちのほうが助かる

hajimism

React 19

React 19 自体はまだRCだけど、コア部分は十分テストされていて「まあ大丈夫っしょ」とのこと

hajimism

React Compiler (Experimental)

Nextさん、Reactの実験場としてちゃんと仕事するなあ

hajimism

Hydration error improvements

どこが差分になってるのかがわかりやすく。めちゃくちゃ助かる。

hajimism

 Turbopack Dev
Up to 76.7% faster local server startup.
Up to 96.3% faster code updates with Fast Refresh.
Up to 45.8% faster initial route compile without caching (Turbopack does not have disk caching yet).

こういう指標は3割減で受け取ってるけど、なんにせよ早くなるならありがたい。

別にturboじゃなくても立ち上がり自体は十分早いと思ってる。

hajimism

詳細はこちらで、とのこと、

hajimism

 Static Route Indicator最適化のためのてがかりとして用意されたとのこと。専用の開発者ツールも開発していると。
This update is part of our ongoing efforts to enhance observability in Next.js, making it easier for developers to monitor, debug, and optimize their applications. We're also working on dedicated developer tools, with more details to come soon.

hajimism

PPRが視覚的にフィードバックされたらすごいけど

hajimism

Executing code after a response with unstable_after (Experimental)

Then, import the function in Server Components, Server Actions, Route Handlers, or Middleware.

import { unstable_after as after } from 'next/server';
import { log } from '@/app/utils';
 
export default function Layout({ children }) {
  // Secondary task
  after(() => {
    log();
  });
 
  // Primary task
  return <>{children}</>;
}

どうやって実装してんだろ...

hajimism

AsyncLocalStorageか

hajimism