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
220
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
200
create own CMS from scratch
sottar
2
8.8k
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
4.9k
Other Decks in Technology
See All in Technology
Security-JAWS【第35回】勉強会クラウドにおけるマルウェアやコンテンツ改ざんへの対策
4su_para
0
180
アジャイルチームがらしさを発揮するための目標づくり / Making the goal and enabling the team
kakehashi
3
140
AIチャットボット開発への生成AI活用
ryomrt
0
170
飲食店データの分析事例とそれを支えるデータ基盤
kimujun
0
160
ドメインの本質を掴む / Get the essence of the domain
sinsoku
2
160
Lexical Analysis
shigashiyama
1
150
適材適所の技術選定 〜GraphQL・REST API・tRPC〜 / Optimal Technology Selection
kakehashi
1
690
【Pycon mini 東海 2024】Google Colaboratoryで試すVLM
kazuhitotakahashi
2
540
強いチームと開発生産性
onk
PRO
35
11k
『Firebase Dynamic Links終了に備える』 FlutterアプリでのAdjust導入とDeeplink最適化
techiro
0
130
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
3.9k
マルチモーダル / AI Agent / LLMOps 3つの技術トレンドで理解するLLMの今後の展望
hirosatogamo
37
12k
Featured
See All Featured
Building an army of robots
kneath
302
43k
A Tale of Four Properties
chriscoyier
156
23k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Gamification - CAS2011
davidbonilla
80
5k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
506
140k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Adopting Sorbet at Scale
ufuk
73
9.1k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
A designer walks into a library…
pauljervisheath
204
24k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.8k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
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