Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Draw a page with SPA

Avatar for Buzzvil Buzzvil
May 12, 2021
Programming
270
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
730
Git 해부하기 2 + 3
Avatar for Buzzvil buzzvil
0
81
Metastable Failure
Avatar for Buzzvil buzzvil
0
430
Git 해부하기
Avatar for Buzzvil buzzvil
0
110
Introduction to Plate Solving
Avatar for Buzzvil buzzvil
0
98
Airbnb Minerva
Avatar for Buzzvil buzzvil
0
620
Shape up 방법론
Avatar for Buzzvil buzzvil
0
1.2k
Buzzvil Billing Data Pipeline
Avatar for Buzzvil buzzvil
0
770
Journey of Dash's release-cycle
Avatar for Buzzvil buzzvil
0
330

Other Decks in Programming

See All in Programming
flutter_test のその先へ — Flutter アプリの LLM 機能に「評価」という品質保証を
Avatar for Kosuke Saigusa kosukesaigusa
0
110
S3 TablesのIcebergデータに、AIエージェントからアクセスしてみた / 20261016developersio2026joetsu-accessing-iceberg-in-s3tables-via-agent
Avatar for kasacchiful kasacchiful
PRO
0
230
TanStack Vue Query と Pinia Colada から学ぶ非同期状態の型設計
Avatar for aoshi aoshi
0
360
조합이폭발하는디자인시스템이걸눈으로도테스트하라고요
Avatar for giljongyu giljongyu
0
640
AI-Powered Domain-Driven Design
Avatar for Alberto Brandolini ziobrando
0
350
AI時代のTerminal環境を UNIX哲学で設計・運用する
Avatar for yasunori yasunori0418
1
310
AI時代のシニアエンジニアとは
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
12
11k
全ての永続トークンを、生まれる前に消し去りたい！
Avatar for sylph01 sylph01
2
1.5k
Inertia Rails: The One-Person Framework with React & Friends
Avatar for Svyatoslav Kryukov skryukov
0
190
PyConTW 2026 - AI Coding 不只是工具升級, 區域醫院醫療資訊系統協作開發與資訊團隊轉型實踐
Avatar for Max Lai cclai999
0
210
HTML-in-Canvasで作る未来のWeb UI表現
Avatar for IKEDA Yasunobu clockmaker
5
6k
AI時代のIaC入門 〜なぜインフラをコードで管理したいのか？〜 / Introduction to IaC in the AI Era
Avatar for アキキー | Akihisa Ikeda akihisaikeda
5
1.3k

Featured

See All Featured
Test your architecture with Archunit
Avatar for Yoan thirion
2
2.5k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.8k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
270
14k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
66
8.7k
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
500
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
3
1.5k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
2
760
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
340
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
510
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
33
5.4k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
7k
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
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