[NextJS - when to use Client vs Server Components] #NextJS

README.md

NextJS - when to use Client vs Server Components

Client	Server
Use React hooks such as useState, useEffect, useReducer	Fetch Data
Interactivity within the component, with event listeners (onClick())	Store sensitive information on server (tokens, API keys, etc.)
Use custom hooks that depend on state, effects.	Access backend resources directly
	Keep large dependencies on the server

Data Fetching Strategies

Data Fetching Strategies can be declared on a Page-by-Page basis

Static Data Fetching Aproach - Static Site Generation

This is the default behavior ( unless specified otherwise )

great solution for pages that dont change often ( such as blog posts or help documents )

1. Data is fecthed once at build time
2. Fetched data is cached and reused on subsquent requests

sequenceDiagram
    actor User
    box gray Build Time
    participant Cache
    participant Data
    end
    box Another group
    end
    Cache->>Data: Server Side Request 
    User->>Cache: Request
    

Loading

Following example pulls data from the cache rather than a live request

async function fetchData() {
  const res = await fetch( 'https://reqbin.com/echo' ); // default is a static site generation
  const data = await res.json();
  return data;
}

Static Data Fetching Aproach - Revalidation or Incremental Static Regeneration (ISR)

1. Data is fecthed and cached at build time
2. Fetched data is extracted from the cached and reused on subsquent requests until it is expired.
3. Once data is expired, the server is contacted and the data is refreshed.

sequenceDiagram
    actor User
    box gray Build Time
    participant Cache
    participant Data
    end
    Cache->>Data: Server Side Request
    activate Cache
    User->>Cache: Request
    Cache->>Cache: Expire
    Cache->>Data: Server request

Loading

Following example pulls data from the cache rather than a live request, and refreshes every n seconds

async function fetchData() {
  const res = await fetch( 
    'https://reqbin.com/echo', 
    { next: { revalidate: 15 } } ); // will call a fresh request every 15 seconds
  const data = await res.json();
  return data;
}

Dynamic Data Fetching - Server-Side Rendering

1. No caching at all.
2. All data is fetched from the server

sequenceDiagram
    actor User
    box gray Server
    participant Data
    end
    User->>Data: Request

Loading

Following example pulls data from the server, every time

async function fetchData() {
  const res = await fetch( 
    'https://reqbin.com/echo',
    { cache: 'no-store' }
  ); // No cache, every request
  const data = await res.json();
  return data;
}