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
160
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.4k
new version of context in React 16.3
sottar
3
1.5k
2ヶ月半でサービスをリリースした話し
sottar
2
2k
Redux のディレクトリ構成を考える
sottar
2
14k
モダンなJavaScriptアプリケーションでモダンにスタイリングする方法
sottar
9
4.9k
Other Decks in Technology
See All in Technology
Azure AI ことはじめ
tsubakimoto_s
0
130
「単なる OAuth 2.0 を認証に使うと、車が通れるほどのどでかいセキュリティー・ホールができる」のか検証してみた
terara
0
380
サービス開発を前に進めるために 新米リードエンジニアが 取り組んだこと / Steps Taken by a Novice Lead Engineer to Advance Service Development
nologyance
0
180
AI研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
130
E2Eテスト自動化プラットフォームにおけるAIの活用
shift_evolve
0
190
Scaling Technical Excellence at 104: Evolution in AWS and Developer Empowerment
scotthsieh825
1
160
dxd2024-生成AIに振り回された3か月間の成功と失敗/dxd2024-link-and-motivation
lmi
2
260
データ分析を支える技術 生成AI再入門
ishikawa_satoru
0
380
AutomatedLabを使って内部ペンテストを勉強しよう! -やられ社内ネットワークの自動構築-
n_etupirka
1
610
年間一億円削減した時系列データベースのアーキテクチャ改善~不確実性の高いプロジェクトへの挑戦~
lycorptech_jp
PRO
3
2.9k
スレットハンティングについて知っておきたいこと
hacket
0
130
Git 研修 Advanced【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
200
Featured
See All Featured
Building Your Own Lightsaber
phodgson
101
5.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
24
1.8k
Build your cross-platform service in a week with App Engine
jlugia
227
17k
Agile that works and the tools we love
rasmusluckow
325
20k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Design by the Numbers
sachag
277
18k
Making the Leap to Tech Lead
cromwellryan
127
8.7k
Designing Experiences People Love
moore
136
23k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
245
1.2M
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
Creatively Recalculating Your Daily Design Routine
revolveconf
214
11k
Gamification - CAS2011
davidbonilla
78
4.9k
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