🏫
Wakuで学ぶReact Server Componentsの仕組み：use client編
最近、Wakuのコードにテストを少し追加しました。いや、もっと早くやっておけばよかったと思ってます。Viteのpluginのテストの方法ってよく分からないなと思っていたところ、そもそもpluginとしてテストしなければ良いのだということに気づきました。
そのテストを見ると、React Server Componentsの内部の仕組み、というかコードがどのように変換されているのかを見ることができるなと思いました。それだけです。
今回は、use clientディレクティブについてです。大事なのは、これはserver環境(react-server condition)で使うものです。server環境でないところで使っても無視されるだけです。'use client';がファイルの先頭についていると、このファイル内でexportされた関数全てがシリアライズ可能なようにリファレンス化されます。
実際のテストコードがこちらです。
面白いことに関数の中身が消えてしまいます。関数の実態はclient環境で別にバンドルされこのリファレンスをもとに読み込まれることになります。ここの仕組みは多少複雑ですが、ViteのDEV環境では、ファイル名は変わらないので、素直に元のコードが読み込まれると思っておけば良いでしょう。
走り書きで、どれだけ参考になるか分かりませんが、以上です。
最後にWakuのページはこちらです。
Discussion