Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Implement prerendering w/ puppeteer
Search
sota ohara
July 21, 2020
Technology
1
280
Implement prerendering w/ puppeteer
sota ohara
July 21, 2020
Tweet
Share
More Decks by sota ohara
See All by sota ohara
Re-Architecture of ReactNative
sottar
0
260
create own CMS from scratch
sottar
2
9k
Let’s try to hack AST of JavaScript
sottar
1
1.7k
フロントエンドエンジニアが伝えたい最近の事情
sottar
28
18k
複数人で高速に開発するためのnpmモジュール
sottar
5
2.6k
new version of context in React 16.3
sottar
3
1.7k
2ヶ月半でサービスをリリースした話し
sottar
2
2.2k
Redux のディレクトリ構成を考える
sottar
2
15k
モダンなJavaScriptアプリケーションでモダンにスタイリングする方法
sottar
9
5k
Other Decks in Technology
See All in Technology
2025 AWS Jr. Championが振り返るAWS Summit
kazukiadachi
0
110
さくらのIaaS基盤のモニタリングとOpenTelemetry/OSC Hokkaido 2025
fujiwara3
3
440
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
7.5k
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
510
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
380
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
48
19k
PO初心者が考えた ”POらしさ”
nb_rady
0
210
Beyond Kaniko: Navigating Unprivileged Container Image Creation
f30
0
130
20250705 Headlamp: 專注可擴展性的 Kubernetes 用戶界面
pichuang
0
270
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
140
マネジメントって難しい、けどおもしろい / Management is tough, but fun! #em_findy
ar_tama
7
1.1k
CDKTFについてざっくり理解する!!~CloudFormationからCDKTFへ変換するツールも作ってみた~
masakiokuda
1
140
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
173
14k
Optimizing for Happiness
mojombo
379
70k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
KATA
mclloyd
30
14k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
The Cult of Friendly URLs
andyhume
79
6.5k
Faster Mobile Websites
deanohume
307
31k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Balancing Empowerment & Direction
lara
1
430
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Transcript
Implement prerendering w/ puppeteer 2020.07.21 隅田川.js#2 Sota Ohara
Sota Ohara Software Engineer at CADDi sottar_ sottar
https://www.sottar.io/
prerendering とは - Web 上でレンダリングをする方法の一つ - CSR, SSR などと並列 -
各URLに対応する個別の HTML ファイルを事前に生成しておく - TTFB, FP, FCP, TTI の最適化 - エッジキャッシュを活用しやすい - 全ての有効なURLに対してHTMLを生成しておく必要がある - Gatsby, Next.js などでサポートされている
https://developers.google.com/web/updates/2019/02/rendering-on-the-web
puppeteer を使って実装した
puppeteer とは - https://github.com/puppeteer/puppeteer - Headless Chrome Node.js API -
ヘッドレス(GUIなし)で Chrome を制御できるライブラリ - react-snap や Gatsby の内部で使われている
登場人物 react, styled-components, puppeteer, webpack, express, MySQL, npm scripts
Application npm run build ① npm run prerender ② bundle.js
index.html npm-scripts
OGP対応 - OGP タグは react-helmet を使う - OGP用の画像は puppeteer でスクリーンショットを撮ることができる
styled-components のスタイルが取得できない - puppeteer を使ってページの HTML を取得する際に styled-components で当てて いるスタイルの情報が取得できなかった
- パフォーマンス観点から CSSOM を直接読み込ませているので puppeteer で取得できない - styled-components v5 から導入された disableCSSOMInjection オプションを指定 することで回避
page source Before After
None
We Are Hiring!! https://corp.caddi.jp/recruit/eng