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
210
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
190
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
[AWS JAPAN 生成AIハッカソン] Dialog の紹介
yoshimi0227
0
150
話題のGraphRAG、その可能性と課題を理解する
hide212131
4
1.5k
Amazon_CloudWatch_ログ異常検出_導入ガイド
tsujiba
4
1.6k
フルカイテン株式会社 採用資料
fullkaiten
0
36k
グローバル展開を見据えたサービスにおける機械翻訳プラクティス / dp-ai-translating
cyberagentdevelopers
PRO
1
150
APIテスト自動化の勘所
yokawasa
7
4.2k
わたしとトラックポイント / TrackPoint tips
masahirokawahara
1
240
コンテンツを支える 若手ゲームクリエイターの アートディレクションの事例紹介 / cagamefi-game
cyberagentdevelopers
PRO
1
130
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
49k
AWSコンテナ本出版から3年経った今、もし改めて執筆し直すなら / If I revise our container book
iselegant
15
4k
IaC運用を楽にするためにCDK Pipelinesを導入したけど、思い通りにいかなかった話
smt7174
1
110
なんで、私がAWS Heroに!? 〜社外の広い世界に一歩踏み出そう〜
minorun365
PRO
6
1.1k
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
66
9.9k
Why Our Code Smells
bkeepers
PRO
334
57k
Code Reviewing Like a Champion
maltzj
519
39k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.6k
Embracing the Ebb and Flow
colly
84
4.4k
Docker and Python
trallard
40
3.1k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
For a Future-Friendly Web
brad_frost
175
9.4k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
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