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
Building Dashboards as a Hobby
egmc
0
410
実例で紹介するRAG導入時の知見と精度向上の勘所
yamahiro
7
2k
EM完全に理解した と思ったけど、 やっぱり何も分からなかった話 / EM Night Fukuoka #1
hirutas
0
300
IaCからAWSに入門した初心者が CloudFormationを通して考えた「AWS操作」の使い分け
maimyyym
2
550
成長をサポートするピープルマネジメントのやり方
sioncojp
9
1.4k
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Musicを例に~
otanet
0
320
Gradle Build Scanを使ってビルドのことを知ろう potatotips #87
tomorrowkey
2
160
Amplify 🩷 Bedrock 〜生成AI入門〜
minorun365
PRO
9
1.1k
Google Cloud Next '24 Recap(Cloud Run/k8s)
mokocm
0
360
競技としてのKaggle、役に立つKaggle
yu4u
7
2.4k
開発パフォーマンスを最大化するための開発体制
ham0215
7
1.2k
さらばあのボタンとは言わせない SORACOM LTE-M Button powerd by AWSをまだ使えるようにした(前編?)
miura55
0
100
Featured
See All Featured
The Language of Interfaces
destraynor
151
23k
Web Components: a chance to create the future
zenorocha
306
41k
Unsuck your backbone
ammeep
664
57k
Statistics for Hackers
jakevdp
790
220k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
We Have a Design System, Now What?
morganepeng
43
6.8k
Typedesign – Prime Four
hannesfritz
36
2.1k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Stop Working from a Prison Cell
hatefulcrawdad
267
19k
Atom: Resistance is Futile
akmur
260
25k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
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 結論 まとめ これからのフロントエンド、 もっとサーバーサイドで処理しよう!!!