Implement prerendering w/ puppeteer

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