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
250
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
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
"TEAM"を導入したら最高のエンジニア"Team"を実現できた / Deploying "TEAM" and Building the Best Engineering "Team"
yuj1osm
1
210
AIエージェント入門
minorun365
PRO
32
18k
Amazon Q Developerの無料利用枠を使い倒してHello worldを表示させよう!
nrinetcom
PRO
2
120
OSS構成管理ツールCMDBuildを使ったAWSリソース管理の自動化
satorufunai
0
650
Охота на косуль у древних
ashapiro
0
110
自分だけの仮想クラスタを高速かつ効率的に作る kubefork
donkomura
0
110
Ruby on Railsで持続可能な開発を行うために取り組んでいること
am1157154
3
160
AIエージェント元年@日本生成AIユーザ会
shukob
1
230
Potential EM 制度を始めた理由、そして2年後にやめた理由 - EMConf JP 2025
hoyo
2
2.8k
【内製開発Summit 2025】イオンスマートテクノロジーの内製化組織の作り方/In-house-development-summit-AST
aeonpeople
2
830
1行のコードから社会課題の解決へ: EMの探究、事業・技術・組織を紡ぐ実践知 / EM Conf 2025
9ma3r
12
4.1k
データベースの負荷を紐解く/untangle-the-database-load
emiki
2
530
Featured
See All Featured
Bash Introduction
62gerente
611
210k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Facilitating Awesome Meetings
lara
52
6.2k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
260
GitHub's CSS Performance
jonrohan
1030
460k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
A designer walks into a library…
pauljervisheath
205
24k
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