WPSG Podcast#3 Shownote
Published in
3 min readApr 24, 2020
YouTube
Shadow DOM のユースケースとしての SSR(というかハイドレーションの不要化)
SSRしたいとき
- Bot フレンドリー
- First Meaningful Paint の短縮
SSRの一般的なフロー
- リクエストに応じてSPAを実行、もしくはプリレンダリングしてHTMLを返す
- クライアント側でリハイドレーションする(SPAと状態管理)
要求に対してコストパフォーマンス悪い
- SPAを非ブラウザ環境で実行するつらみ
- リハイドレーションによってTime To Interactiveが遅れるつらみ
ShadowDOMとslot使うと楽になる
- 仕様のおさらい、ShadowDOMの中にslotがあるとき、ShadowDOMをもつ要素の子要素がslotにアサインされる
- https://developers.google.com/web/fundamentals/web-components/shadowdom?hl=ja#slots
- SPAのルートをカスタムエレメント(x-app)のShadowDOMにする
- SSRするのはx-appの子要素としてMeaningful Contentsだけをレンダリング
- ブラウザではMeaningful Contentsがより早くレンダリングされる
- サーバはSPAを実行する必然性が下がる
- SPAは常にShadowDOMの中で初期化されるためリハイドレーションは不要
- aggre のブログ
Micro Frontend 2020
みんなやってる？
takanorip
- コンポーネントの境界の引き方の難しさ
- ステートの流れ方が変わってきてる
- 親->子 to 子が自ら取得
aggre
- エンジニアが自分がやっているタスクを一番パフォーマンス出せる技術でやりたい
- 共通ランタイムの使い方がキモ
- クリティカルレンダリングパスのことを考えると共通化できるとこは共通化したい、それとどう戦うか
- 全体をまとめる薄い層が上にある？
- RESTFULに振る舞えるのが良い
Web標準の追い方 2020
takanorip
- W3CのGitHubリポジトリ（issue）を眺める
- 各ブラウザのリリースノート
- TechFeed Pro
aggre
- GitHub
- Google Chrome Developers を眺める
