Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Implement prerendering w/ puppeteer
sota ohara
July 21, 2020
Technology
1
120
Implement prerendering w/ puppeteer
sota ohara
July 21, 2020
Tweet
Share
More Decks by sota ohara
See All by sota ohara
create own CMS from scratch
sottar
2
8.1k
Let’s try to hack AST of JavaScript
sottar
1
1.2k
フロントエンドエンジニアが伝えたい最近の事情
sottar
28
17k
複数人で高速に開発するためのnpmモジュール
sottar
5
2.2k
new version of context in React 16.3
sottar
3
1.1k
2ヶ月半でサービスをリリースした話し
sottar
2
1.8k
Redux のディレクトリ構成を考える
sottar
2
13k
モダンなJavaScriptアプリケーションでモダンにスタイリングする方法
sottar
9
4.7k
Other Decks in Technology
See All in Technology
DevRel組織についての考察
taijihagino
PRO
0
160
ReverseETLでユーザーに価値を届ける基盤を実現した話
hakky
0
360
Amazon Comprehendで始める感情分析
46ta
0
210
Microsoft Azure を使い始める前に Azure Active Directory と Azure サブスクリプションの役割や関係性を正しく理解する
yoshiakioi
0
190
JAWS-UG 朝会 #36 登壇資料
takakuni
1
600
AWSを使う上で意識しておきたい、クラウドセキュリティ超入門(駆け足版)
kkmory
0
230
8日で作るオレオレRISC-V CPU
matsud224
2
940
やってみたLT会 Fleet Managerのススメ
yukiiiiikuma
PRO
0
420
漫画で使えそうな背景画像をblenderを使って作ってみた!
nokonoko1203
1
350
Settlement simulation testing to ensure correct settlement processing
applepine1125
2
1.7k
PMMやプロダクト関係者と協働するために役割を整理した話 / 20220810_pdmtipslt
rakus_dev
0
130
hey BOOK
heyinc
26
290k
Featured
See All Featured
Writing Fast Ruby
sferik
612
57k
Git: the NoSQL Database
bkeepers
PRO
415
59k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_i
25
16k
Three Pipe Problems
jasonvnalue
89
8.7k
A designer walks into a library…
pauljervisheath
197
16k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
127
8.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
940
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
173
8.6k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
100
6k
Design by the Numbers
sachag
271
17k
Pencils Down: Stop Designing & Start Developing
hursman
113
9.9k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
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