addyosmani / next-page-rendering

Next.js supports 4 rendering strategies to generate, deliver and render a React Single Page App on the client side: SSG, SSR, ISR and CSR.

Next.js 12+ Page Rendering

Next.js supports at least 4 rendering strategies to generate, deliver and render a React Single Page App on the client-side:

1. Static-Site Generation (SSG)
2. Server-Sider Rendering (SSR)
3. Incremental Static Regeneration (ISR)
4. Client-Side Rendering (CSR)

The fetching methods are getServerSideProps, getStaticProps.

Demo

Live demo for performance and Lighhouse testing with Chrome DevTools available here:
Next.js Page Rendering Demo

Tutorial

The sources in this demo were originally part of the following Next.js page rendering tutorial, which I recommend reading.