Client-side rendering (CSR)
Client-side rendering (CSR)
Server-side Rendering (SSR)
Static-site generation (SSG)
*can be fixed via incremental static regeneration (ISR)
Client-side rendering
Server-side rendering
Static site generation
Let's say we have to handle 100 SSR requests per second (259,200,000 requests per month).
The average execution time is 300ms.
We can use the cheapest RAM option (128MB).
We require around 100kb of bandwidth per execution.
SSR
A
SSG + ISR
B
SSG + CSR
D
SSR + CACHE
C
SSR
A
SSG + ISR
B
SSG + CSR
D
SSR + CACHE
C
SSR
A
SSG + ISR
B
SSG + CSR
D
SSR + CACHE
C
SSR
A
SSG + ISR
B
SSG + CSR
D
SSR + CACHE
C
SSR
A
SSG + ISR
B
SSG + CSR
D
SSR + CACHE
C
SSR
A
SSG + ISR
B
SSG + CSR
D
SSR + CACHE
C
SSR
A
SSG + ISR
B
SSG + CSR
D
SSR + CACHE
C
SSR
A
SSG + ISR
B
SSG + CSR
D
SSR + CACHE
C
SSR
A
SSG + ISR
B
SSG + CSR
D
SSR + CACHE
C
SSR
A
SSG + ISR
B
SSG + CSR
D
SSR + CACHE
C
SSR
A
SSG + ISR
B
SSG + CSR
D
SSR + CACHE
C
SSR
A
SSG + ISR
B
SSG + CSR
D
SSR + CACHE
C
Content is dynamic and depends on the user?
Generate a static page at build time and render the dynamic data on the client-side.
Content is static and SEO is important?
Generate a static page at build time and adopt ISR when needed.
Content is static, but the pages gets created dynamically
Server-side render your pages and put your webapp behind a cache.
https://rwnjs.com/order/amazon
https://rwnjs.com/order/packt
Adapted from
Real-World Next.js
@MicheleRiva
@mitch_sleva
@MicheleRivaCode
/in/MicheleRiva95
www.micheleriva.it