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
280
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
260
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
モニタリング統一への道のり - 分散モニタリングツール統合のためのオブザーバビリティプロジェクト
niftycorp
PRO
1
520
Autify Company Deck
autifyhq
2
44k
ソフトウェアテストのAI活用_ver1.25
fumisuke
1
610
Amplify Gen2から知るAWS CDK Toolkit Libraryの使い方/How to use the AWS CDK Toolkit Library as known from Amplify Gen2
fossamagna
1
350
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing
tomzoh
2
120
ロールが細分化された組織でSREは何をするか?
tgidgd
1
420
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
クラウド開発の舞台裏とSRE文化の醸成 / SRE NEXT 2025 Lunch Session
kazeburo
1
580
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
vtryo
3
1.9k
How Do I Contact Jetblue Airlines® Reservation Number: Fast Support Guide
thejetblueairhelpsupport
0
150
ClaudeCode_vs_GeminiCLI_Terraformで比較してみた
tkikuchi
1
1k
セキュアなAI活用のためのLiteLLMの可能性
tk3fftk
1
330
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Music & Morning Musume
bryan
46
6.7k
Writing Fast Ruby
sferik
628
62k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Typedesign – Prime Four
hannesfritz
42
2.7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Adopting Sorbet at Scale
ufuk
77
9.5k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
A designer walks into a library…
pauljervisheath
207
24k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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