Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
新卒研修でNext.js AppRouterを導⼊した 学びと反省 井内 将俊
Slide 2
Slide 2 text
© DMM.com プロフィール ❏ 所属 ❏ LC開発部 VC-グロースグループ (2023年4月新卒入社) ❏ 最近のお仕事 ❏ ライブコミュニケーションサービスの配信画面UIの開発 ❏ 領域:フロントエンド ❏ 趣味:お絵描き 井内 将俊(いうち まさとし) バーチャルライブチャット配信キャラクター 2
Slide 3
Slide 3 text
© DMM.com イントロ ダクション 3 ❏ 新卒研修のチーム開発 ❏ 開発したアプリの簡単な説明 ❏ AppRouterと周辺技術(SSR/Next.js/RCS)の ざっくり説明 ❏ チーム開発でAppRouterを導入した反省点 ❏ ユーザーIDの保管場所 ❏ 動的ルートの静的ページ生成 ❏ まとめ・所感
Slide 4
Slide 4 text
© DMM.com イントロ ダクション 4 ❏ 新卒研修のチーム開発 ❏ 開発したアプリの簡単な説明 ❏ AppRouterと周辺技術(SSR/Next.js/RCS)の ざっくり説明 ❏ チーム開発でAppRouterを導入した反省点 ❏ ユーザーIDの保管場所 ❏ 動的ルートの静的ページ生成 ❏ まとめ・所感
Slide 5
Slide 5 text
© DMM.com 新卒研修のチーム開発 - フロントエンド - バックエンド - ネイティブアプリ - 機械学習 - ブロックチェーン - スクラム - etc… 3ヶ月以上の修行を経て.... 「Amazon Web Services、“Powered by AWS”ロゴ、[およびかかる資料で使用されるその他のAWS商標] は、米国その他の諸国に おける、Amazon.com , Inc.またはその関連会社の商標です。」 5
Slide 6
Slide 6 text
© DMM.com 新卒研修のチーム開発 - フロントエンド - バックエンド - ネイティブアプリ - 機械学習 - ブロックチェーン - スクラム - etc… チームを組んでアプリを開発!💪🔥 3ヶ月以上の修行を経て.... 6
Slide 7
Slide 7 text
© DMM.com 新卒研修のチーム開発 - 異なる技術領域が得意な4~5名の新卒チームで2.5週間かけて アプリを開発 - アプリ内容、技術選定 完全自由 7 チーム開発
Slide 8
Slide 8 text
© DMM.com 新卒研修のチーム開発 - 異なる技術領域が得意な4~5名の新卒チームで2.5週間かけて アプリを開発 - アプリ内容、技術選定 完全自由 - Next.jsの新機能(AppRouter)を使ってみよう! 8 チーム開発
Slide 9
Slide 9 text
© DMM.com イントロ ダクション 9 ❏ 新卒研修のチーム開発 ❏ 開発したアプリの簡単な説明 ❏ AppRouterと周辺技術(SSR/Next.js/RCS)の ざっくり説明 ❏ チーム開発でAppRouterを導入した反省点 ❏ ユーザーIDの保管場所 ❏ 動的ルートの静的ページ生成 ❏ まとめ・所感
Slide 10
Slide 10 text
© DMM.com 開発したアプリ 社内イベントの開催/参加を一元管理することで 社内交流を促進するイベント管理アプリ 10
Slide 11
Slide 11 text
© DMM.com 開発したアプリ 11 手描きした マスコットキャラクター 社内イベントの開催/参加を一元管理することで 社内交流を促進するイベント管理アプリ
Slide 12
Slide 12 text
© DMM.com イントロ ダクション ❏ 新卒研修のチーム開発 ❏ 開発したアプリの簡単な説明 ❏ AppRouterと周辺技術(SSR/Next.js/RCS)の ざっくり説明 ❏ チーム開発でAppRouterを導入した反省点 ❏ ユーザーIDの保管場所 ❏ 動的ルートの静的ページ生成 ❏ まとめ・所感 12
Slide 13
Slide 13 text
© DMM.com AppRouterとは?🤔 Next.js 13で追加された、RSCを利用した新しいルータ実装 - Next.js とは?🤔 - SSR等の多機能を簡単に実行可能にするReactのフレームワーク - RCSとは?🤔 - React Server Components の略称 SSR(とCSR)、既存のNext.js、RSC を理解せずにAppRouterを学ぶと大 混乱... 13
Slide 14
Slide 14 text
© DMM.com CSRとSSR CSR:Client Side Rendering(SPA) クライアント(ブラウザ) APIサーバ - 初回に一括で取得 - クライアントのみでレンダリング - データ取得もクライアント ホスティングサーバ 14
Slide 15
Slide 15 text
© DMM.com CSRとSSR CSR:Client Side Rendering(SPA) クライアント(ブラウザ) APIサーバ - 初回に一括で取得 - クライアントのみでレンダリング - データ取得もクライアント - 初回読み込みが遅い... - SEOに弱い.... ホスティングサーバ 15
Slide 16
Slide 16 text
© DMM.com CSRとSSR SSR(Next.js) - サーバー側でも一部レンダリング - サーバー側でもデータ取得 Node.jsサーバ クライアントに任せっきりにしない! こっちも頑張る 16 クライアント(ブラウザ) APIサーバ
Slide 17
Slide 17 text
© DMM.com Next.js(Pages Router)によるSSR SSR(Next.js)の例 SSRを行うには 専用の関数を用いる 17
Slide 18
Slide 18 text
© DMM.com RSC(React Server Components) - サーバー上でレンダリングされる新種のReactコンポーネント - useState等の状態管理やWebAPIへのアクセスはできない 18 クライアントコンポーネント - これまで通りクライアントでレンダリングされるコンポーネント 現在alpha版
Slide 19
Slide 19 text
© DMM.com ここまでAppRouterの前知識 19
Slide 20
Slide 20 text
© DMM.com AppRouterとは? • Next 13で追加された新しいルーター実装 • 今年5月に安定版になった • React Server Component (RSC) 上に構築される • デフォルトでは全てRSC • つまり全てサーバー側でレンダリングされる これまでの(Pages Router)では基本クライアント側で レンダリングされていた RSCの概念を理解していないと大きく混乱... 20
Slide 21
Slide 21 text
© DMM.com サーバーコンポーネント/クライアントコンポーネント AppRouter(RSC)ではコンポーネント単位でレンダリング場所を 指定可能 サーバー側でレンダリングされる →サーバーコンポーネント (従来通り)クライアント側でレンダリングされる →クライアントコンポーネント 21 デフォルトでは全てサーバーコンポーネント
Slide 22
Slide 22 text
© DMM.com サーバーコンポーネント/クライアントコンポーネント AppRouter(RSC)ではコンポーネント単位でレンダリング場所を 指定可能 サーバー側でレンダリングされる →サーバーコンポーネント クライアント側でレンダリングされる →クライアントコンポーネント 22 デフォルトでは全てサーバーコンポーネント サーバーコンポーネント クライアントコンポーネント
Slide 23
Slide 23 text
© DMM.com サーバーコンポーネントのメリット - サーバーコンポーネントを増やせばクライアントへ送られるバンドルサ イズが削減できる - サーバーコンポーネントでデータ取得を行えば、データが埋め込まれた HTMLをクライアントへ送られデータ表示が高速になる - クライアントのCPU使用量削減 23
Slide 24
Slide 24 text
© DMM.com 可能な限り サーバーコンポーネントを使うぞ!😆 24
Slide 25
Slide 25 text
© DMM.com クライアントコンポーネントだらけ...😨 AppRouterの機能も活用しきれてない😭 25
Slide 26
Slide 26 text
© DMM.com イントロ ダクション ❏ 新卒研修のチーム開発 ❏ 開発したアプリの簡単な説明 ❏ AppRouterと周辺技術(SSR/Next.js/RCS)の ざっくり説明 ❏ チーム開発でAppRouterを導入した反省点(改善点) ❏ ユーザーIDの保管場所 ❏ 動的ルートの静的ページ生成 ❏ まとめ・所感 26
Slide 27
Slide 27 text
© DMM.com AppRouter導入反省点 - ユーザーIDをクライアントの状態管理のみで保管してしまった - GenerateStaticParamsの機能を利用できてなかった 27
Slide 28
Slide 28 text
© DMM.com AppRouter導入反省点 - ユーザーIDをクライアントの状態管理のみで保管してしまった - GenerateStaticParamsの機能を利用できてなかった 28
Slide 29
Slide 29 text
© DMM.com ユーザーIDの保管 ・ユーザーID ログインしているユーザーのID ・Jotai 状態管理ライブラリ Jotaiを用いてユーザーIDを保管し、何処のコンポーネントでも ユーザーIDを用いてユーザー固有のデータを取得できるように実装 29
Slide 30
Slide 30 text
© DMM.com ユーザーIDの保管 ・ユーザーID ログインしているユーザーのID ・Jotai 状態管理ライブラリ Jotaiを用いてユーザーIDを保管し、何処のコンポーネントでも ユーザーIDを用いてユーザー固有のデータを取得できるように実装 30 Jotaiを使わずにCookieに保存していればもっと サーバー側で取得可能なデータを増やせたのに....😭
Slide 31
Slide 31 text
© DMM.com クライアントでの状態管理とcookie クライアントの状態管理(Redux, Recoil, Jotai, localStorage) - サーバーコンポーネントでは値が読み取れない... Cookie - ブラウザに保存されるデータ - cookieリクエスト毎にサーバーに送られる - サーバーコンポーネントでも値が読み取れる! 31
Slide 32
Slide 32 text
© DMM.com クライアントでの状態管理とcookie クライアントの状態管理(Redux, Recoil, Jotai, localStorage) - サーバーコンポーネントでは値が読み取れない... Cookie - ブラウザに保存されるデータ - cookieリクエスト毎にサーバーに送られる - サーバーコンポーネントでも値が読み取れる! 32 Next.jsでも全く同様 △ AppRouter導入の反省 ⭕ SSR導入の反省
Slide 33
Slide 33 text
© DMM.com サーバーコンポーネントで ユーザーIdが取得できて嬉しい例 33
Slide 34
Slide 34 text
© DMM.com cookieによるユーザーID取得のメリット サーバーコンポーネントで取得できるデータが増える 34
Slide 35
Slide 35 text
© DMM.com cookieによるユーザーID取得のメリット 35
Slide 36
Slide 36 text
© DMM.com cookieによるユーザーID取得のメリット 誰が取得しても同じ (サーバー側で取得) ユーザーIDを用いてユーザーに紐 づいたイベントを取得 (クライアント側で取得) 36
Slide 37
Slide 37 text
© DMM.com cookieによるユーザーID取得のメリット 誰が取得しても同じ (サーバー側で取得) ユーザーIDを用いてユーザーに紐 づいたイベントを取得 (クライアント側で取得) CookieにユーザーIdを入れれば全てサーバー側で取得可能 37
Slide 38
Slide 38 text
© DMM.com cookieを用いていない挙動 38
Slide 39
Slide 39 text
© DMM.com cookieを用いていない挙動 39
Slide 40
Slide 40 text
© DMM.com cookieを用いていない挙動 40
Slide 41
Slide 41 text
© DMM.com cookieでユーザーIDを管理した挙動 41 初回表示から全データ取得できてる...!
Slide 42
Slide 42 text
© DMM.com cookieでユーザーIDを管理した挙動 42 Cookieの仕組みを ちゃんと理解していれば...😭
Slide 43
Slide 43 text
© DMM.com AppRouter導入反省点 - ユーザーIDをクライアントの状態管理のみで保管してしまった - GenerateStaticParamsの機能を利用できてなかった 43
Slide 44
Slide 44 text
© DMM.com GenerateStaticParams - "動的”ルーティングを使用し、ビルド時に”静的”なルートを生成 - Pages RouterのgetStaticParamsに近い機能 - getStaticParams:ビルド時にページを作成するSSGを行う機能 - つまりSSG(Static Site Generation)ができる機能! 44
Slide 45
Slide 45 text
© DMM.com GenerateStaticParams - パス部分が動的に変化する ルーティング 45 アクセスを検知したら、パスから固有のデータ を取得しサーバー側でレンダリング
Slide 46
Slide 46 text
© DMM.com GenerateStaticParams - パス部分が動的に変化する ルーティング 46 アクセスを検知したら、パスから固有のデータ を取得しサーバー側でレンダリング ビルド時に静的レンダリング(SSG) GenerateStaticParams
Slide 47
Slide 47 text
© DMM.com 使ってなかった場合 47 - パス情報からイベント詳細を取得するAPIを叩き、 取得したイベントデータを使用してページを表示
Slide 48
Slide 48 text
© DMM.com 使ってなかった場合 48 - パス情報からイベント詳細を取得するAPIを叩き、 取得したイベントデータを使用してページを表示
Slide 49
Slide 49 text
© DMM.com 使ってなかった場合 49 - パス情報からイベント詳細を取得するAPIを叩き、 取得したイベントデータを使用してページを表示
Slide 50
Slide 50 text
© DMM.com 使ってた場合 50 事前にイベントデータを取得
Slide 51
Slide 51 text
© DMM.com 使ってた場合 51 事前にイベントデータを取得
Slide 52
Slide 52 text
© DMM.com 使ってた場合 52 事前にイベントデータを取得 こんなに簡単にSSGができたのに 勿体無い😭
Slide 53
Slide 53 text
© DMM.com その他の反省 - OGP - AppRouterのgenerateMetadataを用いて動的OGPを実装したが、 そもそも本アプリはVPN接続してないと中身が見れないので OGPは不可能 - ファイル構成 - featuresディレクトリで機能ごとに分割 - 構成の理解不足からファイル分割(コンポーネント分割)に支障が出て、 クライアントコンポーネントが増えた - UIライブラリ選定 - TailwindメインのUIにすればよりサーバーコンポーネント増やせた etc… 53
Slide 54
Slide 54 text
© DMM.com 反省点しかない...?🤔 54
Slide 55
Slide 55 text
© DMM.com 褒めたい点 55 - ちゃんと仕様通りに動くアプリが作れた - 技術的挑戦ができた - 多くの学びを得られた (これはあくまで新卒技術研修のチーム開発)
Slide 56
Slide 56 text
© DMM.com まとめ・所管 新卒技術研修のチーム開発にAppRouterを導入 SSR,RSC,Cookie等の前提知識の不足から十分に活用できなかった 56 サーバーコンポーネント/SSG は目的ではなく手段 フロントのパフォーマンス向上が目的 - パフォーマンス測定の理解 - Cache機能の理解
Slide 57
Slide 57 text
© DMM.com おわり 57