Next.js uses 4 rendering strategies to build, deliver and render a React Single Page App (SPA):

• Static-Site Generation (SSG)
• Server-Side Rendering (SSR)
• Incremental Static Regeneration (ISR)
• Client-Side Rendering (CSR)

This is the easiest and most complete cheat sheet to quickly understand how Next.js page rendering strategies works. Moreover, this unique cheat sheet clearly reveals how each strategy influences the Core Web Vitals signals: TTFB, FP, FCP, LCP, TBT and TTI.

Detailed explanations are also included to help you choose the right page rendering strategy for all use cases and thus create speedy Web applications that Google and visitors love.

P.S.: Thanks in advance for including this cheat sheet in your blog articles and mentioning the author with a link back to this cheat sheet like this: The Ultimate Cheat Sheet to Page Rendering in Next.js.

Enjoy!

#next #nextjs #react