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
レバレジーズTechアカウント
December 20, 2023
Technology
3
340
Next.js App Routerによる 次世代のフロントエンド開発
## 技術
React, Next.js, App Router, フロントエンド, ハイドレーション, CSR, SSR, PPR, Server Component, Server Action
レバレジーズTechアカウント
December 20, 2023
Tweet
Share
More Decks by レバレジーズTechアカウント
See All by レバレジーズTechアカウント
デザインシステム基盤構築実践
leveragestech
1
2k
荒廃したテックブログの再生_技術広報LT大会
leveragestech
4
5.5k
文系大学生と学び考える開発生産性
leveragestech
1
27
「マイクロサービスアーキテクチャ」と「アーキテクチャ特性」で読み解くレバテックのこれまでとこれから
leveragestech
0
50
社内共通ルールを値オブジェクトにして社内ライブラリとして運用してみた話
leveragestech
7
2.9k
Effect-TSを利用した副作用を分離する設計について
leveragestech
0
850
マネジメント未経験の脳筋が開発チームのリーダーになって感じた苦悩と学び
leveragestech
0
82
モノリス改善史~運用改善とバージョンアップの軌跡~
leveragestech
0
28
CREって何? CREが生まれた背景と、自社の事例
leveragestech
0
54
Other Decks in Technology
See All in Technology
IaCジェネレーターとBedrockで詳細設計書を生成してみた
tsukasa_ishimaru
4
930
いいたいことちゃんという
tkengo
0
250
LayerXにおけるLLMプロダクト開発の今までとこれから
layerx
PRO
4
790
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Musicを例に~
otanet
0
320
Android Target SDK 35 (Android 15) 対応の概要
akkie76
0
170
Max out Local LLM in Challenging Environments
sashimimochi
2
190
KubeConにproposalを送りたい人へのアドバイス
sat
PRO
3
280
【SORACOM UG 東海】あらゆるモノがつながる社会へ、IoT と SORACOM
soracom
PRO
1
160
社内アプリで Cloudflare D1を プロダクト運用してみた体験談(Tokyo)
haochenx
0
130
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
0
1.9k
Cloud Service Mesh に触れ合う
phaya72
1
270
Handling focus in 2024
tahia910
0
340
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
320
37k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
0
20
The MySQL Ecosystem @ GitHub 2015
samlambert
244
12k
The Brand Is Dead. Long Live the Brand.
mthomps
49
29k
Debugging Ruby Performance
tmm1
70
11k
Build The Right Thing And Hit Your Dates
maggiecrowley
25
2k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
The Invisible Side of Design
smashingmag
294
49k
Statistics for Hackers
jakevdp
790
220k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
A better future with KSS
kneath
231
16k
Transcript
Next.js App Routerによる 次世代のフロントエンド開発 レバテック開発部 堀内 達也
| © Leverages inc. 2 自己紹介 • 所属 ◦ ITRプロダクト開発グループ •
出身 ◦ 川崎横浜あたり • 趣味 ◦ 邦ロック、漫画、テニス • マイブーム ◦ 毎日カレー生活
| © Leverages inc. 3 Agenda • はじめに • React /
Nextの変化 ◦ これまでのReact / Next ◦ これからのReact / Next • 進化したこと ◦ データ取得 ◦ データ更新 • まとめ
| © Leverages inc. 4 Agenda • はじめに • React /
Nextの変化 ◦ これまでのReact / Next ◦ これからのReact / Next • 進化したこと ◦ データ取得 ◦ データ更新 • まとめ
はじめに
| © Leverages inc. 6 React / Next はじめに UIを簡単に構築するためのJavaScriptライブラリ React
Reactのフレームワーク Next
| © Leverages inc. 7 ざっくりフロントエンド史 はじめに サーバーでUIを生成し、クライアントは表示するのみ
| © Leverages inc. 8 ざっくりフロントエンド史 はじめに サーバーでUIを生成し、クライアントは表示するのみ サーバーで大部分のUIを生成し、一部クライアントで動かす ⇨ サーバーとクライアントは別技術(PHP
+ JavaScript 等) 動きのあるUI作りたい!
| © Leverages inc. 9 ざっくりフロントエンド史 はじめに サーバーはJSONのみを返し、クライアントでUIを生成する ⇨ React や
Vue など クライアントに技術や実装寄せたい!
| © Leverages inc. 10 ざっくりフロントエンド史 はじめに サーバーはJSONのみを返し、クライアントでUIを生成する ⇨ React や
Vue など サーバーでHTMLを生成し、 クライアントでJavaScriptアプリとして再構築する ⇨ Next や Nuxt など クライアントに技術や実装寄せたい! クライアントだけだとパフォーマンスとかしんどい!
| © Leverages inc. 11 結論 はじめに これからのフロントエンド、 もっとサーバーサイドで処理しよう!!!
| © Leverages inc. 12 Agenda • はじめに • React /
Nextの変化 ◦ これまでのReact / Next ◦ これからのReact / Next • 進化したこと ◦ データ取得 ◦ データ更新 • まとめ
これまでのReact / Next
| © Leverages inc. 14 React これまでのReact / Next UIすべてをクライアント上のJavaScriptで作る
| © Leverages inc. 15 画面表示までの処理の流れ React 1. クライアントにJavaScriptのリソースを送信する 2. レンダリングしてDOMに反映する
| © Leverages inc. 16 1. クライアントにJavaScriptのリソースを送信する React コンポーネント クライアント サーバー
JavaScript
| © Leverages inc. 17 2. レンダリングしてDOMに反映する React コンポーネント クライアント レンダリング
サーバー JavaScript DOM
| © Leverages inc. 18 問題点 React コンポーネント クライアント レンダリング サーバー
JavaScript DOM レンダリング完了 までページがない
| © Leverages inc. 19 Next(SSR) これまでのReact / Next HTMLをサーバー側で生成しておくことで、 パフォーマンスを向上させる
| © Leverages inc. 20 処理の流れ Next 1. サーバー側でレンダリングを行い、HTMLを生成する 2. 生成した
HTML を DOM に反映させる 3. ハイドレーションを行う
| © Leverages inc. 21 1. サーバー側で全体をレンダリングし、HTMLを生成する Next コンポーネント クライアント HTML
レンダリング サーバー
| © Leverages inc. 22 2. 生成したHTMLをDOMに反映させる Next コンポーネント クライアント HTML
レンダリング サーバー JavaScript DOM ページ表示
| © Leverages inc. 23 3. ハイドレーションを行う Next コンポーネント クライアント HTML
レンダリング サーバー JavaScript DOM レンダリング ハイドレーション DOM ページ完成
| © Leverages inc. 24 問題点 Next インタラクティブにする必要ないコンポーネントもある、、 全部のJSをクライアントに渡す必要あるの、、?
これからのReact / Next
| © Leverages inc. 26 React これからのReact / Next 全部のJSをクライアントに渡す必要あるの、、? サーバーで完結できることは完結させたい、、
| © Leverages inc. 27 React これからのReact / Next サーバーコンポーネント クライアントコンポーネント
React Server Component の登場 コンポーネントをサーバーコンポーネントとクライアントコンポーネントに分ける
| © Leverages inc. 28 React Server Component React サーバーコンポーネント クライアントコンポーネント
サーバー側でレンダリングされるコンポーネント(NEW!!!) クライアントに配信されない
| © Leverages inc. 29 React Server Component React サーバーコンポーネント クライアントコンポーネント
クライアント側でレンダリングされるコンポーネント 実質これまでのコンポーネントと同じ
| © Leverages inc. 30 処理の流れ React 1. サーバーでサーバーコンポーネントをレンダリングする 2. 生成されたHTMLとクライアントコンポーネントのJavaScriptを
クライアントに送信し、レンダリングする
| © Leverages inc. 31 1. サーバーでサーバーコンポーネントをレンダリングする React サーバー コンポーネント クライアント
コンポーネント クライアント HTML クライアント コンポーネント レンダリング サーバー
| © Leverages inc. 32 2. HTMLとJavaScriptをクライアントに送信し、レンダリングする React サーバー コンポーネント クライアント
コンポーネント クライアント HTML クライアント コンポーネント レンダリング DOM サーバー HTML JavaScript レンダリング
| © Leverages inc. 33 新旧比較 React サーバー コンポーネント クライアント コンポーネント
クライアント HTML クライアント コンポーネント レンダリング DOM サーバー HTML JavaScript レンダリング 旧 新 クライアント コンポーネント DOM サーバー JavaScript レンダリング
| © Leverages inc. 34 Next : App Router これからのReact /
Next React Server Component と SSR の組み合わせ サーバーコンポーネントはサーバーサイドで完成される クライアントコンポーネントのみ、ハイドレーションする
| © Leverages inc. 35 処理の流れ Next 1. サーバーでサーバーコンポーネントをレンダリングする 2. サーバーでクライアントコンポーネントをレンダリングする
3. サーバーコンポーネントとクライアントコンポーネントの HTMLをクライアント側に送信し、DOMに反映させる 4. クライアントコンポーネントのハイドレーションを行う
| © Leverages inc. 36 1. サーバーでサーバーコンポーネントをレンダリングする Next サーバー コンポーネント クライアント
コンポーネント クライアント HTML クライアント コンポーネント レンダリング サーバー
| © Leverages inc. 37 2. サーバーでクライアントコンポーネントをレンダリングする Next サーバー コンポーネント クライアント
コンポーネント クライアント HTML クライアント コンポーネント HTML レンダリング レンダリング サーバー
| © Leverages inc. 38 3. HTMLをクライアント側に送信し、DOMに反映させる Next サーバー コンポーネント クライアント
コンポーネント クライアント HTML クライアント コンポーネント HTML レンダリング レンダリング JavaScript DOM サーバー クライアント コンポーネントだけ
| © Leverages inc. 39 4. クライアントコンポーネントのハイドレーションを行う Next サーバー コンポーネント クライアント
コンポーネント クライアント HTML クライアント コンポーネント HTML レンダリング レンダリング JavaScript DOM DOM レンダリング ハイドレーション サーバー
| © Leverages inc. 40 補足 Next サーバーコンポーネントと クライアントコンポーネントで分けて見てみる
| © Leverages inc. 41 サーバーコンポーネント Next サーバー コンポーネント クライアント HTML
HTML レンダリング DOM サーバー
| © Leverages inc. 42 クライアントコンポーネント Next クライアント コンポーネント クライアント クライアント
コンポーネント HTML レンダリング JavaScript DOM DOM レンダリング ハイドレーション サーバー
| © Leverages inc. 43 再び全体像 Next サーバー コンポーネント クライアント コンポーネント
クライアント HTML クライアント コンポーネント HTML レンダリング レンダリング JavaScript DOM DOM レンダリング ハイドレーション サーバー
| © Leverages inc. 44 新旧比較 Next 旧 新 サーバー コンポーネント
クライアント コンポーネント HTML クライアント コンポーネント HTML レンダリング レンダリング JavaScript DOM DOM レンダリング ハイドレーション クライアント サーバー コンポーネント HTML レンダリング JavaScript DOM DOM レンダリング ハイドレーション クライアント サーバー
| © Leverages inc. 45 結局何がいいの? これからのReact / Next 不要なJavaScriptをクライアントに送信しなくてよい ⇨
バンドルサイズの削減によるパフォーマンス向上 サーバーで動くコンポーネントの登場で、できることが増える
| © Leverages inc. 46 結局何がいいの? これからのReact / Next 不要なJavaScriptをクライアントに送信しなくてよい ⇨
バンドルサイズの削減によるパフォーマンス向上 サーバーで動くコンポーネントの登場で、できることが増える
| © Leverages inc. 47 Agenda • はじめに • React /
Nextの変化 ◦ これまでのReact / Next ◦ これからのReact / Next • 進化したこと ◦ データ取得 ◦ データ更新 • まとめ
データ取得
| © Leverages inc. 49 データ取得 データ取得 バックエンドや外部から、 画面表示時に必要なデータを取得する方法の変化 例えば、会員一覧画面を表示する時、 会員データをバックエンドから取得して表示したい時など
| © Leverages inc. 50 これまで データ取得 getServerSideProps コンポーネント コンポーネント コンポーネント
・・・ ・・・ FETCH getServerSideProps でデータ取得する それを各コンポーネントにリレーする
| © Leverages inc. 51 これまで データ取得 getServerSideProps コンポーネント コンポーネント コンポーネント
・・・ ・・・ FETCH また、データ取得の完了を待たないと いけなかった このfetchが完了するまで UIが生成されない
| © Leverages inc. 52 これまで データ取得 getServerSideProps でデータ取得して受け渡していくしかなかった データ取得の完了を待たないといけなかった
| © Leverages inc. 53 できるようになったこと データ取得 サーバーコンポーネントを使うと、、 コンポーネントの内部でサーバー側の処理が書ける コンポーネントを非同期関数にできる
| © Leverages inc. 54 できるようになったこと データ取得 サーバーコンポーネントを使うと、、 コンポーネントの内部でサーバー側の処理が書ける コンポーネントを非同期関数にできる
| © Leverages inc. 55 内部でサーバー側の処理が書ける データ取得 コンポーネント コンポーネント コンポーネント ・・・
・・・ FETCH FETCH getServerSideProps を使わなくていい 各コンポーネントがfetchの処理を行う
| © Leverages inc. 56 これまでの書き方 データ取得 export const getServerSideProps =
async () => { const data = await fetchData() return { props: { data } } } export default function Page({ data }) { return <OldComponent data={data} /> } export const OldComponent = ({ data }) => { return ( <div>{ data }</div> ) } ここでfetchする必要があった
| © Leverages inc. 57 これからの書き方 データ取得 export const ServerComponent =
async () => { const data = await fetchData() return ( <div>{ data }</div> ) } コンポーネントでfetchできる!!!
| © Leverages inc. 58 できるようになったこと データ取得 サーバーコンポーネントを使うと、、 コンポーネントの内部でサーバー側の処理が書ける コンポーネントを非同期関数にできる
| © Leverages inc. 59 非同期関数にできる データ取得 ComponentA (表示中) ComponentB (表示中)
ComponentC (ローディング画面) Component A (表示中) ComponentB (表示中) ComponentC (表示中) C のデータ 取得完了後 Suspense と組み合わせることで、 コンポーネントごとに非同期に表示できる
| © Leverages inc. 60 Suspense データ取得 export default async function
Home() { return ( <div> <ComponentA /> <ComponentB /> <Suspense fallback={<Loading />}> <ComponentC /> </Suspense> </div> ); } export const ComponentC = async () => { const data = await fetchData() return ( <div>{ data }</div> ) } 簡単にLoading画面が表示できる 非同期関数
| © Leverages inc. 61 これまでの課題が解決された データ取得 サーバーコンポーネントで解決 getServerSideProps でデータ取得して受け渡していくしかなかった データ取得の完了を待たないといけなかった
データ更新
| © Leverages inc. 63 データ更新 データ更新 フォームのSubmit時など、 ユーザ操作によるデータ更新を行う方法の変化
| © Leverages inc. 64 これまで データ更新 クライアント サーバーのAPI データ更新 fetch
サーバーサイドに作ったAPIのエンドポイントを叩き、 データ更新をする必要があった
| © Leverages inc. 65 これまで データ更新 export const OldForm =
() => { const onSubmit = () => { fetch("/api/submit", { method: "POST", body: "hoge", }) } return ( <form onSubmit={onSubmit}> <button type="submit">送信</button> </form> ) } export default function handler(req, res) { // POST処理 } クライアント サーバーのAPI fetchしていた
| © Leverages inc. 66 Server Actions データ更新 クライアントサイドでサーバーサイドの関数が実行できる機能 APIを用意する必要がなく、そのまま関数を実行するだけでよい Next14系でstableに!
| © Leverages inc. 67 Server Actions データ更新 クライアント Server Actions
データ更新 Server Actionsを使って、サーバーにAPIを立てずに データの更新が可能になった
| © Leverages inc. 68 Server Actions データ更新 export default function
Page() { async function postData() { 'use server' // POST処理 } return ( <form action={postData}> <button type="submit">送信 </button> </form> ) } サーバー側の処理を クライアントから呼び出せる サーバー側の処理
| © Leverages inc. 69 Agenda • はじめに • React /
Nextの変化 ◦ これまでのReact / Next ◦ これからのReact / Next • 進化したこと ◦ データ取得 ◦ データ更新 • まとめ
まとめ
| © Leverages inc. 71 まとめ まとめ • React Server Component
の登場 ◦ サーバー側でのみ動くコンポーネント ◦ これをSSRで動かすのが App Router • データの取得や更新がより簡単になった ◦ サーバー側の処理が扱いやすい状態になっている ◦ Server Actions や Suspense の利用でより便利に
| © Leverages inc. 72 結論 まとめ これからのフロントエンド、 もっとサーバーサイドで処理しよう!!!