$30 off During Our Annual Pro Sale. View Details »

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. Implement prerendering w/ puppeteer
    2020.07.21 隅田川.js#2
    Sota Ohara

    View Slide

  2. Sota Ohara
    Software Engineer at CADDi
    sottar_
    sottar

    View Slide

  3. https://www.sottar.io/

    View Slide

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

    View Slide

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

    View Slide

  6. puppeteer を使って実装した

    View Slide

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

    View Slide

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

    View Slide

  9. Application
    npm run build

    npm run prerender

    bundle.js
    index.html
    npm-scripts

    View Slide

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

    View Slide

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

    View Slide

  12. page source
    Before After

    View Slide

  13. View Slide

  14. We Are Hiring!!
    https://corp.caddi.jp/recruit/eng

    View Slide