2023年9月12日に登壇したThink! FRONTEND by DMM.comにて発表した資料です。
新卒研修でNext.js AppRouterを導⼊した学びと反省井内 将俊
View Slide
© 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.comAppRouterとは?🤔Next.js 13で追加された、RSCを利用した新しいルータ実装- Next.js とは?🤔- SSR等の多機能を簡単に実行可能にするReactのフレームワーク- RCSとは?🤔- React Server Components の略称SSR(とCSR)、既存のNext.js、RSC を理解せずにAppRouterを学ぶと大混乱...13
© DMM.comCSRとSSRCSR:Client Side Rendering(SPA)クライアント(ブラウザ)APIサーバ- 初回に一括で取得- クライアントのみでレンダリング- データ取得もクライアントホスティングサーバ14
© DMM.comCSRとSSRCSR:Client Side Rendering(SPA)クライアント(ブラウザ)APIサーバ- 初回に一括で取得- クライアントのみでレンダリング- データ取得もクライアント- 初回読み込みが遅い...- SEOに弱い....ホスティングサーバ15
© DMM.comCSRとSSRSSR(Next.js)- サーバー側でも一部レンダリング- サーバー側でもデータ取得Node.jsサーバクライアントに任せっきりにしない!こっちも頑張る16クライアント(ブラウザ)APIサーバ
© DMM.comNext.js(Pages Router)によるSSRSSR(Next.js)の例SSRを行うには専用の関数を用いる17
© DMM.comRSC(React Server Components)- サーバー上でレンダリングされる新種のReactコンポーネント- useState等の状態管理やWebAPIへのアクセスはできない18クライアントコンポーネント- これまで通りクライアントでレンダリングされるコンポーネント現在alpha版
© DMM.comここまでAppRouterの前知識19
© DMM.comAppRouterとは?• 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.comAppRouter導入反省点- ユーザーIDをクライアントの状態管理のみで保管してしまった- GenerateStaticParamsの機能を利用できてなかった27
© DMM.comAppRouter導入反省点- ユーザーIDをクライアントの状態管理のみで保管してしまった- GenerateStaticParamsの機能を利用できてなかった28
© DMM.comユーザーIDの保管・ユーザーIDログインしているユーザーのID・Jotai状態管理ライブラリJotaiを用いてユーザーIDを保管し、何処のコンポーネントでもユーザーIDを用いてユーザー固有のデータを取得できるように実装29
© DMM.comユーザーIDの保管・ユーザーIDログインしているユーザーのID・Jotai状態管理ライブラリJotaiを用いてユーザーIDを保管し、何処のコンポーネントでもユーザーIDを用いてユーザー固有のデータを取得できるように実装30Jotaiを使わずにCookieに保存していればもっとサーバー側で取得可能なデータを増やせたのに....😭
© DMM.comクライアントでの状態管理とcookieクライアントの状態管理(Redux, Recoil, Jotai, localStorage)- サーバーコンポーネントでは値が読み取れない...Cookie- ブラウザに保存されるデータ- cookieリクエスト毎にサーバーに送られる- サーバーコンポーネントでも値が読み取れる!31
© DMM.comクライアントでの状態管理とcookieクライアントの状態管理(Redux, Recoil, Jotai, localStorage)- サーバーコンポーネントでは値が読み取れない...Cookie- ブラウザに保存されるデータ- cookieリクエスト毎にサーバーに送られる- サーバーコンポーネントでも値が読み取れる!32Next.jsでも全く同様△ AppRouter導入の反省 ⭕ SSR導入の反省
© DMM.comサーバーコンポーネントでユーザーIdが取得できて嬉しい例33
© DMM.comcookieによるユーザーID取得のメリットサーバーコンポーネントで取得できるデータが増える34
© DMM.comcookieによるユーザーID取得のメリット35
© DMM.comcookieによるユーザーID取得のメリット誰が取得しても同じ(サーバー側で取得)ユーザーIDを用いてユーザーに紐づいたイベントを取得(クライアント側で取得)36
© DMM.comcookieによるユーザーID取得のメリット誰が取得しても同じ(サーバー側で取得)ユーザーIDを用いてユーザーに紐づいたイベントを取得(クライアント側で取得)CookieにユーザーIdを入れれば全てサーバー側で取得可能37
© DMM.comcookieを用いていない挙動38
© DMM.comcookieを用いていない挙動39
© DMM.comcookieを用いていない挙動40
© DMM.comcookieでユーザーIDを管理した挙動41初回表示から全データ取得できてる...!
© DMM.comcookieでユーザーIDを管理した挙動42Cookieの仕組みをちゃんと理解していれば...😭
© DMM.comAppRouter導入反省点- ユーザーIDをクライアントの状態管理のみで保管してしまった- GenerateStaticParamsの機能を利用できてなかった43
© DMM.comGenerateStaticParams- "動的”ルーティングを使用し、ビルド時に”静的”なルートを生成- Pages RouterのgetStaticParamsに近い機能- getStaticParams:ビルド時にページを作成するSSGを行う機能- つまりSSG(Static Site Generation)ができる機能!44
© DMM.comGenerateStaticParams- パス部分が動的に変化するルーティング45アクセスを検知したら、パスから固有のデータを取得しサーバー側でレンダリング
© DMM.comGenerateStaticParams- パス部分が動的に変化するルーティング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