「Unleash Next.js - LayerX Web Frontend Night」に参加してきました

勉強会メモ

Next.js のページ遷移を全力で止める

「保存されません」ダイアログ

  • 変更の保存漏れを防ぐUI
    • 勝手に保存するパターン
    • ダイアログで確認するパターン
  • 戻る/進むでもちゃんと出す
  • Nextでやるのは大変
  • Navigation Guardというライブラリを作った

ページを止めるハック

  • ページ遷移
    • リロードやリンクによる遷移
      • beforeunload
    • SPAのアプリ内リンク(HistoryAPIによる書き換え)
      • router.pushで止めたい
      • Context経由でrouterを書き換える
    • 戻る/進む
      • HistoryAPIでURL書き換わってからpopstateが飛んでくる
      • popstateでhistory.goで戻るを戻して
        • stopImmediatePropagationで止める
      • URLが書き換わるのを戻すためにpushStateを上書き

Turbopack Today

Turbopack

  • Rustで書かれたバンドラー
  • weboackの後継
    • webpack pluginの互換はない
  • swc/LightningCSS
  • webpackのパフォーマンスの課題を改善する中で新しく作られたもの
    • メモリで持ってたものをファイルに書き出して２回目から高速に
  • Turbo Engine
    • Function単位のキャッシュ
      • I/Oが同じならキャッシュを使う
    • チャンクをリモートにあげてリモートキャッシュ
  • incremental buildと最適化は対立する
    • devはサイズより速さ
    • prodは速さよりサイズの最適化
    • 最適化するには全体が見ないといけない
      • incremental buikdとは逆
  • 最適化
    • Tree Shaking
      • 使われているexportだけ残す
      • 全体を見ないと判断できない
    • Export Manging
      • exportsをa,bなどに置換する
      • 呼び出し先とかにも影響がある
  • scriptタグをたくさん作りすぎない仕組み
    • 規模が大きくなるほど速い
  • next.configでwebpackの設定たくさん書いてると移行大変

vercel/aivercel AI SDK のストリームと戯れる

  • suguruさん

AI SDK

  • npm i ai でインストールできるLLMパッケージ
  • vercel製だけどFW依存なし
  • generateTextとかgenerateObjectとか
  • createStreamableValue
    • サーバからstreamで流せる
    • ServerActionに対応してる
  • createStreamableUI

PATCH didn't work

  • Quramyさん

fetchの上書き問題

  • Nextで困ってること
    • NextのCache
    • Datadog APM連携
    • msw連携
  • それぞれfetchにパッチを当てている
    • next/datadog sdk/msw
    • これらが衝突する
  • NextのRequest Memoization
    • 同じリクエストはキャッシュを使って最適化してくれる
  • NextのDataCache
    • リクエスト間で共有されるキャッシュ
    • fetchにnextっていうオプションがでてキャッシュ時間とかタグ付けできる
  • APMと分散トレース
    • HTTPリクエストの経路を辿れる
    • traceidを仕込むことで紐づけられるようにする
      • http headerに仕込む
      • これが動かない
    • fetchを上書きして対応してる
    • 14.1.0でなおった
  • msw
    • http通信をモックするライブラリ
    • ブラウザではServiceWorker使ってるがnodeではfetchにパッチをあてている
    • サーバーコンポーネントで動かない
      • next devで最初は動くがリロードしたりすると動かなくなる
      • 修正はされたがリリースされてない