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
73
Next.js App Router登場後の話
sunnyone
March 13, 2024
Tweet
Share
More Decks by sunnyone
See All by sunnyone
開発者とのコミュニケーションのはじめかた
sunnyone
0
9
概念モデル→論理モデルで気をつけていること
sunnyone
3
370
印象に残ったLLMの使い方5選
sunnyone
0
21
シンプルじゃないテーブルの見つけ方
sunnyone
1
350
はやい開発のためのJSONデータ型の活用
sunnyone
0
160
フロントエンドトレンドのふりかえりと事業に合わせた選択
sunnyone
0
110
メタプログラミングとは
sunnyone
0
2.4k
RustからPythonを呼び出す
sunnyone
1
4.5k
PowerShellでRazorテンプレートエンジンを使ってみた
sunnyone
0
2.7k
Other Decks in Technology
See All in Technology
Azure Well-Architected Framework入門
tomokusaba
1
350
JAZUG 15周年記念 × JAT「AI Agent開発者必見:"今"のOracle技術で拡張するAzure × OCIの共存アーキテクチャ」
shisyu_gaku
1
160
社内報はAIにやらせよう / Let AI handle the company newsletter
saka2jp
8
1.4k
ComposeではないコードをCompose化する case ビズリーチ / DroidKaigi 2025 koyasai
visional_engineering_and_design
0
110
AWS Control Tower に学ぶ! IAM Identity Center 権限設計の第一歩 / IAM Identity Center with Control Tower
y___u
0
110
小学4年生夏休みの自由研究「ぼくと Copilot エージェント」
taichinakamura
0
640
Reflections of AI: A Trilogy in Four Parts (GOTO; Copenhagen 2025)
ondfisk
0
110
ACA でMAGI システムを社内で展開しようとした話
mappie_kochi
1
310
カンファレンスに託児サポートがあるということ / Having Childcare Support at Conferences
nobu09
1
530
GoでもGUIアプリを作りたい!
kworkdev
PRO
0
130
これがLambdaレス時代のChatOpsだ!実例で学ぶAmazon Q Developerカスタムアクション活用法
iwamot
PRO
6
970
「使い方教えて」「事例教えて」じゃもう遅い! Microsoft 365 Copilot を触り倒そう!
taichinakamura
0
340
Featured
See All Featured
The Invisible Side of Design
smashingmag
302
51k
Faster Mobile Websites
deanohume
310
31k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
How to Think Like a Performance Engineer
csswizardry
27
2k
How GitHub (no longer) Works
holman
315
140k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Mobile First: as difficult as doing things right
swwweet
224
10k
How STYLIGHT went responsive
nonsquared
100
5.8k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Building Adaptive Systems
keathley
43
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