Next.js Rendering

readme.md

Why next.js?

1. File-System Routing ‘pages/index.js’
2. Image optimization ‘next/image’
3. Fast Refresh
4. Static Assets ‘public/’
5. Built-in CSS support
6. API Routes ‘pages/api/user.js’
7. Code Splitting & Bundling
8. TypeScript Support

Data Fetching Approaches

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

Client side rendering

Steps

1. Server renders the page without any dynamic data
2. Client immediately shows the page (without dynamic data)
3. Page displays a loading state (for loading dynamic data)
4. Next.js makes all the API calls (to fetch dynamic data)
5. Next.js renders missing dynamic data on the client side

PRO

• Page gets display immediately
• Build single page application

CON

• No initial render dynamic data
• Bad for search engine optimization

USECASE

• Private dashboard pages
• E-commerce sites cart page
• Pages where SEO is not relevant
• Pages with frequently updating data
• Banking sites (request data securely only when needed)

Server Side Rendering

Direct page request

• Server pre-renders the page with dynamic data
• Client shows the pre-rendered page

Client-Side Page Request

1. Next.js sends an API request to the server
2. Server runs the getServerSideProps
3. Server returns resulting JSON as a response
4. Next.js uses this JSON response to render the page

PRO

• Dynamic content is available when page render
• Good for Search Engine Optimization
• Page has no blank loading state since it’s pre-rendered

CON

• Slower time to first byte (due to pre-rendering), we have to wait a little bit before render a page
• Slower rendering on the server
• Results cannot be cached by a CDN without extra configuration
• Incompatible with libraries that need access to the Document

USECASE

• When pages data must be fetched at request time
• When you have lots of page
• Pages with heavy work-load (easier for server than client)

Static Site Generation

Basic Static Site Generation

1. Server generates the page on build time
2. Server generates pages with or without dynamic data
3. Client immediately shows the static generated page

Incremental Static Regeneration

1. Server generates pages with defined paths on build time
2. Client immediately shows the static generated page
3. If a user requests a non-generated page (undefined path)
   1. Next.js will serve a “fallback” version (loading state)
   2. Next.js will send an API request to the server
   3. Server will statically generate this page in the background
   4. Next.js will serve the generated page to the browser
   5. Next.js will add this path to the list of pre-generated pages
4. On a subsequent request to same path (generated above)
   1. Next.js will serve the generated page
   2. Just like other pages pre-generated at the build time

PRO

• Incredibly fast
• Build once and served by CDN
• Page gets cached for long time (until the new build)
• Page gets displayed immediately
• Build Offline progressive web apps
• Generate millions of pages incrementally
• Great for Search Engine Optimization (SEO)
• No server needed (CDN only / non-incremental)

CON

• Slow server side site-builds
• Incompatible with libraries that need access to the document

USECASE

• Blog posts
• Marketing pages
• Help and documentation
• E-commerce product listings
• Pages that are infrequently updated

Refrences:

https://blog.logrocket.com/incremental-static-regeneration-with-next-js/