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 AppRouterを導入した 学びと反省
Search
井内 将俊
September 12, 2023
Programming
3
2.2k
新卒研修でNext.js AppRouterを導入した 学びと反省
2023年9月12日に登壇したThink! FRONTEND by DMM.comにて発表した資料です。
井内 将俊
September 12, 2023
Tweet
Share
More Decks by 井内 将俊
See All by 井内 将俊
業務に役立つ! ブラウザデベロッパーツールの機能紹介と活用例
iuchimasatoshi
0
360
ReactメインのチームにNext.jsを導入した道のり
iuchimasatoshi
1
2.7k
Next.js 採用の説得材料を考える
iuchimasatoshi
0
130
Other Decks in Programming
See All in Programming
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
150
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
750
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
110
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
4
6.4k
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
180
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
230
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
120
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.2k
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Unsuck your backbone
ammeep
671
58k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Typedesign – Prime Four
hannesfritz
42
2.7k
For a Future-Friendly Web
brad_frost
179
9.8k
Code Review Best Practice
trishagee
69
18k
Gamification - CAS2011
davidbonilla
81
5.3k
Agile that works and the tools we love
rasmusluckow
329
21k
Why Our Code Smells
bkeepers
PRO
337
57k
BBQ
matthewcrist
89
9.7k
Transcript
新卒研修でNext.js AppRouterを導⼊した 学びと反省 井内 将俊
© DMM.com プロフィール ❏ 所属 ❏ LC開発部 VC-グロースグループ (2023年4月新卒入社) ❏
最近のお仕事 ❏ ライブコミュニケーションサービスの配信画面UIの開発 ❏ 領域:フロントエンド ❏ 趣味:お絵描き 井内 将俊(いうち まさとし) バーチャルライブチャット配信キャラクター 2
© DMM.com イントロ ダクション 3 ❏ 新卒研修のチーム開発 ❏ 開発したアプリの簡単な説明 ❏
AppRouterと周辺技術(SSR/Next.js/RCS)の ざっくり説明 ❏ チーム開発でAppRouterを導入した反省点 ❏ ユーザーIDの保管場所 ❏ 動的ルートの静的ページ生成 ❏ まとめ・所感
© DMM.com イントロ ダクション 4 ❏ 新卒研修のチーム開発 ❏ 開発したアプリの簡単な説明 ❏
AppRouterと周辺技術(SSR/Next.js/RCS)の ざっくり説明 ❏ チーム開発でAppRouterを導入した反省点 ❏ ユーザーIDの保管場所 ❏ 動的ルートの静的ページ生成 ❏ まとめ・所感
© DMM.com 新卒研修のチーム開発 - フロントエンド - バックエンド - ネイティブアプリ -
機械学習 - ブロックチェーン - スクラム - etc… 3ヶ月以上の修行を経て.... 「Amazon Web Services、“Powered by AWS”ロゴ、[およびかかる資料で使用されるその他のAWS商標] は、米国その他の諸国に おける、Amazon.com , Inc.またはその関連会社の商標です。」 5
© DMM.com 新卒研修のチーム開発 - フロントエンド - バックエンド - ネイティブアプリ -
機械学習 - ブロックチェーン - スクラム - etc… チームを組んでアプリを開発!💪🔥 3ヶ月以上の修行を経て.... 6
© DMM.com 新卒研修のチーム開発 - 異なる技術領域が得意な4~5名の新卒チームで2.5週間かけて アプリを開発 - アプリ内容、技術選定 完全自由 7
チーム開発
© DMM.com 新卒研修のチーム開発 - 異なる技術領域が得意な4~5名の新卒チームで2.5週間かけて アプリを開発 - アプリ内容、技術選定 完全自由 -
Next.jsの新機能(AppRouter)を使ってみよう! 8 チーム開発
© DMM.com イントロ ダクション 9 ❏ 新卒研修のチーム開発 ❏ 開発したアプリの簡単な説明 ❏
AppRouterと周辺技術(SSR/Next.js/RCS)の ざっくり説明 ❏ チーム開発でAppRouterを導入した反省点 ❏ ユーザーIDの保管場所 ❏ 動的ルートの静的ページ生成 ❏ まとめ・所感
© DMM.com 開発したアプリ 社内イベントの開催/参加を一元管理することで 社内交流を促進するイベント管理アプリ 10
© DMM.com 開発したアプリ 11 手描きした マスコットキャラクター 社内イベントの開催/参加を一元管理することで 社内交流を促進するイベント管理アプリ
© DMM.com イントロ ダクション ❏ 新卒研修のチーム開発 ❏ 開発したアプリの簡単な説明 ❏ AppRouterと周辺技術(SSR/Next.js/RCS)の
ざっくり説明 ❏ チーム開発でAppRouterを導入した反省点 ❏ ユーザーIDの保管場所 ❏ 動的ルートの静的ページ生成 ❏ まとめ・所感 12
© DMM.com AppRouterとは?🤔 Next.js 13で追加された、RSCを利用した新しいルータ実装 - Next.js とは?🤔 - SSR等の多機能を簡単に実行可能にするReactのフレームワーク
- RCSとは?🤔 - React Server Components の略称 SSR(とCSR)、既存のNext.js、RSC を理解せずにAppRouterを学ぶと大 混乱... 13
© DMM.com CSRとSSR CSR:Client Side Rendering(SPA) クライアント(ブラウザ) APIサーバ - 初回に一括で取得
- クライアントのみでレンダリング - データ取得もクライアント ホスティングサーバ 14
© DMM.com CSRとSSR CSR:Client Side Rendering(SPA) クライアント(ブラウザ) APIサーバ - 初回に一括で取得
- クライアントのみでレンダリング - データ取得もクライアント - 初回読み込みが遅い... - SEOに弱い.... ホスティングサーバ 15
© DMM.com CSRとSSR SSR(Next.js) - サーバー側でも一部レンダリング - サーバー側でもデータ取得 Node.jsサーバ クライアントに任せっきりにしない!
こっちも頑張る 16 クライアント(ブラウザ) APIサーバ
© DMM.com Next.js(Pages Router)によるSSR SSR(Next.js)の例 SSRを行うには 専用の関数を用いる 17
© DMM.com RSC(React Server Components) - サーバー上でレンダリングされる新種のReactコンポーネント - useState等の状態管理やWebAPIへのアクセスはできない 18
クライアントコンポーネント - これまで通りクライアントでレンダリングされるコンポーネント 現在alpha版
© DMM.com ここまでAppRouterの前知識 19
© DMM.com AppRouterとは? • Next 13で追加された新しいルーター実装 • 今年5月に安定版になった • React
Server Component (RSC) 上に構築される • デフォルトでは全てRSC • つまり全てサーバー側でレンダリングされる これまでの(Pages Router)では基本クライアント側で レンダリングされていた RSCの概念を理解していないと大きく混乱... 20
© DMM.com サーバーコンポーネント/クライアントコンポーネント AppRouter(RSC)ではコンポーネント単位でレンダリング場所を 指定可能 サーバー側でレンダリングされる →サーバーコンポーネント (従来通り)クライアント側でレンダリングされる →クライアントコンポーネント 21
デフォルトでは全てサーバーコンポーネント
© DMM.com サーバーコンポーネント/クライアントコンポーネント AppRouter(RSC)ではコンポーネント単位でレンダリング場所を 指定可能 サーバー側でレンダリングされる →サーバーコンポーネント クライアント側でレンダリングされる →クライアントコンポーネント 22
デフォルトでは全てサーバーコンポーネント サーバーコンポーネント クライアントコンポーネント
© DMM.com サーバーコンポーネントのメリット - サーバーコンポーネントを増やせばクライアントへ送られるバンドルサ イズが削減できる - サーバーコンポーネントでデータ取得を行えば、データが埋め込まれた HTMLをクライアントへ送られデータ表示が高速になる -
クライアントのCPU使用量削減 23
© DMM.com 可能な限り サーバーコンポーネントを使うぞ!😆 24
© DMM.com クライアントコンポーネントだらけ...😨 AppRouterの機能も活用しきれてない😭 25
© DMM.com イントロ ダクション ❏ 新卒研修のチーム開発 ❏ 開発したアプリの簡単な説明 ❏ AppRouterと周辺技術(SSR/Next.js/RCS)の
ざっくり説明 ❏ チーム開発でAppRouterを導入した反省点(改善点) ❏ ユーザーIDの保管場所 ❏ 動的ルートの静的ページ生成 ❏ まとめ・所感 26
© DMM.com AppRouter導入反省点 - ユーザーIDをクライアントの状態管理のみで保管してしまった - GenerateStaticParamsの機能を利用できてなかった 27
© DMM.com AppRouter導入反省点 - ユーザーIDをクライアントの状態管理のみで保管してしまった - GenerateStaticParamsの機能を利用できてなかった 28
© DMM.com ユーザーIDの保管 ・ユーザーID ログインしているユーザーのID ・Jotai 状態管理ライブラリ Jotaiを用いてユーザーIDを保管し、何処のコンポーネントでも ユーザーIDを用いてユーザー固有のデータを取得できるように実装 29
© DMM.com ユーザーIDの保管 ・ユーザーID ログインしているユーザーのID ・Jotai 状態管理ライブラリ Jotaiを用いてユーザーIDを保管し、何処のコンポーネントでも ユーザーIDを用いてユーザー固有のデータを取得できるように実装 30
Jotaiを使わずにCookieに保存していればもっと サーバー側で取得可能なデータを増やせたのに....😭
© DMM.com クライアントでの状態管理とcookie クライアントの状態管理(Redux, Recoil, Jotai, localStorage) - サーバーコンポーネントでは値が読み取れない... Cookie
- ブラウザに保存されるデータ - cookieリクエスト毎にサーバーに送られる - サーバーコンポーネントでも値が読み取れる! 31
© DMM.com クライアントでの状態管理とcookie クライアントの状態管理(Redux, Recoil, Jotai, localStorage) - サーバーコンポーネントでは値が読み取れない... Cookie
- ブラウザに保存されるデータ - cookieリクエスト毎にサーバーに送られる - サーバーコンポーネントでも値が読み取れる! 32 Next.jsでも全く同様 △ AppRouter導入の反省 ⭕ SSR導入の反省
© DMM.com サーバーコンポーネントで ユーザーIdが取得できて嬉しい例 33
© DMM.com cookieによるユーザーID取得のメリット サーバーコンポーネントで取得できるデータが増える 34
© DMM.com cookieによるユーザーID取得のメリット 35
© DMM.com cookieによるユーザーID取得のメリット 誰が取得しても同じ (サーバー側で取得) ユーザーIDを用いてユーザーに紐 づいたイベントを取得 (クライアント側で取得) 36
© DMM.com cookieによるユーザーID取得のメリット 誰が取得しても同じ (サーバー側で取得) ユーザーIDを用いてユーザーに紐 づいたイベントを取得 (クライアント側で取得) CookieにユーザーIdを入れれば全てサーバー側で取得可能 37
© DMM.com cookieを用いていない挙動 38
© DMM.com cookieを用いていない挙動 39
© DMM.com cookieを用いていない挙動 40
© DMM.com cookieでユーザーIDを管理した挙動 41 初回表示から全データ取得できてる...!
© DMM.com cookieでユーザーIDを管理した挙動 42 Cookieの仕組みを ちゃんと理解していれば...😭
© DMM.com AppRouter導入反省点 - ユーザーIDをクライアントの状態管理のみで保管してしまった - GenerateStaticParamsの機能を利用できてなかった 43
© DMM.com GenerateStaticParams - "動的”ルーティングを使用し、ビルド時に”静的”なルートを生成 - Pages RouterのgetStaticParamsに近い機能 - getStaticParams:ビルド時にページを作成するSSGを行う機能
- つまりSSG(Static Site Generation)ができる機能! 44
© DMM.com GenerateStaticParams - パス部分が動的に変化する ルーティング 45 アクセスを検知したら、パスから固有のデータ を取得しサーバー側でレンダリング
© DMM.com GenerateStaticParams - パス部分が動的に変化する ルーティング 46 アクセスを検知したら、パスから固有のデータ を取得しサーバー側でレンダリング ビルド時に静的レンダリング(SSG)
GenerateStaticParams
© DMM.com 使ってなかった場合 47 - パス情報からイベント詳細を取得するAPIを叩き、 取得したイベントデータを使用してページを表示
© DMM.com 使ってなかった場合 48 - パス情報からイベント詳細を取得するAPIを叩き、 取得したイベントデータを使用してページを表示
© DMM.com 使ってなかった場合 49 - パス情報からイベント詳細を取得するAPIを叩き、 取得したイベントデータを使用してページを表示
© DMM.com 使ってた場合 50 事前にイベントデータを取得
© DMM.com 使ってた場合 51 事前にイベントデータを取得
© DMM.com 使ってた場合 52 事前にイベントデータを取得 こんなに簡単にSSGができたのに 勿体無い😭
© DMM.com その他の反省 - OGP - AppRouterのgenerateMetadataを用いて動的OGPを実装したが、 そもそも本アプリはVPN接続してないと中身が見れないので OGPは不可能 -
ファイル構成 - featuresディレクトリで機能ごとに分割 - 構成の理解不足からファイル分割(コンポーネント分割)に支障が出て、 クライアントコンポーネントが増えた - UIライブラリ選定 - TailwindメインのUIにすればよりサーバーコンポーネント増やせた etc… 53
© DMM.com 反省点しかない...?🤔 54
© DMM.com 褒めたい点 55 - ちゃんと仕様通りに動くアプリが作れた - 技術的挑戦ができた - 多くの学びを得られた
(これはあくまで新卒技術研修のチーム開発)
© DMM.com まとめ・所管 新卒技術研修のチーム開発にAppRouterを導入 SSR,RSC,Cookie等の前提知識の不足から十分に活用できなかった 56 サーバーコンポーネント/SSG は目的ではなく手段 フロントのパフォーマンス向上が目的 -
パフォーマンス測定の理解 - Cache機能の理解
© DMM.com おわり 57