Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Implement prerendering w/ puppeteer

1bf676e4bd36a48bf616c82d6f52c83a?s=47 sota ohara
July 21, 2020
Technology
1
120

Implement prerendering w/ puppeteer

1bf676e4bd36a48bf616c82d6f52c83a?s=128

sota ohara

July 21, 2020
Tweet

More Decks by sota ohara

See All by sota ohara
create own CMS from scratch
1bf676e4bd36a48bf616c82d6f52c83a?s=48 sottar
2
8.1k
Let’s try to hack AST of JavaScript
1bf676e4bd36a48bf616c82d6f52c83a?s=48 sottar
1
1.2k
フロントエンドエンジニアが伝えたい最近の事情
1bf676e4bd36a48bf616c82d6f52c83a?s=48 sottar
28
17k
複数人で高速に開発するためのnpmモジュール
1bf676e4bd36a48bf616c82d6f52c83a?s=48 sottar
5
2.2k
new version of context in React 16.3
1bf676e4bd36a48bf616c82d6f52c83a?s=48 sottar
3
1.1k
2ヶ月半でサービスをリリースした話し
1bf676e4bd36a48bf616c82d6f52c83a?s=48 sottar
2
1.8k
Redux のディレクトリ構成を考える
1bf676e4bd36a48bf616c82d6f52c83a?s=48 sottar
2
13k
モダンなJavaScriptアプリケーションでモダンにスタイリングする方法
1bf676e4bd36a48bf616c82d6f52c83a?s=48 sottar
9
4.7k

Other Decks in Technology

See All in Technology
DevRel組織についての考察
57c9c4b846c73c911cbf795d211904f3?s=48 taijihagino
PRO
0
160
ReverseETLでユーザーに価値を届ける基盤を実現した話
0c847ea07895706f7435ef67d31a5f6e?s=48 hakky
0
360
Amazon Comprehendで始める感情分析
57c6e82f3c8eece6caa83c6d2dadbcb3?s=48 46ta
0
210
Microsoft Azure を使い始める前に Azure Active Directory と Azure サブスクリプションの役割や関係性を正しく理解する
A01eab9adbf2ff21c28289ff1c996232?s=48 yoshiakioi
0
190
JAWS-UG 朝会 #36 登壇資料
08dd0b93e011904f40d60d5a1b54c671?s=48 takakuni
1
600
AWSを使う上で意識しておきたい、クラウドセキュリティ超入門（駆け足版）
Cc073a7c6b0a79918ff1da48acb709e7?s=48 kkmory
0
230
8日で作るオレオレRISC-V CPU
8704bea231d4947980094e915111e950?s=48 matsud224
2
940
やってみたLT会 Fleet Managerのススメ
3282faa17a370dd254382f4bf2c7ba3a?s=48 yukiiiiikuma
PRO
0
420
漫画で使えそうな背景画像をblenderを使って作ってみた！
64482468d2ccebb9284315b8af68c0a1?s=48 nokonoko1203
1
350
Settlement simulation testing to ensure correct settlement processing
23e9a5be8e46efd1cf6a07694a047237?s=48 applepine1125
2
1.7k
PMMやプロダクト関係者と協働するために役割を整理した話 / 20220810_pdmtipslt
Cdf97a1b1b132c56582773c3ba09a3a6?s=48 rakus_dev
0
130
hey BOOK
69f5ab96892df4d8cbe32189f2ed2d9d?s=48 heyinc
26
290k

Featured

See All Featured
Writing Fast Ruby
1f74b13f1e5c6c69cb5d7fbaabb1e2cb?s=48 sferik
612
57k
Git: the NoSQL Database
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
415
59k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
E425fe9f170efa0dfaf8ab69d7107418?s=48 aki_i
25
16k
Three Pipe Problems
11c84dff30266b907714802088852677?s=48 jasonvnalue
89
8.7k
A designer walks into a library…
15f2b8221f247985a27a627d2ece72f0?s=48 pauljervisheath
197
16k
Streamline your AJAX requests with AmplifyJS and jQuery
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
127
8.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
12
940
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
173
8.6k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
651dcfe41723207fbb0aa044a4f7c07f?s=48 dotmariusz
100
6k
Design by the Numbers
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
271
17k
Pencils Down: Stop Designing & Start Developing
79acae287842acf29084005533a7fb3b?s=48 hursman
113
9.9k
How GitHub Uses GitHub to Build GitHub
78b475797a14c84799063c7cd073962f?s=48 holman
465
280k

Transcript

  1. Implement prerendering w/ puppeteer 2020.07.21 隅田川.js#2 Sota Ohara

  2. Sota Ohara Software Engineer at CADDi sottar_ sottar

  3. https://www.sottar.io/

  4. prerendering とは - Web 上でレンダリングをする方法の一つ - CSR, SSR などと並列 -

    各URLに対応する個別の HTML ファイルを事前に生成しておく - TTFB, FP, FCP, TTI の最適化 - エッジキャッシュを活用しやすい - 全ての有効なURLに対してHTMLを生成しておく必要がある - Gatsby, Next.js などでサポートされている

  5. https://developers.google.com/web/updates/2019/02/rendering-on-the-web

  6. puppeteer を使って実装した

  7. puppeteer とは - https://github.com/puppeteer/puppeteer - Headless Chrome Node.js API -

    ヘッドレス（GUIなし）で Chrome を制御できるライブラリ - react-snap や Gatsby の内部で使われている

  8. 登場人物 react, styled-components, puppeteer, webpack, express, MySQL, npm scripts

  9. Application npm run build ① npm run prerender ② bundle.js

    index.html npm-scripts

  10. OGP対応 - OGP タグは react-helmet を使う - OGP用の画像は puppeteer でスクリーンショットを撮ることができる

  11. styled-components のスタイルが取得できない - puppeteer を使ってページの HTML を取得する際に styled-components で当てて いるスタイルの情報が取得できなかった

    - パフォーマンス観点から CSSOM を直接読み込ませているので puppeteer で取得できない - styled-components v5 から導入された disableCSSOMInjection オプションを指定 することで回避

  12. page source Before After

  13. None

  14. We Are Hiring!! https://corp.caddi.jp/recruit/eng