これからの時代に向けて RSCを使いこなす

Transcript

1. これからを見越して RSCをうまく使いこなす ふくだ　あきと
2. 自己紹介 名前：ふくだ あきと 経歴：2年半 　　　受託開発企業（21年1月 ~ 5月） 　　　フリーランス（21年6月 ~ 12月） 　　　自社開発企業（21年12月 ~ 22年12月） 現所属：令和トラベル inc. フロントエンドエンジニア （TypeScript、React、Next.js） 趣味：麻雀、アニメ、音楽 etc.
3. フロントエンド、マジで変化速くね？
4. Next.js の SSG だとか ISR… Vite がどうのこうの…
5. 中でも大きなトピック 「RSC」
6. RSCを使いこなす ＝つよつよエンジニアへの第一歩（？）
7. ということで、 RSCの活用方法をみていく
8. RSCとは React Server Components の略 1. サーバー側でJSをHTMLに変換 2. クライアント側にJSONとして送信 3. クライアントで解釈して画面に表示する →　ブラウザからすると、 　「サーバーから仮想DOMをシリアライズしたものが返ってくる」
9. RSCの特徴 1. データ取得周りのパフォーマンスが向上する a. サーバー側でコンポーネントを生成するため、 より早くサーバーからデータを取得することができる。 2. クライアント側のJSを減らすことができる a. サーバー内でHTMLを生成するため、 クライアント側に送るJSが減り、結果バンドルサイズが減る。 3. クライアントコンポーネント内でインポートできない
10. RSCの特徴 1. データ取得周りのパフォーマンスが向上する　 a. サーバー側でコンポーネントを生成するため、 より早くサーバーからデータを取得することができる。 2. クライアント側のJSを減らすことができる a. サーバー内でHTMLを生成するため、 クライアント側に送るJSが減り、結果バンドルサイズが減る。 3. クライアントコンポーネント内でインポートできない
11. では、RSCを活用していく方法を見ていく
12. まずはクライアントコンポーネントの 動作をみてみる
13. 実際の実装と動作 1. ボタンを押下 2. データ取得が始まり、 fallback が表示される 3. 非同期処理が解決され、 画面に取得したリストが表 示される
14. export const ClientComponent = () => { const [isShow, setIsShow] = useState(false); return ( <> <button onClick={() => setIsShow(!isShow)}> Show </button> {isShow && ( <Suspense fallback={<div>Loading...</div>}> <Posts /> </Suspense> )} </> )}; const Posts = () => { const promise = getPosts(); const posts = use(promise); return ( <ul> {posts.map((post) => ( <li key={post.id}>{post.title}</li> ))} </ul> ); }; 実際のコード
15. この実装の辛み ❏ ボタンをクリックしてからデータ取得が始まっている ❏ クリックするたびに API を呼んでいる
16. この実装の辛み ❏ ボタンをクリックしてからデータ取得が始まっている ❏ クリックするたびに API を呼んでいる → リスト表示の待ち時間が増え、UX が損なわれる原因となる
17. これをRSC を使って解決したい
18. RSC で書き換えてみる export const ServerComponent = async () => { const posts = await getPosts(); return <ClientComponent posts={posts} />; }; const Posts = ({ posts }) => { // const promise = getPosts(); // const posts = use(promise); return ( <ul>...</ul> ); }; ⬅ 代わりに RSC で取得 ⬅ クライアント側では取得しない
19. データ取得をすることによる UX の低下は改善された
20. とみせかけて、まだ完璧ではない。
21. それどころか
22. さらなる問題点を抱えることになる。
23. こんな感じになる
24. さらなる問題点とは 非同期処理の解決するまで await を使用して待っている状態 ⬇ つまりは... 非同期処理が解決されるまで クライアントコンポーネントのレンダリングをブロックする ことになる
25. さらなる問題点とは 非同期処理の解決するまで await を使用して待っている状態 ⬇ つまりは... 非同期処理が解決されるまで クライアントコンポーネントのレンダリングをブロックする ことになる → 重い API だった場合、レンダリングの待ち時間が増え、 かなり UX が損なわ れてしまう
26. では、どうすべきか export const ServerComponent = async () => { const promise = getPosts(); return <ClientComponent promise={promise} />; }; const Posts: FC<PostsProps> = ({ promise }) => { const posts = use(promise); return ( <ul>...</ul> ); }; ⬅ ここで非同期処理を解決しない ⬅ ここで非同期処理を解決する
27. こんな感じになる
28. 何が変わった？ RSC で await を使わず、非同期処理を解決しないまま ClientComponent に 渡している ⬇ それによって... データ取得を待つことなく、 レンダリングすることが可能になった
29. UX を損ねることなく、 効率よくデータを表示することができた
30. これはもう
31. RSC を使いこなすことに 成功したといっても過言ではない！！
32. あえて非同期処理を解決しないことによって、 ❏ データ取得をサーバー側で実行 ❏ データ取得を待つことなく、UI を表示 といった RSC の特徴を活かした使い方ができた。 ❏ ボタンをクリックする前にデータ取得によって UI がブロックされること ❏ ボタンをクリックするたびにデータ取得が実行される といったことがどちらも解決され、ウハウハになれる。 まとめ
33. 以上、ありがとうございました！