2021年11月15日

slug

2021-11-15

date

Nov 15, 2021

summary

React、ハイドレーション、ジェイソン・ボーン

status

Published

SSR のハイドレーションの仕組みを再入門した。

SSR 時に作られた html がクライアントに送られたあとにイベントハンドラなどをアタッチすることを言う。

特に面白いのが、

<button onClick={clickHandler} />

と書いたときのクリックイベントをフロントエンド側でアタッチするために、このコンポーネントの jsx ファイルをダウンロードさせ、おそらく html 構造上同じブロック（結果的にコンポーネント）に対して JavaScript を実行している。

ReactDOM.hydrate はちゃんと勉強しないといけない。

Hydrationしたい場合は、renderToStringまたはrenderToNodeStreamで行う必要があります。

なるほど、そうなのか。

checksum で識別しているとも書かれている。この記事は参考になるな。

MapとSet が必要なのか。

import 'core-js/es6/map';
import 'core-js/es6/set';

このポリーフィルは入れたほうがいいのかな。

テストツールとしてEnzymeを使っている場合、Reactのv16へのバージョンアップに合わせて、Enzymeのバージョンを3以上に上げる必要がある。

まさにこれだった。

$ npm i -D enzyme-adapter-react-16

そしてこれも。

react-test-renderer が必要と書かれているが、とくにインストールせずに使えてる気がする。

この記事も読んだ。