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
23
Next.js App Router登場後の話
sunnyone
March 13, 2024
Tweet
Share
More Decks by sunnyone
See All by sunnyone
はやい開発のためのJSONデータ型の活用
sunnyone
0
81
フロントエンドトレンドのふりかえりと事業に合わせた選択
sunnyone
0
76
メタプログラミングとは
sunnyone
0
2k
RustからPythonを呼び出す
sunnyone
1
4k
PowerShellでRazorテンプレートエンジンを使ってみた
sunnyone
0
2.3k
Other Decks in Technology
See All in Technology
地理空間データ可視化・解析・活用ソリューション Pacific Spatial Solutions (PSS)
pacificspatialsolutions
0
300
Google Cloud の AI を支える裏側のインフラを垣間見る!
maroon1st
0
360
生成AIの変革の時代に、直近1年で直面した課題とその解決策
ktc_wada
0
350
GraphQL 成熟度モデルの紹介と、プロダクトに当てはめた事例 / GraphQL maturity model
mh4gf
7
1.4k
開発パフォーマンスを最大化するための開発体制
ham0215
2
450
「スニダン」開発組織の構造に込めた意図 ~組織作りはパッションや政治ではない!~
rinchsan
3
570
BPStudyの200回を中心にIT業界を振り返る。そしてこれから
haru860
2
150
KubeConにproposalを送りたい人へのアドバイス
sat
PRO
3
260
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
340
本当のAWS基礎
toru_kubota
0
530
web-application-security
matsuihidetoshi
0
170
IaCジェネレーターとBedrockで詳細設計書を生成してみた
tsukasa_ishimaru
3
290
Featured
See All Featured
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
The Cost Of JavaScript in 2023
addyosmani
16
3.9k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
20
1.9k
The Invisible Side of Design
smashingmag
294
49k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
17
1.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
187
16k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
40
4.4k
Clear Off the Table
cherdarchuk
84
310k
Faster Mobile Websites
deanohume
299
30k
Agile that works and the tools we love
rasmusluckow
325
20k
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