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
290
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
270
create own CMS from scratch
sottar
2
9k
Let’s try to hack AST of JavaScript
sottar
1
1.8k
フロントエンドエンジニアが伝えたい最近の事情
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
「技術負債にならない・間違えない」 権限管理の設計と実装
naro143
36
11k
BtoBプロダクト開発の深層
16bitidol
0
260
業務自動化プラットフォーム Google Agentspace に入門してみる #devio2025
maroon1st
0
190
多様な事業ドメインのクリエイターへ 価値を届けるための営みについて
massyuu
0
110
10年の共創が示す、これからの開発者と企業の関係 ~ Crossroad
soracom
PRO
1
170
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
findy_eventslides
0
120
Oracle Cloud Infrastructure:2025年9月度サービス・アップデート
oracle4engineer
PRO
0
390
生成AIを活用したZennの取り組み事例
ryosukeigarashi
0
200
いまさら聞けない ABテスト入門
skmr2348
1
200
いま注目しているデータエンジニアリングの論点
ikkimiyazaki
0
590
多野優介
tanoyusuke
1
420
Azure Well-Architected Framework入門
tomokusaba
1
290
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
890
Context Engineering - Making Every Token Count
addyosmani
5
180
Documentation Writing (for coders)
carmenintech
75
5k
4 Signs Your Business is Dying
shpigford
185
22k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
We Have a Design System, Now What?
morganepeng
53
7.8k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
580
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