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

## 技術

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

Transcript

1. Next.js App Routerによる 次世代のフロントエンド開発 レバテック開発部　堀内 達也
2. |　© Leverages inc. 2 自己紹介 • 所属 ◦ ITRプロダクト開発グループ • 出身 ◦ 川崎横浜あたり • 趣味 ◦ 邦ロック、漫画、テニス • マイブーム ◦ 毎日カレー生活
3. |　© Leverages inc. 3 Agenda • はじめに • React / Nextの変化 ◦ これまでのReact / Next ◦ これからのReact / Next • 進化したこと ◦ データ取得 ◦ データ更新 • まとめ
4. |　© Leverages inc. 4 Agenda • はじめに • React / Nextの変化 ◦ これまでのReact / Next ◦ これからのReact / Next • 進化したこと ◦ データ取得 ◦ データ更新 • まとめ
5. はじめに
6. |　© Leverages inc. 6 React / Next はじめに UIを簡単に構築するためのJavaScriptライブラリ React Reactのフレームワーク Next
7. |　© Leverages inc. 7 ざっくりフロントエンド史 はじめに サーバーでUIを生成し、クライアントは表示するのみ
8. |　© Leverages inc. 8 ざっくりフロントエンド史 はじめに サーバーでUIを生成し、クライアントは表示するのみ サーバーで大部分のUIを生成し、一部クライアントで動かす 　⇨ サーバーとクライアントは別技術（PHP + JavaScript 等） 動きのあるUI作りたい！
9. |　© Leverages inc. 9 ざっくりフロントエンド史 はじめに サーバーはJSONのみを返し、クライアントでUIを生成する 　⇨ React や Vue など クライアントに技術や実装寄せたい！
10. |　© Leverages inc. 10 ざっくりフロントエンド史 はじめに サーバーはJSONのみを返し、クライアントでUIを生成する 　⇨ React や Vue など サーバーでHTMLを生成し、 クライアントでJavaScriptアプリとして再構築する 　⇨ Next や Nuxt など クライアントに技術や実装寄せたい！ クライアントだけだとパフォーマンスとかしんどい！
11. |　© Leverages inc. 11 結論 はじめに これからのフロントエンド、 もっとサーバーサイドで処理しよう！！！
12. |　© Leverages inc. 12 Agenda • はじめに • React / Nextの変化 ◦ これまでのReact / Next ◦ これからのReact / Next • 進化したこと ◦ データ取得 ◦ データ更新 • まとめ
13. これまでのReact / Next
14. |　© Leverages inc. 14 React これまでのReact / Next UIすべてをクライアント上のJavaScriptで作る
15. |　© Leverages inc. 15 画面表示までの処理の流れ React 1. クライアントにJavaScriptのリソースを送信する 2. レンダリングしてDOMに反映する
16. |　© Leverages inc. 16 1. クライアントにJavaScriptのリソースを送信する React コンポーネント クライアント サーバー JavaScript
17. |　© Leverages inc. 17 2. レンダリングしてDOMに反映する React コンポーネント クライアント レンダリング サーバー JavaScript DOM
18. |　© Leverages inc. 18 問題点 React コンポーネント クライアント レンダリング サーバー JavaScript DOM レンダリング完了 までページがない
19. |　© Leverages inc. 19 Next（SSR） これまでのReact / Next HTMLをサーバー側で生成しておくことで、 パフォーマンスを向上させる
20. |　© Leverages inc. 20 処理の流れ Next 1. サーバー側でレンダリングを行い、HTMLを生成する 2. 生成した HTML を DOM に反映させる 3. ハイドレーションを行う
21. |　© Leverages inc. 21 1. サーバー側で全体をレンダリングし、HTMLを生成する Next コンポーネント クライアント HTML レンダリング サーバー
22. |　© Leverages inc. 22 2. 生成したHTMLをDOMに反映させる Next コンポーネント クライアント HTML レンダリング サーバー JavaScript DOM ページ表示
23. |　© Leverages inc. 23 3. ハイドレーションを行う Next コンポーネント クライアント HTML レンダリング サーバー JavaScript DOM レンダリング ハイドレーション DOM ページ完成
24. |　© Leverages inc. 24 問題点 Next インタラクティブにする必要ないコンポーネントもある、、 全部のJSをクライアントに渡す必要あるの、、？
25. これからのReact / Next
26. |　© Leverages inc. 26 React これからのReact / Next 全部のJSをクライアントに渡す必要あるの、、？ サーバーで完結できることは完結させたい、、
27. |　© Leverages inc. 27 React これからのReact / Next サーバーコンポーネント クライアントコンポーネント React Server Component の登場 コンポーネントをサーバーコンポーネントとクライアントコンポーネントに分ける
28. |　© Leverages inc. 28 React Server Component React サーバーコンポーネント クライアントコンポーネント サーバー側でレンダリングされるコンポーネント（NEW!!!） クライアントに配信されない
29. |　© Leverages inc. 29 React Server Component React サーバーコンポーネント クライアントコンポーネント クライアント側でレンダリングされるコンポーネント 実質これまでのコンポーネントと同じ
30. |　© Leverages inc. 30 処理の流れ React 1. サーバーでサーバーコンポーネントをレンダリングする 2. 生成されたHTMLとクライアントコンポーネントのJavaScriptを クライアントに送信し、レンダリングする
31. |　© Leverages inc. 31 1. サーバーでサーバーコンポーネントをレンダリングする React サーバー コンポーネント クライアント コンポーネント クライアント HTML クライアント コンポーネント レンダリング サーバー
32. |　© Leverages inc. 32 2. HTMLとJavaScriptをクライアントに送信し、レンダリングする React サーバー コンポーネント クライアント コンポーネント クライアント HTML クライアント コンポーネント レンダリング DOM サーバー HTML JavaScript レンダリング
33. |　© Leverages inc. 33 新旧比較 React サーバー コンポーネント クライアント コンポーネント クライアント HTML クライアント コンポーネント レンダリング DOM サーバー HTML JavaScript レンダリング 旧 新 クライアント コンポーネント DOM サーバー JavaScript レンダリング
34. |　© Leverages inc. 34 Next : App Router これからのReact / Next React Server Component と SSR の組み合わせ サーバーコンポーネントはサーバーサイドで完成される クライアントコンポーネントのみ、ハイドレーションする
35. |　© Leverages inc. 35 処理の流れ Next 1. サーバーでサーバーコンポーネントをレンダリングする 2. サーバーでクライアントコンポーネントをレンダリングする 3. サーバーコンポーネントとクライアントコンポーネントの HTMLをクライアント側に送信し、DOMに反映させる 4. クライアントコンポーネントのハイドレーションを行う
36. |　© Leverages inc. 36 1. サーバーでサーバーコンポーネントをレンダリングする Next サーバー コンポーネント クライアント コンポーネント クライアント HTML クライアント コンポーネント レンダリング サーバー
37. |　© Leverages inc. 37 2. サーバーでクライアントコンポーネントをレンダリングする Next サーバー コンポーネント クライアント コンポーネント クライアント HTML クライアント コンポーネント HTML レンダリング レンダリング サーバー
38. |　© Leverages inc. 38 3. HTMLをクライアント側に送信し、DOMに反映させる Next サーバー コンポーネント クライアント コンポーネント クライアント HTML クライアント コンポーネント HTML レンダリング レンダリング JavaScript DOM サーバー クライアント コンポーネントだけ
39. |　© Leverages inc. 39 4. クライアントコンポーネントのハイドレーションを行う Next サーバー コンポーネント クライアント コンポーネント クライアント HTML クライアント コンポーネント HTML レンダリング レンダリング JavaScript DOM DOM レンダリング ハイドレーション サーバー
40. |　© Leverages inc. 40 補足 Next サーバーコンポーネントと クライアントコンポーネントで分けて見てみる
41. |　© Leverages inc. 41 サーバーコンポーネント Next サーバー コンポーネント クライアント HTML HTML レンダリング DOM サーバー
42. |　© Leverages inc. 42 クライアントコンポーネント Next クライアント コンポーネント クライアント クライアント コンポーネント HTML レンダリング JavaScript DOM DOM レンダリング ハイドレーション サーバー
43. |　© Leverages inc. 43 再び全体像 Next サーバー コンポーネント クライアント コンポーネント クライアント HTML クライアント コンポーネント HTML レンダリング レンダリング JavaScript DOM DOM レンダリング ハイドレーション サーバー
44. |　© Leverages inc. 44 新旧比較 Next 旧 新 サーバー コンポーネント クライアント コンポーネント HTML クライアント コンポーネント HTML レンダリング レンダリング JavaScript DOM DOM レンダリング ハイドレーション クライアント サーバー コンポーネント HTML レンダリング JavaScript DOM DOM レンダリング ハイドレーション クライアント サーバー
45. |　© Leverages inc. 45 結局何がいいの？ これからのReact / Next 不要なJavaScriptをクライアントに送信しなくてよい 　⇨ バンドルサイズの削減によるパフォーマンス向上 サーバーで動くコンポーネントの登場で、できることが増える
46. |　© Leverages inc. 46 結局何がいいの？ これからのReact / Next 不要なJavaScriptをクライアントに送信しなくてよい 　⇨ バンドルサイズの削減によるパフォーマンス向上 サーバーで動くコンポーネントの登場で、できることが増える
47. |　© Leverages inc. 47 Agenda • はじめに • React / Nextの変化 ◦ これまでのReact / Next ◦ これからのReact / Next • 進化したこと ◦ データ取得 ◦ データ更新 • まとめ
48. データ取得
49. |　© Leverages inc. 49 データ取得 データ取得 バックエンドや外部から、 画面表示時に必要なデータを取得する方法の変化 例えば、会員一覧画面を表示する時、 会員データをバックエンドから取得して表示したい時など
50. |　© Leverages inc. 50 これまで データ取得 getServerSideProps コンポーネント コンポーネント コンポーネント ･･･ ･･･ FETCH getServerSideProps でデータ取得する それを各コンポーネントにリレーする
51. |　© Leverages inc. 51 これまで データ取得 getServerSideProps コンポーネント コンポーネント コンポーネント ･･･ ･･･ FETCH また、データ取得の完了を待たないと いけなかった このfetchが完了するまで UIが生成されない
52. |　© Leverages inc. 52 これまで データ取得 getServerSideProps でデータ取得して受け渡していくしかなかった データ取得の完了を待たないといけなかった
53. |　© Leverages inc. 53 できるようになったこと データ取得 サーバーコンポーネントを使うと、、 コンポーネントの内部でサーバー側の処理が書ける コンポーネントを非同期関数にできる
54. |　© Leverages inc. 54 できるようになったこと データ取得 サーバーコンポーネントを使うと、、 コンポーネントの内部でサーバー側の処理が書ける コンポーネントを非同期関数にできる
55. |　© Leverages inc. 55 内部でサーバー側の処理が書ける データ取得 コンポーネント コンポーネント コンポーネント ･･･ ･･･ FETCH FETCH getServerSideProps を使わなくていい 各コンポーネントがfetchの処理を行う
56. |　© 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する必要があった
57. |　© Leverages inc. 57 これからの書き方 データ取得 export const ServerComponent = async () => { const data = await fetchData() return ( <div>{ data }</div> ) } コンポーネントでfetchできる!!!
58. |　© Leverages inc. 58 できるようになったこと データ取得 サーバーコンポーネントを使うと、、 コンポーネントの内部でサーバー側の処理が書ける コンポーネントを非同期関数にできる
59. |　© Leverages inc. 59 非同期関数にできる データ取得 ComponentA （表示中） ComponentB （表示中） ComponentC （ローディング画面） Component A （表示中） ComponentB （表示中） ComponentC （表示中） C のデータ 取得完了後 Suspense と組み合わせることで、 コンポーネントごとに非同期に表示できる
60. |　© 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画面が表示できる 非同期関数
61. |　© Leverages inc. 61 これまでの課題が解決された データ取得 サーバーコンポーネントで解決 getServerSideProps でデータ取得して受け渡していくしかなかった データ取得の完了を待たないといけなかった
62. データ更新
63. |　© Leverages inc. 63 データ更新 データ更新 フォームのSubmit時など、 ユーザ操作によるデータ更新を行う方法の変化
64. |　© Leverages inc. 64 これまで データ更新 クライアント サーバーのAPI データ更新 fetch サーバーサイドに作ったAPIのエンドポイントを叩き、 データ更新をする必要があった
65. |　© 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していた
66. |　© Leverages inc. 66 Server Actions データ更新 クライアントサイドでサーバーサイドの関数が実行できる機能 APIを用意する必要がなく、そのまま関数を実行するだけでよい Next14系でstableに！
67. |　© Leverages inc. 67 Server Actions データ更新 クライアント Server Actions データ更新 Server Actionsを使って、サーバーにAPIを立てずに データの更新が可能になった
68. |　© Leverages inc. 68 Server Actions データ更新 export default function Page() { async function postData() { 'use server' // POST処理 } return ( <form action={postData}> <button type="submit">送信 </button> </form> ) } サーバー側の処理を クライアントから呼び出せる サーバー側の処理
69. |　© Leverages inc. 69 Agenda • はじめに • React / Nextの変化 ◦ これまでのReact / Next ◦ これからのReact / Next • 進化したこと ◦ データ取得 ◦ データ更新 • まとめ
70. まとめ
71. |　© Leverages inc. 71 まとめ まとめ • React Server Component の登場 ◦ サーバー側でのみ動くコンポーネント ◦ これをSSRで動かすのが App Router • データの取得や更新がより簡単になった ◦ サーバー側の処理が扱いやすい状態になっている ◦ Server Actions や Suspense の利用でより便利に
72. |　© Leverages inc. 72 結論 まとめ これからのフロントエンド、 もっとサーバーサイドで処理しよう！！！