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
71
Next.js App Router登場後の話
sunnyone
March 13, 2024
Tweet
Share
More Decks by sunnyone
See All by sunnyone
開発者とのコミュニケーションのはじめかた
sunnyone
0
5
概念モデル→論理モデルで気をつけていること
sunnyone
3
360
印象に残ったLLMの使い方5選
sunnyone
0
20
シンプルじゃないテーブルの見つけ方
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 SynapseからAzure Databricksへ 移行してわかった新時代のコスト問題!?
databricksjapan
0
140
生成AIを活用したZennの取り組み事例
ryosukeigarashi
0
200
SoccerNet GSRの紹介と技術応用:選手視点映像を提供するサッカー作戦盤ツール
mixi_engineers
PRO
1
170
FastAPIの魔法をgRPC/Connect RPCへ
monotaro
PRO
1
740
GC25 Recap+: Advancing Go Garbage Collection with Green Tea
logica0419
1
400
10年の共創が示す、これからの開発者と企業の関係 ~ Crossroad
soracom
PRO
1
170
Modern_Data_Stack最新動向クイズ_買収_AI_激動の2025年_.pdf
sagara
0
200
extension 現場で使えるXcodeショートカット一覧
ktombow
0
210
許しとアジャイル
jnuank
1
120
後進育成のしくじり〜任せるスキルとリーダーシップの両立〜
matsu0228
7
2.3k
Access-what? why and how, A11Y for All - Nordic.js 2025
gdomiciano
1
110
From Prompt to Product @ How to Web 2025, Bucharest, Romania
janwerner
0
120
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1032
460k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Building Adaptive Systems
keathley
43
2.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
How to train your dragon (web standard)
notwaldorf
96
6.3k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
A designer walks into a library…
pauljervisheath
209
24k
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