Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Next.js App Router登場後の話
Search
sunnyone
March 13, 2024
Technology
0
53
Next.js App Router登場後の話
sunnyone
March 13, 2024
Tweet
Share
More Decks by sunnyone
See All by sunnyone
シンプルじゃないテーブルの見つけ方
sunnyone
1
270
はやい開発のためのJSONデータ型の活用
sunnyone
0
110
フロントエンドトレンドのふりかえりと事業に合わせた選択
sunnyone
0
90
メタプログラミングとは
sunnyone
0
2.1k
RustからPythonを呼び出す
sunnyone
1
4.2k
PowerShellでRazorテンプレートエンジンを使ってみた
sunnyone
0
2.5k
Other Decks in Technology
See All in Technology
ITエンジニアとして知っておいてほしい、電子メールという大きな穴
logica0419
2
300
Slackbot × RAG で実現する社内情報検索の最適化
howdy39
1
170
Perlで始めるeBPF: 自作Loaderの作り方 / Getting started with eBPF in Perl_How to create your own Loader
takehaya
1
180
RAGの性能を評価しよう
kurahara
1
280
MLOpsの「あるある」課題の解決と、そのためのライブラリgokart
mski_iksm
1
150
LINEヤフー新卒採用 コーディングテスト解説 実装問題編
lycorp_recruit_jp
1
12k
Create Inquiry via Bedrock / 生成 AI で問い合わせ品質は変わるのか?思いついてぱっと作ったものを供養してみる
kazzpapa3
1
200
【shownet.conf_】AI技術とUX監視の応用でShowNetの基盤を支えるモニタリングシステム
shownet
PRO
0
270
10Xでのデータ基盤の変遷とこれから: データマネジメントのリアル 〜BtoB企業3社の歩みとこれから〜
10xinc
6
1.2k
FastAPIでのasync defとdefの使い分け
takashi1029
6
1.8k
AWSへのNIST SP800-171管理策 導入に向けての整備/20240930 Mitsutoshi Matsuo
shift_evolve
0
150
ORM と向き合う
hoto17296
7
5.9k
Featured
See All Featured
Web Components: a chance to create the future
zenorocha
310
42k
It's Worth the Effort
3n
183
27k
Agile that works and the tools we love
rasmusluckow
327
21k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
25
640
The Language of Interfaces
destraynor
154
24k
Infographics Made Easy
chrislema
239
18k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
Building a Scalable Design System with Sketch
lauravandoore
459
32k
Documentation Writing (for coders)
carmenintech
65
4.3k
Atom: Resistance is Futile
akmur
261
25k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
Transcript
Next.js App Router 登場後の話 〜React Server Components 後に選択肢がどう 変わったか〜 1
今日お話すること フロントエンド周辺のエンジニア向けに以下の話をします フロントエンドトレンドふりかえり Next.js App Router 後のフロントエンド状況 使用感を踏まえつつ紹介 2
自己紹介 今井 陽一 Web アプリケーションエンジニア toC アプリケーションや業務アプリケーションなどフロントエン ド中心に開発 Headless CMS
の開発者としてフロントエンド基盤構築やパフォ ーマンスチューニングも 3
フロントエンドトレンドふりかえり サーバサイドテンプレート handlebars, JSP, erb, etc... SPA(2015 年頃) AngularJS, React,
Vue, etc... SSR フレームワーク(2018 年頃) Nuxt.js, Next.js, etc... React Server Components (RSC) 後のいま(2023 年頃) 今日のテーマ 4
2023/5 のスライド → その後どうなったか? 5
世界は3 つに分かれ、混沌を極めていた SPA向上派 SSR進化派 HTML乗っかり派 6
SSR 進化派 旧来の( 狭義の)SSR の課題を解決 ブラウザ肩代わりの延長線からサーバらしい実装を書きやすく どうしてもチューニングできなかった領域に手を入れられる 候補 Next.js App
Router ( 汎用系) Astro ( サイト特化系) Hono ( 進化が逆方向ではあるが) 7
Next.js App Router 使用感 SPA の境界線に縛られにくくなった cache 周りが未成熟 Vercel も改善中
add experimental client router cache config https://github.com/vercel/next.js/pull/62856 データフェッチの自由度向上は状況によっては便利 例:DB アクセス 8
SPA 向上派 SPA の延長線上で実装をeasy にしていく 候補 Remix Tanstack ( 多分)
9
Remix SPA Mode がGA に Remix の静的ファイル配信で使えるモードがGA に https://remix.run/docs/en/main/future/spa-mode React
Router ( =Remix 配下) on rails なイメージ 10
HTML 乗っかり派 js ではなくHTML にメタ情報的に記述することで動的な変化を実現 「古き良き」バックエンドHTML 生成の世界 「フロントエンド疲れ」の人を煽るスタイル 候補 htmx
Hotwire 11
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
まとめ RSC 以後選択肢によるブレが広くなった 目的・背景に合わせた選択が重要 13