Next.js App Router登場後の話

Transcript

1. Next.js App Router 登場後の話 〜React Server Components 後に選択肢がどう 変わったか〜 1
2. 今日お話すること フロントエンド周辺のエンジニア向けに以下の話をします フロントエンドトレンドふりかえり Next.js App Router 後のフロントエンド状況 使用感を踏まえつつ紹介 2
3. 自己紹介 今井 陽一 Web アプリケーションエンジニア toC アプリケーションや業務アプリケーションなどフロントエン ド中心に開発 Headless CMS の開発者としてフロントエンド基盤構築やパフォ ーマンスチューニングも 3
4. フロントエンドトレンドふりかえり サーバサイドテンプレート handlebars, JSP, erb, etc... SPA(2015 年頃) AngularJS, React, Vue, etc... SSR フレームワーク(2018 年頃) Nuxt.js, Next.js, etc... React Server Components (RSC) 後のいま(2023 年頃) 今日のテーマ 4
5. 2023/5 のスライド → その後どうなったか？ 5
6. 世界は3 つに分かれ、混沌を極めていた SPA向上派 SSR進化派 HTML乗っかり派 6
7. SSR 進化派 旧来の( 狭義の)SSR の課題を解決 ブラウザ肩代わりの延長線からサーバらしい実装を書きやすく どうしてもチューニングできなかった領域に手を入れられる 候補 Next.js App Router ( 汎用系) Astro ( サイト特化系) Hono ( 進化が逆方向ではあるが) 7
8. Next.js App Router 使用感 SPA の境界線に縛られにくくなった cache 周りが未成熟 Vercel も改善中 add experimental client router cache config https://github.com/vercel/next.js/pull/62856 データフェッチの自由度向上は状況によっては便利 例：DB アクセス 8
9. SPA 向上派 SPA の延長線上で実装をeasy にしていく 候補 Remix Tanstack ( 多分) 9
10. Remix SPA Mode がGA に Remix の静的ファイル配信で使えるモードがGA に https://remix.run/docs/en/main/future/spa-mode React Router ( ＝Remix 配下) on rails なイメージ 10
11. HTML 乗っかり派 js ではなくHTML にメタ情報的に記述することで動的な変化を実現 「古き良き」バックエンドHTML 生成の世界 「フロントエンド疲れ」の人を煽るスタイル 候補 htmx Hotwire 11
12. htmx 開発者の目的と注意 https://twitter.com/htmx_org/status/1752570798420676679 個人的にはStimulus 程度のものの採用に留めるのがおすすめ 似た枠組みを実際に利用 あるいは整理された後発を待つのも良いのでは 実際htmz なんてのもでてきた idk man I’m just into generalizing hypermedia controls not an expert on other stuff! “ “ 12
13. まとめ RSC 以後選択肢によるブレが広くなった 目的・背景に合わせた選択が重要 13