Implement prerendering w/ puppeteer

Slide 1

Slide 1 text

Implement prerendering w/ puppeteer 2020.07.21 隅田川.js#2 Sota Ohara

Slide 2

Slide 2 text

Sota Ohara Software Engineer at CADDi sottar_ sottar

Slide 3

Slide 3 text

https://www.sottar.io/

Slide 4

Slide 4 text

prerendering とは - Web 上でレンダリングをする方法の一つ - CSR, SSR などと並列 - 各URLに対応する個別の HTML ファイルを事前に生成しておく - TTFB, FP, FCP, TTI の最適化 - エッジキャッシュを活用しやすい - 全ての有効なURLに対してHTMLを生成しておく必要がある - Gatsby, Next.js などでサポートされている

Slide 5

Slide 5 text

https://developers.google.com/web/updates/2019/02/rendering-on-the-web

Slide 6

Slide 6 text

puppeteer を使って実装した

Slide 7

Slide 7 text

puppeteer とは - https://github.com/puppeteer/puppeteer - Headless Chrome Node.js API - ヘッドレス（GUIなし）で Chrome を制御できるライブラリ - react-snap や Gatsby の内部で使われている

Slide 8

Slide 8 text

登場人物 react, styled-components, puppeteer, webpack, express, MySQL, npm scripts

Slide 9

Slide 9 text

Application npm run build ① npm run prerender ② bundle.js index.html npm-scripts

Slide 10

Slide 10 text

OGP対応 - OGP タグは react-helmet を使う - OGP用の画像は puppeteer でスクリーンショットを撮ることができる

Slide 11

Slide 11 text

styled-components のスタイルが取得できない - puppeteer を使ってページの HTML を取得する際に styled-components で当てているスタイルの情報が取得できなかった - パフォーマンス観点から CSSOM を直接読み込ませているので puppeteer で取得できない - styled-components v5 から導入された disableCSSOMInjection オプションを指定することで回避