Implement prerendering w/ puppeteer2020.07.21 隅田川.js#2Sota Ohara
View Slide
Sota OharaSoftware Engineer at CADDisottar_sottar
https://www.sottar.io/
prerendering とは- Web 上でレンダリングをする方法の一つ- CSR, SSR などと並列- 各URLに対応する個別の HTML ファイルを事前に生成しておく- TTFB, FP, FCP, TTI の最適化- エッジキャッシュを活用しやすい- 全ての有効なURLに対してHTMLを生成しておく必要がある- Gatsby, Next.js などでサポートされている
https://developers.google.com/web/updates/2019/02/rendering-on-the-web
puppeteer を使って実装した
puppeteer とは- https://github.com/puppeteer/puppeteer- Headless Chrome Node.js API- ヘッドレス(GUIなし)で Chrome を制御できるライブラリ- react-snap や Gatsby の内部で使われている
登場人物react, styled-components, puppeteer, webpack, express, MySQL, npm scripts
Applicationnpm run build①npm run prerender②bundle.jsindex.htmlnpm-scripts
OGP対応- OGP タグは react-helmet を使う- OGP用の画像は puppeteer でスクリーンショットを撮ることができる
styled-components のスタイルが取得できない- puppeteer を使ってページの HTML を取得する際に styled-components で当てているスタイルの情報が取得できなかった- パフォーマンス観点から CSSOM を直接読み込ませているので puppeteer で取得できない- styled-components v5 から導入された disableCSSOMInjection オプションを指定することで回避
page sourceBefore After
We Are Hiring!!https://corp.caddi.jp/recruit/eng