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
250
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
230
create own CMS from scratch
sottar
2
8.9k
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
5k
Other Decks in Technology
See All in Technology
N=1から解き明かすAWS ソリューションアーキテクトの魅力
kiiwami
0
130
白金鉱業Meetup Vol.17_あるデータサイエンティストのデータマネジメントとの向き合い方
brainpadpr
6
760
OpenID BizDay#17 KYC WG活動報告(法人) / 20250219-BizDay17-KYC-legalidentity
oidfj
0
250
人はなぜISUCONに夢中になるのか
kakehashi
PRO
6
1.7k
関東Kaggler会LT: 人狼コンペとLLM量子化について
nejumi
3
590
データの品質が低いと何が困るのか
kzykmyzw
6
1.1k
インフラをつくるとはどういうことなのか、 あるいはPlatform Engineeringについて
nwiizo
5
2.6k
Raycast AI APIを使ってちょっと便利な拡張機能を作ってみた / created-a-handy-extension-using-the-raycast-ai-api
kawamataryo
0
100
TAMとre:Capセキュリティ編 〜拡張脅威検出デモを添えて〜
fujiihda
2
250
室長と気ままに学ぶマイクロソフトのビジネスアプリケーションとビジネスプロセス
ryoheig0405
0
370
Nekko Cloud、 これまでとこれから ~学生サークルが作る、 小さなクラウド
logica0419
2
970
転生CISOサバイバル・ガイド / CISO Career Transition Survival Guide
kanny
3
1k
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Speed Design
sergeychernyshev
27
790
How STYLIGHT went responsive
nonsquared
98
5.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Designing for Performance
lara
604
68k
Site-Speed That Sticks
csswizardry
4
380
Navigating Team Friction
lara
183
15k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
Facilitating Awesome Meetings
lara
52
6.2k
What's in a price? How to price your products and services
michaelherold
244
12k
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