概要
React Server Components のブラウザ拡張機能がリリースされたので、紹介します。
この拡張機能は、主にNext.jsのApp Router機能を開発時にデバッグすることができるようです。
インストールはこちらから
実験と機能紹介
起動
これをApp Router機能のVercel公式レポジトリ"Next.js App Router Playground"で使用してみました。
拡張機能をインストール後、上記レポジトリを開発モードで起動します。
ブラウザで起動したアプリのURLを開き、開発者モードを開き、"RSC Devtools"を選択すると、以下の画像の画面が表示されます。
右の"Start recording"ボタンを押し、アプリ内の適当なページを開きます。すると、ロードしたページのRSC情報が表示されました。
ここからわかること
- ロードしたRSCは3つのチャンクに分かれている
- ロードしたRSC全体の非圧縮時のサイズが約6KBである
- 0-7番目までの8つのカードが表示され、treeかclient refという名前が付いている
RSCの構造を確認する
さらに詳細を見ていきます。
tree-0は、tree-1とtree-2を参照していることがわかります。
"Go to 1"を押すと、参照されている所に移動できるのでとても便利です。
tree-2に関しては、内容的にHEADタグの中身であることがわかりました。
tree-1は、client reference 3,4とtree 5 を参照していることがわかります。
3, 4 はnextのクライアントコードを参照しているように見えます。
...
5 には画面に表示されるテキストも含まれており、lauyout.tsxやpage.tsxにあたるものに見えます。
該当コードは以下です。
6, 7番目はコードで明示的に"use client"されているクライアントコンポーネントui/tab.tsxとui/click-counter.tsxでした。
tree表示機能が追加されたらより見やすく・便利になるかもしれません。
.
└── tree-0/
├── tree-2: <head>タグの中身
└── tree-1/
├── client-ref-3: next/dist/.../layout-router.js
├── client-ref-4: next/dist/.../render-from-template-context.js
└── tree-5:/
├── client-ref-6: ui/tab.tsx
└── client-ref-7: ui/click-counter.tsx
まとめ
- RSC Devtoolsをつかうことで、RSCの構造を簡単に分析することができました。
- 開発時にRSCになっているかどうかの確認がしやすくなったはずです。
- まだまだリリースしたばかりであり、今後の機能追加が期待されます。
Discussion