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
440
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
開発と事業を繋ぐ!SREのオブザーバビリティ戦略 ~ Developers Summit 2024 Summer ~
leveragestech
0
640
FourKeysだけで開発生産性 は測れないと気付くまでの話
leveragestech
1
64
経営層を開発者体験向上にコミットさせる方法論 ~ Developer eXperience Day 2024 ~
leveragestech
2
150
いつPlatform Engineeringを始めるべきか?〜レバテックのケーススタディ〜 Platform Engineering Kaigi 2024
leveragestech
4
1.4k
TiDBは銀の弾丸になるのか? ~ レバテックの課題と新たな挑戦 ~ TiDB User Day 2024
leveragestech
2
520
大規模なORMバージョンアップ作業を 乗り越えた話
leveragestech
1
820
ももくり3年レコメンドエンジン5年
leveragestech
1
950
膨大なデータ活用のためのAmazon QuickSightを使った 技術構成
leveragestech
1
690
『VoLT』レバテックの デザインシステム ~電光石火の構築プロセスと目指す未来~
leveragestech
2
820
Other Decks in Technology
See All in Technology
データ分析を支える技術 生成AI再入門
ishikawa_satoru
0
380
CTOから見た事業開発とプロダクト開発 / My Perspective on Business and Product Development as CTO
keisuke69
4
960
E2Eテスト自動化プラットフォームにおけるAIの活用
shift_evolve
0
190
【基調講演】変える、今ここから ― IoTとAIで紡ぐ未来
soracom
PRO
0
320
データベース研修 分析向けSQL入門【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
110
AWSサービスメニュー開発をしていてAWSを好きだ!と感じた瞬間
toru_kubota
0
130
Luupの開発組織におけるインシデントマネジメントの変遷 ver.RoadtoSRENEXT2024
grimoh
1
270
JBUG岡山 #6 WordCamp男木島の チームビルディング
takeshifurusato
0
150
Github Actions 로 Android 팀의 효율성 극대화
hadonghyun
0
160
AWSで”最小権限の原則”を実現するための考え方 /20240722-ssmjp-aws-least-privilege
opelab
10
4.4k
ゆめみのアクセシビリティの現在地と今後
ryokatsuse
3
290
LLMアプリケーションの評価の実践と課題 ~PharmaXにおける今後の展望~
pharma_x_tech
2
170
Featured
See All Featured
Happy Clients
brianwarren
94
6.6k
Web Components: a chance to create the future
zenorocha
307
41k
The Straight Up "How To Draw Better" Workshop
denniskardys
229
130k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
Building Your Own Lightsaber
phodgson
101
5.9k
How to train your dragon (web standard)
notwaldorf
79
5.5k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
149
45k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
Navigating Team Friction
lara
181
13k
Building Applications with DynamoDB
mza
89
5.8k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.8k
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 結論 まとめ これからのフロントエンド、 もっとサーバーサイドで処理しよう!!!