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

Draw a page with SPA

Avatar for Buzzvil Buzzvil
May 12, 2021
Programming
230
0

Draw a page with SPA

By May

Avatar for Buzzvil

Buzzvil

May 12, 2021

More Decks by Buzzvil

See All by Buzzvil
220903_GFS
Avatar for Buzzvil buzzvil
0
600
Git 해부하기 2 + 3
Avatar for Buzzvil buzzvil
0
61
Metastable Failure
Avatar for Buzzvil buzzvil
0
320
Git 해부하기
Avatar for Buzzvil buzzvil
0
71
Introduction to Plate Solving
Avatar for Buzzvil buzzvil
0
69
Airbnb Minerva
Avatar for Buzzvil buzzvil
0
470
Shape up 방법론
Avatar for Buzzvil buzzvil
0
1k
Buzzvil Billing Data Pipeline
Avatar for Buzzvil buzzvil
0
690
Journey of Dash's release-cycle
Avatar for Buzzvil buzzvil
0
240

Other Decks in Programming

See All in Programming
【26新卒研修資料】TDD実装演習
Avatar for ディップ株式会社 dip_tech
PRO
0
130
Terraform言語の静的解析 / static analysis of Terraform language
Avatar for Kazuma Watanabe wata727
1
120
TiDBのアーキテクチャから学ぶ分散システム入門 〜MySQL互換のNewSQLは何を解決するのか〜 / tidb-architecture-study
Avatar for DPon dznbk
1
200
PCOVから学ぶコードカバレッジ #phpcon_odawara
Avatar for hideki kinjyo o0h
PRO
0
280
AIエージェントで業務改善してみた
Avatar for takumi taku271
0
550
Lightning-Fast Method Calls with Ruby 4.1 ZJIT / RubyKaigi 2026
Avatar for Takashi Kokubun k0kubun
3
1.9k
「話せることがない」を乗り越える 〜日常業務から登壇テーマをつくる思考法〜
Avatar for ShoheiMitani shoheimitani
4
910
How We Practice Exploratory Testing in Iterative Development( #scrumniigata ) / 反復開発の中で、探索的テストをどう実施しているか
Avatar for teyamagu teyamagu
PRO
0
110
🦞OpenClaw works with AWS
Avatar for matsukada licux
1
310
ハーネスエンジニアリングにどう向き合うか 〜ルールファイルを超えて開発プロセスを設計する〜 / How to approach harness engineering
Avatar for r-kagaya rkaga
24
16k
Claude CodeでETLジョブ実行テストを自動化してみた
Avatar for yoshiki kasama yoshikikasama
0
1.1k
PHPer、Cloudflare に引っ越す
Avatar for Suguru Oki / スー suguruooki
1
120

Featured

See All Featured
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
2
1k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.9k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
130
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.4k
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
350
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
9.9k
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
190
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
3.9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k

Transcript

  1. Copyright ⓒ All Right Reserved by Buzzvil Draw a page

    w/SPA! Ad Product Team May Min 2021.05.12 Server Side Rendering & Client Side Rendering

  2. Copyright ⓒ All Right Reserved by Buzzvil Terms SPA SSR

    CSR TTFB FP FCP TTI

  3. Copyright ⓒ All Right Reserved by Buzzvil Terms SPA: Single

    Page Application SSR: Server Side Rendering CSR: Client Side Rendering TTFB: Time to First Byte FP: First Paint FCP: First Contentful Paint TTI: Time to Interactive

  4. Copyright ⓒ All Right Reserved by Buzzvil SPA? Single Page

    Application multiple pages on one page!

  5. Copyright ⓒ All Right Reserved by Buzzvil SPA? Single Page

    Application multiple pages on one page!

  6. Copyright ⓒ All Right Reserved by Buzzvil Rendering History

  7. Copyright ⓒ All Right Reserved by Buzzvil Rendering?

  8. Copyright ⓒ All Right Reserved by Buzzvil Rendering? HTML CSS

    JavaScript DOM CSSOM Render Tree Layout Paint Composite

  9. Copyright ⓒ All Right Reserved by Buzzvil Static Rendering? (1990s)

    Static Rendering CSS + JS + HTML => Ready to render HTML Client: Request Page! Sever: Respond Page!

  10. Copyright ⓒ All Right Reserved by Buzzvil Era of Mobile:

    Limitation of Static Rendering ~Page 1 w/SSR~ Client: Request Page! Sever: Respond Page! ~Page 2 w/SSR~ Client: Request Page! Sever: Respond Page!

  11. Copyright ⓒ All Right Reserved by Buzzvil Era of Mobile:

    Limitation of Static Rendering ios, aos: I need to use native UI

  12. Copyright ⓒ All Right Reserved by Buzzvil Ajax (2005)

  13. Copyright ⓒ All Right Reserved by Buzzvil Ajax? Asynchronous Javascript

    and Xml

  14. Copyright ⓒ All Right Reserved by Buzzvil Ajax? Asynchronous Javascript

    and Xml XML CSV JSON ...

  15. Copyright ⓒ All Right Reserved by Buzzvil SPA! Single Page

    Application Fetching data seamlessly!

  16. Copyright ⓒ All Right Reserved by Buzzvil SPA! Single Page

    Application Fetching data seamlessly!

  17. Copyright ⓒ All Right Reserved by Buzzvil SPA! Single Page

    Application Fetching data seamlessly!

  18. Copyright ⓒ All Right Reserved by Buzzvil SPA! Single Page

    Application Fetching data seamlessly!

  19. Copyright ⓒ All Right Reserved by Buzzvil SPA! Single Page

    Application Fetching data seamlessly!

  20. Copyright ⓒ All Right Reserved by Buzzvil SPA! Single Page

    Application Fetching data seamlessly!

  21. Copyright ⓒ All Right Reserved by Buzzvil What makes (

    ) possible? Module bundler. like Webpack. &

  22. Copyright ⓒ All Right Reserved by Buzzvil CSR? Client Side

    Rendering HTML Client: Browser do every rendering! (All logic, data fetching, templating and routing) Sever: Respond API call! CSS JS

  23. Copyright ⓒ All Right Reserved by Buzzvil CSR, meaningless first

    TTFB <div id=root />

  24. Copyright ⓒ All Right Reserved by Buzzvil CSR, TTI >>>

    FCP ? undefined

  25. Copyright ⓒ All Right Reserved by Buzzvil CSR, bad SEO

    ?

  26. Copyright ⓒ All Right Reserved by Buzzvil SSR? Server Side

    Rendering CSS + JS + HTML => Ready to render HTML Client: Request Page! Sever: Respond Page!

  27. Copyright ⓒ All Right Reserved by Buzzvil SSR, Flickering Server

    Side Rendering Flickering issue!

  28. Copyright ⓒ All Right Reserved by Buzzvil SSR, Flickering Server

    Side Rendering Flickering issue!

  29. Copyright ⓒ All Right Reserved by Buzzvil SSR, Flickering Server

    Side Rendering Flickering issue!

  30. Copyright ⓒ All Right Reserved by Buzzvil SSR, Slow TTFB

    Server Side Rendering

  31. Copyright ⓒ All Right Reserved by Buzzvil from SSR to

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

  32. Copyright ⓒ All Right Reserved by Buzzvil Thank you Ad

    Product Team May Min 2021.05.12