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
69
Next.js App Router登場後の話
sunnyone
March 13, 2024
Tweet
Share
More Decks by sunnyone
See All by sunnyone
印象に残ったLLMの使い方5選
sunnyone
0
14
シンプルじゃないテーブルの見つけ方
sunnyone
1
340
はやい開発のためのJSONデータ型の活用
sunnyone
0
150
フロントエンドトレンドのふりかえりと事業に合わせた選択
sunnyone
0
110
メタプログラミングとは
sunnyone
0
2.3k
RustからPythonを呼び出す
sunnyone
1
4.4k
PowerShellでRazorテンプレートエンジンを使ってみた
sunnyone
0
2.7k
Other Decks in Technology
See All in Technology
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
460
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
170
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
470
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
130
ゼロからはじめる採用広報
yutadayo
3
920
Claude Code に プロジェクト管理やらせたみた
unson
6
4k
Delta airlines Customer®️ USA Contact Numbers: Complete 2025 Support Guide
deltahelp
0
690
Backlog ユーザー棚卸しRTA、多分これが一番早いと思います
__allllllllez__
1
150
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
130k
Lazy application authentication with Tailscale
bluehatbrit
0
210
敢えて生成AIを使わないマネジメント業務
kzkmaeda
2
440
What’s new in Android development tools
yanzm
0
310
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Code Reviewing Like a Champion
maltzj
524
40k
The Pragmatic Product Professional
lauravandoore
35
6.7k
A better future with KSS
kneath
238
17k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Unsuck your backbone
ammeep
671
58k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
How STYLIGHT went responsive
nonsquared
100
5.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
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