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
Slide 2
Slide 2 text
Copyright ⓒ All Right Reserved by Buzzvil
Terms
SPA
SSR
CSR
TTFB
FP
FCP
TTI
Slide 3
Slide 3 text
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
Slide 4
Slide 4 text
Copyright ⓒ All Right Reserved by Buzzvil
SPA?
Single Page Application
multiple pages on one page!
Slide 5
Slide 5 text
Copyright ⓒ All Right Reserved by Buzzvil
SPA?
Single Page Application
multiple pages on one page!
Slide 6
Slide 6 text
Copyright ⓒ All Right Reserved by Buzzvil
Rendering History
Slide 7
Slide 7 text
Copyright ⓒ All Right Reserved by Buzzvil
Rendering?
Slide 8
Slide 8 text
Copyright ⓒ All Right Reserved by Buzzvil
Rendering?
HTML
CSS
JavaScript
DOM CSSOM
Render
Tree
Layout Paint Composite
Slide 9
Slide 9 text
Copyright ⓒ All Right Reserved by Buzzvil
Static Rendering? (1990s)
Static Rendering
CSS
+
JS
+
HTML
=> Ready to
render HTML
Client: Request Page!
Sever: Respond Page!
Slide 10
Slide 10 text
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!
Slide 11
Slide 11 text
Copyright ⓒ All Right Reserved by Buzzvil
Era of Mobile: Limitation of Static Rendering
ios, aos:
I need to use native UI
Slide 12
Slide 12 text
Copyright ⓒ All Right Reserved by Buzzvil
Ajax (2005)
Slide 13
Slide 13 text
Copyright ⓒ All Right Reserved by Buzzvil
Ajax?
Asynchronous
Javascript
and
Xml
Slide 14
Slide 14 text
Copyright ⓒ All Right Reserved by Buzzvil
Ajax?
Asynchronous
Javascript
and
Xml XML
CSV
JSON
...
Slide 15
Slide 15 text
Copyright ⓒ All Right Reserved by Buzzvil
SPA!
Single Page Application
Fetching data seamlessly!
Slide 16
Slide 16 text
Copyright ⓒ All Right Reserved by Buzzvil
SPA!
Single Page Application
Fetching data seamlessly!
Slide 17
Slide 17 text
Copyright ⓒ All Right Reserved by Buzzvil
SPA!
Single Page Application
Fetching data seamlessly!
Slide 18
Slide 18 text
Copyright ⓒ All Right Reserved by Buzzvil
SPA!
Single Page Application
Fetching data seamlessly!
Slide 19
Slide 19 text
Copyright ⓒ All Right Reserved by Buzzvil
SPA!
Single Page Application
Fetching data seamlessly!
Slide 20
Slide 20 text
Copyright ⓒ All Right Reserved by Buzzvil
SPA!
Single Page Application
Fetching data seamlessly!
Slide 21
Slide 21 text
Copyright ⓒ All Right Reserved by Buzzvil
What makes ( ) possible?
Module bundler.
like Webpack.
&
Slide 22
Slide 22 text
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
Slide 23
Slide 23 text
Copyright ⓒ All Right Reserved by Buzzvil
CSR, meaningless first TTFB
Slide 24
Slide 24 text
Copyright ⓒ All Right Reserved by Buzzvil
CSR, TTI >>> FCP
?
undefined
Slide 25
Slide 25 text
Copyright ⓒ All Right Reserved by Buzzvil
CSR, bad SEO
?
Slide 26
Slide 26 text
Copyright ⓒ All Right Reserved by Buzzvil
SSR?
Server Side Rendering
CSS
+
JS
+
HTML
=> Ready to
render HTML
Client: Request Page!
Sever: Respond Page!
Slide 27
Slide 27 text
Copyright ⓒ All Right Reserved by Buzzvil
SSR, Flickering
Server Side Rendering
Flickering issue!
Slide 28
Slide 28 text
Copyright ⓒ All Right Reserved by Buzzvil
SSR, Flickering
Server Side Rendering
Flickering issue!
Slide 29
Slide 29 text
Copyright ⓒ All Right Reserved by Buzzvil
SSR, Flickering
Server Side Rendering
Flickering issue!
Slide 30
Slide 30 text
Copyright ⓒ All Right Reserved by Buzzvil
SSR, Slow TTFB
Server Side Rendering
Slide 31
Slide 31 text
Copyright ⓒ All Right Reserved by Buzzvil
from SSR to CSR
https://developers.google.com/web/updates/2019/02/rendering-on-the-web
Slide 32
Slide 32 text
Copyright ⓒ All Right Reserved by Buzzvil
Thank you
Ad Product Team
May Min
2021.05.12