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

Draw a page with SPA

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
610
Git 해부하기 2 + 3
Avatar for Buzzvil buzzvil
0
63
Metastable Failure
Avatar for Buzzvil buzzvil
0
340
Git 해부하기
Avatar for Buzzvil buzzvil
0
77
Introduction to Plate Solving
Avatar for Buzzvil buzzvil
0
70
Airbnb Minerva
Avatar for Buzzvil buzzvil
0
490
Shape up 방법론
Avatar for Buzzvil buzzvil
0
1.1k
Buzzvil Billing Data Pipeline
Avatar for Buzzvil buzzvil
0
700
Journey of Dash's release-cycle
Avatar for Buzzvil buzzvil
0
260

Other Decks in Programming

See All in Programming
AIチームを指揮するOSS「TAKT」活用術 / How to Use “TAKT,” an OSS Tool for Orchestrating AI Teams
Avatar for nrs nrslib
5
620
Why Laravel apps break—Mastering the fundamentals to keep them maintainable
Avatar for 武田 憲太郎 kentaroutakeda
1
180
CSC307 Lecture 17
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
230
Kubernetesを使わない環境にもCloud Nativeなデプロイを実現する / Enabling Cloud Native deployments without the complexity of Kubernetes
Avatar for linyows linyows
3
540
柔軟なPDFレイアウトエディタを支える型システム設計 — Discriminated UnionとConditional Typeの実践
Avatar for minako-ph minako__ph
3
570
ローカルLLMでどこまでコードが書けるか / How much code can be written on a local LLM
Avatar for Naoki Kishida kishida
2
410
TSKaigi 2026 TypeScriptバックエンドのオブザーバビリティ戦略 — Datadog × NestJSの実践
Avatar for Taisei Yamamoto taiseiyamamotoan
1
180
CLIであることを活かしたGitHub Copilot CLI活用術 / GitHub Copilot CLI Pro Tips & Tricks
Avatar for Naoya.i nao_mk2
1
970
Composerを使ったサプライチェーン攻撃の様子を眺めてみる #phpstudy
Avatar for hideki kinjyo o0h
PRO
2
130
AIエージェントの隔離技術の徹底比較
Avatar for kawayu kawayu
0
430
1人1案件のプロダクトエンジニア時代に、"プロセス監督"としてチャレンジしたこと
Avatar for のんちゃん non0113
0
300
Modding RubyKaigi for Myself
Avatar for yui-knk yui_knk
0
430

Featured

See All Featured
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
120
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
540
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7.5k
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
190
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
41
2.5k
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
930
We Analyzed 250 Million AI Search Results: Here's What I Found
Avatar for Josh Blyskal joshbly
1
1.3k
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.2k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
1.9k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
190
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
1k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
270

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