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
『GRANBLUE FANTASY: Relink』最高の「没入感」を実現するカットシーン制作手法とそれを支える技術
cygames
1
140
突撃! 隣のAmazon Bedrockユーザー 〜YouはどうしてAWSで?〜
minorun365
PRO
3
390
技術的負債解消の取り組みと専門チームのお話
bengo4com
0
330
とあるOSSを継続可能にするための取り組みについて / OSS Refactoring Process
bun913
1
210
AIを活用した柔軟かつ効率的な社内リソース検索への取り組み
cygames
0
180
20240911_New_Relicダッシュボード活用例
speakerdeckfk
0
110
フルカイテン株式会社 採用資料
fullkaiten
0
32k
開発生産性を始める前に開発チームができること / optim-improve-development-productivity.pdf
optim
0
110
JTCや セキュリティチェックリストが夢の跡
nikinusu
1
630
eBPFのこれまでとこれから
yutarohayakawa
10
3.2k
不動産売買取引におけるAIの可能性とプロダクトでのAI活用
zabio3
0
270
Privacy Sandbox on Android / DroidKaigi 2024
7pairs
1
270
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
48
2.8k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
25
3.9k
Docker and Python
trallard
39
3k
Teambox: Starting and Learning
jrom
131
8.7k
Typedesign – Prime Four
hannesfritz
39
2.3k
Navigating Team Friction
lara
183
13k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
36
1.7k
We Have a Design System, Now What?
morganepeng
48
7.1k
Facilitating Awesome Meetings
lara
49
5.9k
How to train your dragon (web standard)
notwaldorf
85
5.6k
It's Worth the Effort
3n
182
27k
What's in a price? How to price your products and services
michaelherold
242
11k
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