Draw a page with SPA

By May

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