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
200
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
180
create own CMS from scratch
sottar
2
8.8k
Let’s try to hack AST of JavaScript
sottar
1
1.6k
フロントエンドエンジニアが伝えたい最近の事情
sottar
28
18k
複数人で高速に開発するためのnpmモジュール
sottar
5
2.5k
new version of context in React 16.3
sottar
3
1.6k
2ヶ月半でサービスをリリースした話し
sottar
2
2k
Redux のディレクトリ構成を考える
sottar
2
14k
モダンなJavaScriptアプリケーションでモダンにスタイリングする方法
sottar
9
4.9k
Other Decks in Technology
See All in Technology
音声AIエージェントの世界とRetell AI入門 / Introduction to the World of Voice AI Agents and Retell AI
rkaga
4
890
React Aria で実現する次世代のアクセシビリティ
ryo_manba
4
1k
可視化により内部品質をあげるAIドキュメントリバース/20240910 Hiromitsu Akiba
shift_evolve
0
180
Road to Single Activity
yurihondo
1
130
Mocking in Rust Applications
taiki45
1
340
20240912 JJUGナイトセミナー
mii1004
0
120
App Router を実プロダクトで採用して見えてきた勘所をちょっとだけ紹介
marokanatani
0
750
セキュリティ監視の内製化 効率とリスク
mixi_engineers
PRO
7
890
AI でアップデートする既存テクノロジーと、クラウドエンジニアの生きる道
soracom
PRO
1
380
The XZ Backdoor Story
fr0gger
0
2.8k
不動産売買取引におけるAIの可能性とプロダクトでのAI活用
zabio3
0
210
ロリポップ! for Gamersを支えるインフラ/lolipop for gamers infrastructure
takumakume
0
120
Featured
See All Featured
Music & Morning Musume
bryan
46
6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
230
17k
Faster Mobile Websites
deanohume
304
30k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.2k
What the flash - Photography Introduction
edds
67
11k
Producing Creativity
orderedlist
PRO
340
39k
A designer walks into a library…
pauljervisheath
201
24k
Scaling GitHub
holman
458
140k
Designing with Data
zakiwarfel
98
5k
For a Future-Friendly Web
brad_frost
174
9.3k
The Illustrated Children's Guide to Kubernetes
chrisshort
47
48k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
24
3.9k
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