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

Implement prerendering w/ puppeteer

sota ohara
July 21, 2020
Technology
1
250

Implement prerendering w/ puppeteer

sota ohara

July 21, 2020
Tweet

More Decks by sota ohara

See All by sota ohara
Re-Architecture of ReactNative
sottar
0
230
create own CMS from scratch
sottar
2
8.9k
Let’s try to hack AST of JavaScript
sottar
1
1.7k
フロントエンドエンジニアが伝えたい最近の事情
sottar
28
18k
複数人で高速に開発するためのnpmモジュール
sottar
5
2.5k
new version of context in React 16.3
sottar
3
1.6k
2ヶ月半でサービスをリリースした話し
sottar
2
2.1k
Redux のディレクトリ構成を考える
sottar
2
14k
モダンなJavaScriptアプリケーションでモダンにスタイリングする方法
sottar
9
5k

Other Decks in Technology

See All in Technology
技術負債の「予兆検知」と「状況異変」のススメ / Technology Dept
i35_267
1
1k
Data-centric AI入門第6章：Data-centric AIの実践例
x_ttyszk
1
370
ビジネスと現場活動をつなぐソフトウェアエンジニアリング～とあるスタートアッププロダクトの成長記録より～
mizunori
0
210
Kubernetes x k6 で負荷試験基盤を開発して 負荷試験を民主化した話 / Kubernetes x k6
sansan_randd
2
730
開発者が自律的に AWS Security Hub findings に 対応する仕組みと AWS re:Invent 2024 登壇体験談 / Developers autonomously report AWS Security Hub findings Corresponding mechanism and AWS re:Invent 2024 presentation experience
kaminashi
0
190
All you need to know about InnoDB Primary Keys
lefred
0
120
データの品質が低いと何が困るのか
kzykmyzw
6
1k
リーダブルテストコード 〜メンテナンスしやすい テストコードを作成する方法を考える〜 #DevSumi #DevSumiB / Readable test code
nihonbuson
11
5.8k
Ask! NIKKEI RAG検索技術の深層
hotchpotch
13
2.8k
[2025-02-07]生成AIで変える問い合わせの未来 〜チームグローバル化の香りを添えて〜
tosite
1
290
30分でわかる『アジャイルデータモデリング』
hanon52_
9
2.2k
組織貢献をするフリーランスエンジニアという生き方
n_takehata
1
1k

Featured

See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Unsuck your backbone
ammeep
669
57k
A Modern Web Designer's Workflow
chriscoyier
693
190k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
A Tale of Four Properties
chriscoyier
158
23k
Bash Introduction
62gerente
610
210k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Gamification - CAS2011
davidbonilla
80
5.1k

Transcript

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

  2. Sota Ohara Software Engineer at CADDi sottar_ sottar

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

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

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

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

  6. puppeteer を使って実装した

  7. puppeteer とは - https://github.com/puppeteer/puppeteer - Headless Chrome Node.js API -

    ヘッドレス（GUIなし）で Chrome を制御できるライブラリ - react-snap や Gatsby の内部で使われている

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

  9. Application npm run build ① npm run prerender ② bundle.js

    index.html npm-scripts

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

  11. styled-components のスタイルが取得できない - puppeteer を使ってページの HTML を取得する際に styled-components で当てて いるスタイルの情報が取得できなかった

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

  12. page source Before After

  13. None

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