2020-05-02 Dynamic Rendering を試してみる
#dynamic-rendering
Dynamic Rendering とは
https://developers.google.com/search/docs/guides/dynamic-rendering?hl=ja
UserAgent がクローラーな場合に html をレンダリングしてからレスポンスを返すことにより、JS を実行しないクローラーに対して正しいコンテンツを読み込ませる技術
SSR との比較
Dynamic Rendering はヘッドレスブラウザなどを用いてレンダリングすることが多い
最終的には SSR にするのが良いらしい
https://www.suzukikenichi.com/blog/dynamic-rendering-is-a-temporary-workaround/
SSR 実装難しくない？
選択肢
prerender.io
https://prerender.io/
Rendertron
https://github.com/GoogleChrome/rendertron
rendora
https://github.com/rendora/rendora
試してみた
prerender
prerender-node
https://github.com/prerender/prerender-node
express の middleware
リクエストを見て prerender の対象なら PRERENDER_SERVICE_URL にリクエストを投げる君
prerender
https://github.com/prerender/prerender
prerender を行う service
多分 https://prerender.io/ のソースコード
自前ホスティングしても良いし https://prerender.io/ を使っても良い
https://prerender.io/ を使うにはアカウント登録してトークンの登録が必要そう
nginx を使う場合
https://gist.github.com/thoop/8165802
https://github.com/odan-sandbox/prerender-sandbox
prerender を自前ホスティングしているサンプル
bot 経由だと <div id="app"></div> が <div id="app">poyo</div> になっていることがわかる
所感
prerender を自前ホスティングできるのは良さそう
prerender-node で express の middleware としてリクエストの振り分けをしているけど、実際は CDN でやりたいので自前で用意する必要ありそう
prerender-node と prerender の型定義がなかった...
Rendertron
Rendertron
本体
puppeteer を使って実装されている
/render/ 以下に URL を渡すとレンダリングされた html が返ってくる
rendertron.initialize() を実行すると取りあえず動く
Rendertron is also compatible with prerender.io middleware. Note: the user agent lists differ there.
互換性がある
rendertron-middleware
prerender-node と同じような役割を持つ middleware
https://github.com/odan-sandbox/rendertron-sandbox
web サーバは node じゃなくて nginx で用意してみた
https://github.com/odan-sandbox/rendertron-sandbox/blob/master/config/nginx.conf
所感
prerender とほとんど変わらない気がした
メンテされている感じするし、GoogleChrome 配下だし、TS 製だしで、こっっちの方が良さそう