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
240
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
220
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
Copilotの力を実感!3ヶ月間の生成AI研修の試行錯誤&成功事例をご紹介。果たして得たものとは・・?
ktc_shiori
0
340
今年一年で頑張ること / What I will do my best this year
pauli
1
220
実践! ソフトウェアエンジニアリングの価値の計測 ── Effort、Output、Outcome、Impact
nomuson
0
2k
Azureの開発で辛いところ
re3turn
0
240
信頼されるためにやったこと、 やらなかったこと。/What we did to be trusted, What we did not do.
bitkey
PRO
0
2.2k
AWSマルチアカウント統制環境のすゝめ / 20250115 Mitsutoshi Matsuo
shift_evolve
0
110
2025年に挑戦したいこと
molmolken
0
160
カップ麺の待ち時間(3分)でわかるPartyRockアップデート
ryutakondo
0
140
【JAWS-UG大阪 reInvent reCap LT大会 サンバが始まったら強制終了】“1分”で初めてのソロ参戦reInventを数字で振り返りながら反省する
ttelltte
0
140
駆け出しリーダーとしての第一歩〜開発チームとの新しい関わり方〜 / Beginning Journey as Team Leader
kaonavi
0
120
embedパッケージを深掘りする / Deep Dive into embed Package in Go
task4233
1
210
あなたの人生も変わるかも?AWS認定2つで始まったウソみたいな話
iwamot
3
850
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Designing Dashboards & Data Visualisations in Web Apps
destraynor
230
52k
Gamification - CAS2011
davidbonilla
80
5.1k
Fireside Chat
paigeccino
34
3.1k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
960
The Cost Of JavaScript in 2023
addyosmani
46
7.2k
Designing Experiences People Love
moore
139
23k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.2k
The Power of CSS Pseudo Elements
geoffreycrofte
74
5.4k
What's in a price? How to price your products and services
michaelherold
244
12k
How to Ace a Technical Interview
jacobian
276
23k
Automating Front-end Workflow
addyosmani
1366
200k
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