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 Leverages
December 20, 2023
Technology
1
570
Next.js App Routerによる 次世代のフロントエンド開発
## 技術
React, Next.js, App Router, フロントエンド, ハイドレーション, CSR, SSR, PPR, Server Component, Server Action
Tech Leverages
December 20, 2023
Tweet
Share
More Decks by Tech Leverages
See All by Tech Leverages
データエンジニアとしてのキャリア戦略 〜これからの挑戦〜
leveragestech
0
61
ドメインロジックで考えるテスタビリティ
leveragestech
1
290
専門領域に特化したチームの挑戦
leveragestech
0
400
もう一度、 事業を支えるシステムに。
leveragestech
6
3.5k
ログに対する誤解とベストプラクティス
leveragestech
0
76
We Are PdE!! 〜高価値なプロダクトを作れるようになるための勉強会〜
leveragestech
1
600
Prisma Typed SQLのススメ
leveragestech
1
170
今日から始める技術的負債の解消
leveragestech
4
550
ドキュメントとの付き合い方を考える
leveragestech
3
220
Other Decks in Technology
See All in Technology
ハイテク休憩
sat
PRO
2
140
第3回Snowflake女子会_LT登壇資料(合成データ)_Taro_CCCMK
tarotaro0129
0
180
alecthomas/kong はいいぞ / kamakura.go#7
fujiwara3
1
300
非機能品質を作り込むための実践アーキテクチャ
knih
3
980
watsonx.ai Dojo #5 ファインチューニングとInstructLAB
oniak3ibm
PRO
0
160
UI State設計とテスト方針
rmakiyama
2
450
バクラクのドキュメント解析技術と実データにおける課題 / layerx-ccc-winter-2024
shimacos
2
1.1k
ゼロから創る横断SREチーム 挑戦と進化の軌跡
rvirus0817
2
260
1等無人航空機操縦士一発試験 合格までの道のり ドローンミートアップ@大阪 2024/12/18
excdinc
0
150
オプトインカメラ:UWB測位を応用したオプトイン型のカメラ計測
matthewlujp
0
170
20241214_WACATE2024冬_テスト設計技法をチョット俯瞰してみよう
kzsuzuki
3
440
ガバメントクラウドのセキュリティ対策事例について
fujisawaryohei
0
530
Featured
See All Featured
Optimizing for Happiness
mojombo
376
70k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.5k
Mobile First: as difficult as doing things right
swwweet
222
9k
How to Think Like a Performance Engineer
csswizardry
22
1.2k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
48
2.2k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.4k
GraphQLとの向き合い方2022年版
quramy
44
13k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.9k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.3k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Writing Fast Ruby
sferik
628
61k
Producing Creativity
orderedlist
PRO
341
39k
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 結論 まとめ これからのフロントエンド、 もっとサーバーサイドで処理しよう!!!