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

Draw a page with SPA

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Buzzvil Buzzvil
May 12, 2021
Programming
0
220

Draw a page with SPA

By May

Avatar for Buzzvil

Buzzvil

May 12, 2021
Tweet

More Decks by Buzzvil

See All by Buzzvil
220903_GFS
Avatar for Buzzvil buzzvil
0
560
Git 해부하기 2 + 3
Avatar for Buzzvil buzzvil
0
54
Metastable Failure
Avatar for Buzzvil buzzvil
0
280
Git 해부하기
Avatar for Buzzvil buzzvil
0
68
Introduction to Plate Solving
Avatar for Buzzvil buzzvil
0
57
Airbnb Minerva
Avatar for Buzzvil buzzvil
0
420
Shape up 방법론
Avatar for Buzzvil buzzvil
0
1k
Buzzvil Billing Data Pipeline
Avatar for Buzzvil buzzvil
0
650
Journey of Dash's release-cycle
Avatar for Buzzvil buzzvil
0
220

Other Decks in Programming

See All in Programming
Implementation Patterns
Avatar for Denys Poltorak denyspoltorak
0
290
OSSとなったswift-buildで Xcodeのビルドを差し替えられるため 自分でXcodeを直せる時代になっている ダイアモンド問題編
Avatar for yimajo yimajo
3
620
AIによるイベントストーミング図からのコード生成 / AI-powered code generation from Event Storming diagrams
Avatar for nrs nrslib
2
1.9k
CSC307 Lecture 04
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
660
今こそ知るべき耐量子計算機暗号(PQC)入門 / PQC: What You Need to Know Now
Avatar for mackey0225 mackey0225
3
370
AI巻き込み型コードレビューのススメ
Avatar for Nealle nealle
1
240
Oxlint JS plugins
Avatar for kazupon kazupon
1
950
Basic Architectures
Avatar for Denys Poltorak denyspoltorak
0
670
Grafana：建立系統全知視角的捷徑
Avatar for Blueswen blueswen
0
330
AtCoder Conference 2025
Avatar for shindannin shindannin
0
1.1k
Best-Practices-for-Cortex-Analyst-and-AI-Agent
Avatar for ryotaro.ikeda@finatext.com ryotaroikeda
1
110
LLM Observabilityによる 対話型音声AIアプリケーションの安定運用
Avatar for Hiroyuki Moriya gekko0114
2
430

Featured

See All Featured
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
280
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.8k
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
1
99
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
0
68
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
120
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
430
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.1k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6k

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