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
180
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
140
create own CMS from scratch
sottar
2
8.7k
Let’s try to hack AST of JavaScript
sottar
1
1.5k
フロントエンドエンジニアが伝えたい最近の事情
sottar
28
18k
複数人で高速に開発するためのnpmモジュール
sottar
5
2.4k
new version of context in React 16.3
sottar
3
1.5k
2ヶ月半でサービスをリリースした話し
sottar
2
2k
Redux のディレクトリ構成を考える
sottar
2
14k
モダンなJavaScriptアプリケーションでモダンにスタイリングする方法
sottar
9
4.9k
Other Decks in Technology
See All in Technology
認知症フレンドリーテックとスタックチャン
naokiuc
0
170
LLM開発・活用の舞台裏@2024.04.25
yushin_n
3
1.1k
自己改善からチームを動かす! 「セルフエンジニアリングマネージャー」のすゝめ
shoota
6
1k
コードや知識を組み込む / Incorporate Code and knowledge
ks91
PRO
0
140
Azure Container Apps + Bicep 〜 こんな感じで運用しています
kaz29
3
620
Building Dashboards as a Hobby
egmc
0
360
家族アルバム みてねにおけるGrafana活用術 / Grafana Meetup Japan Vol.1 LT
isaoshimizu
1
910
よく聞くけど使ったことないソフトウェアNo.1 KafkaとSnowflake
foursue
4
500
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
15
35k
ワールドカフェI /チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
150
Improve Your Development Workflow with Gemini Code Assist
meteatamel
0
120
Amplify 🩷 Bedrock 〜生成AI入門〜
minorun365
PRO
8
420
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
74
5.2k
Faster Mobile Websites
deanohume
300
30k
Designing Experiences People Love
moore
136
23k
Designing for humans not robots
tammielis
248
25k
Into the Great Unknown - MozCon
thekraken
14
1k
Web development in the modern age
philhawksworth
203
10k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
26
2.3k
In The Pink: A Labor of Love
frogandcode
138
21k
Testing 201, or: Great Expectations
jmmastey
29
6.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
Creatively Recalculating Your Daily Design Routine
revolveconf
211
11k
Done Done
chrislema
178
15k
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