Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Next.js App Routerによる 次世代のフロントエンド開発

Next.js App Routerによる 次世代のフロントエンド開発

## 技術

React, Next.js, App Router, フロントエンド, ハイドレーション, CSR, SSR, PPR, Server Component, Server Action

Tech Leverages

December 20, 2023
Tweet

More Decks by Tech Leverages

Other Decks in Technology

Transcript

  1. | © Leverages inc. 2 自己紹介 • 所属 ◦ ITRプロダクト開発グループ •

    出身 ◦ 川崎横浜あたり • 趣味 ◦ 邦ロック、漫画、テニス • マイブーム ◦ 毎日カレー生活
  2. | © Leverages inc. 3 Agenda • はじめに • React /

    Nextの変化 ◦ これまでのReact / Next ◦ これからのReact / Next • 進化したこと ◦ データ取得 ◦ データ更新 • まとめ
  3. | © Leverages inc. 4 Agenda • はじめに • React /

    Nextの変化 ◦ これまでのReact / Next ◦ これからのReact / Next • 進化したこと ◦ データ取得 ◦ データ更新 • まとめ
  4. | © Leverages inc. 10 ざっくりフロントエンド史 はじめに サーバーはJSONのみを返し、クライアントでUIを生成する  ⇨ React や

    Vue など サーバーでHTMLを生成し、 クライアントでJavaScriptアプリとして再構築する  ⇨ Next や Nuxt など クライアントに技術や実装寄せたい! クライアントだけだとパフォーマンスとかしんどい!
  5. | © Leverages inc. 12 Agenda • はじめに • React /

    Nextの変化 ◦ これまでのReact / Next ◦ これからのReact / Next • 進化したこと ◦ データ取得 ◦ データ更新 • まとめ
  6. | © Leverages inc. 23 3. ハイドレーションを行う Next コンポーネント クライアント HTML

    レンダリング サーバー JavaScript DOM レンダリング ハイドレーション DOM ページ完成
  7. | © Leverages inc. 27 React これからのReact / Next サーバーコンポーネント クライアントコンポーネント

    React Server Component の登場 コンポーネントをサーバーコンポーネントとクライアントコンポーネントに分ける
  8. | © Leverages inc. 28 React Server Component React サーバーコンポーネント クライアントコンポーネント

    サーバー側でレンダリングされるコンポーネント(NEW!!!) クライアントに配信されない
  9. | © Leverages inc. 29 React Server Component React サーバーコンポーネント クライアントコンポーネント

    クライアント側でレンダリングされるコンポーネント 実質これまでのコンポーネントと同じ
  10. | © Leverages inc. 31 1. サーバーでサーバーコンポーネントをレンダリングする React サーバー コンポーネント クライアント

    コンポーネント クライアント HTML クライアント コンポーネント レンダリング サーバー
  11. | © Leverages inc. 32 2. HTMLとJavaScriptをクライアントに送信し、レンダリングする React サーバー コンポーネント クライアント

    コンポーネント クライアント HTML クライアント コンポーネント レンダリング DOM サーバー HTML JavaScript レンダリング
  12. | © Leverages inc. 33 新旧比較 React サーバー コンポーネント クライアント コンポーネント

    クライアント HTML クライアント コンポーネント レンダリング DOM サーバー HTML JavaScript レンダリング 旧 新 クライアント コンポーネント DOM サーバー JavaScript レンダリング
  13. | © Leverages inc. 34 Next : App Router これからのReact /

    Next React Server Component と SSR の組み合わせ サーバーコンポーネントはサーバーサイドで完成される クライアントコンポーネントのみ、ハイドレーションする
  14. | © Leverages inc. 35 処理の流れ Next 1. サーバーでサーバーコンポーネントをレンダリングする 2. サーバーでクライアントコンポーネントをレンダリングする

    3. サーバーコンポーネントとクライアントコンポーネントの HTMLをクライアント側に送信し、DOMに反映させる 4. クライアントコンポーネントのハイドレーションを行う
  15. | © Leverages inc. 36 1. サーバーでサーバーコンポーネントをレンダリングする Next サーバー コンポーネント クライアント

    コンポーネント クライアント HTML クライアント コンポーネント レンダリング サーバー
  16. | © Leverages inc. 37 2. サーバーでクライアントコンポーネントをレンダリングする Next サーバー コンポーネント クライアント

    コンポーネント クライアント HTML クライアント コンポーネント HTML レンダリング レンダリング サーバー
  17. | © Leverages inc. 38 3. HTMLをクライアント側に送信し、DOMに反映させる Next サーバー コンポーネント クライアント

    コンポーネント クライアント HTML クライアント コンポーネント HTML レンダリング レンダリング JavaScript DOM サーバー クライアント コンポーネントだけ
  18. | © Leverages inc. 39 4. クライアントコンポーネントのハイドレーションを行う Next サーバー コンポーネント クライアント

    コンポーネント クライアント HTML クライアント コンポーネント HTML レンダリング レンダリング JavaScript DOM DOM レンダリング ハイドレーション サーバー
  19. | © Leverages inc. 42 クライアントコンポーネント Next クライアント コンポーネント クライアント クライアント

    コンポーネント HTML レンダリング JavaScript DOM DOM レンダリング ハイドレーション サーバー
  20. | © Leverages inc. 43 再び全体像 Next サーバー コンポーネント クライアント コンポーネント

    クライアント HTML クライアント コンポーネント HTML レンダリング レンダリング JavaScript DOM DOM レンダリング ハイドレーション サーバー
  21. | © Leverages inc. 44 新旧比較 Next 旧 新 サーバー コンポーネント

    クライアント コンポーネント HTML クライアント コンポーネント HTML レンダリング レンダリング JavaScript DOM DOM レンダリング ハイドレーション クライアント サーバー コンポーネント HTML レンダリング JavaScript DOM DOM レンダリング ハイドレーション クライアント サーバー
  22. | © Leverages inc. 45 結局何がいいの? これからのReact / Next 不要なJavaScriptをクライアントに送信しなくてよい  ⇨

    バンドルサイズの削減によるパフォーマンス向上 サーバーで動くコンポーネントの登場で、できることが増える
  23. | © Leverages inc. 46 結局何がいいの? これからのReact / Next 不要なJavaScriptをクライアントに送信しなくてよい  ⇨

    バンドルサイズの削減によるパフォーマンス向上 サーバーで動くコンポーネントの登場で、できることが増える
  24. | © Leverages inc. 47 Agenda • はじめに • React /

    Nextの変化 ◦ これまでのReact / Next ◦ これからのReact / Next • 進化したこと ◦ データ取得 ◦ データ更新 • まとめ
  25. | © Leverages inc. 50 これまで データ取得 getServerSideProps コンポーネント コンポーネント コンポーネント

    ・・・ ・・・ FETCH getServerSideProps でデータ取得する それを各コンポーネントにリレーする
  26. | © Leverages inc. 51 これまで データ取得 getServerSideProps コンポーネント コンポーネント コンポーネント

    ・・・ ・・・ FETCH また、データ取得の完了を待たないと いけなかった このfetchが完了するまで UIが生成されない
  27. | © Leverages inc. 55 内部でサーバー側の処理が書ける データ取得 コンポーネント コンポーネント コンポーネント ・・・

    ・・・ FETCH FETCH getServerSideProps を使わなくていい 各コンポーネントがfetchの処理を行う
  28. | © 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する必要があった
  29. | © Leverages inc. 57 これからの書き方 データ取得 export const ServerComponent =

    async () => { const data = await fetchData() return ( <div>{ data }</div> ) } コンポーネントでfetchできる!!!
  30. | © Leverages inc. 59 非同期関数にできる データ取得 ComponentA (表示中) ComponentB (表示中)

    ComponentC (ローディング画面) Component A (表示中) ComponentB (表示中) ComponentC (表示中) C のデータ 取得完了後 Suspense と組み合わせることで、 コンポーネントごとに非同期に表示できる
  31. | © 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画面が表示できる 非同期関数
  32. | © Leverages inc. 64 これまで データ更新 クライアント サーバーのAPI データ更新 fetch

    サーバーサイドに作ったAPIのエンドポイントを叩き、 データ更新をする必要があった
  33. | © 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していた
  34. | © Leverages inc. 67 Server Actions データ更新 クライアント Server Actions

    データ更新 Server Actionsを使って、サーバーにAPIを立てずに データの更新が可能になった
  35. | © Leverages inc. 68 Server Actions データ更新 export default function

    Page() { async function postData() { 'use server' // POST処理 } return ( <form action={postData}> <button type="submit">送信 </button> </form> ) } サーバー側の処理を クライアントから呼び出せる サーバー側の処理
  36. | © Leverages inc. 69 Agenda • はじめに • React /

    Nextの変化 ◦ これまでのReact / Next ◦ これからのReact / Next • 進化したこと ◦ データ取得 ◦ データ更新 • まとめ
  37. | © Leverages inc. 71 まとめ まとめ • React Server Component

    の登場 ◦ サーバー側でのみ動くコンポーネント ◦ これをSSRで動かすのが App Router • データの取得や更新がより簡単になった ◦ サーバー側の処理が扱いやすい状態になっている ◦ Server Actions や Suspense の利用でより便利に