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
270
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
250
create own CMS from scratch
sottar
2
9k
Let’s try to hack AST of JavaScript
sottar
1
1.7k
フロントエンドエンジニアが伝えたい最近の事情
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
Web Intelligence and Visual Media Analytics
weblyzard
PRO
1
6.1k
キャッシュレス決済のプロダクトから決済基盤への進化
b1a9id
0
220
Javaアプリケーションの配布とパッケージング / Distribution and packaging of Java applications
hogelog
2
530
Kubernetesで作るAIプラットフォーム
oracle4engineer
PRO
2
180
Information Architecture Recommoning: How Standardization Enables Differentiation
angioia
0
170
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
38k
AI とペアプロしてわかった 3 つのヒューマンエラー
takahiroikegawa
1
510
エンジニア採用から始まる技術広報と組織づくり/202506lt
nishiuma
4
560
GitHub Copilot Use Cases at ZOZO
horie1024
1
350
AIエージェントのフレームワークを見るときの個人的注目ポイント
os1ma
1
330
CSSDay, Amsterdam
brucel
0
280
CSSの最新トレンド Ver.2025
tonkotsuboy_com
11
4k
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.7k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Done Done
chrislema
184
16k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Mobile First: as difficult as doing things right
swwweet
223
9.6k
The Language of Interfaces
destraynor
158
25k
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