Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Implement prerendering w/ puppeteer

Implement prerendering w/ puppeteer

sota ohara

July 21, 2020
Tweet

More Decks by sota ohara

Other Decks in Technology

Transcript

  1. prerendering とは - Web 上でレンダリングをする方法の一つ - CSR, SSR などと並列 -

    各URLに対応する個別の HTML ファイルを事前に生成しておく - TTFB, FP, FCP, TTI の最適化 - エッジキャッシュを活用しやすい - 全ての有効なURLに対してHTMLを生成しておく必要がある - Gatsby, Next.js などでサポートされている
  2. puppeteer とは - https://github.com/puppeteer/puppeteer - Headless Chrome Node.js API -

    ヘッドレス(GUIなし)で Chrome を制御できるライブラリ - react-snap や Gatsby の内部で使われている
  3. styled-components のスタイルが取得できない - puppeteer を使ってページの HTML を取得する際に styled-components で当てて いるスタイルの情報が取得できなかった

    - パフォーマンス観点から CSSOM を直接読み込ませているので puppeteer で取得できない - styled-components v5 から導入された disableCSSOMInjection オプションを指定 することで回避