Rendering is a crucial aspect of web development, especially when building dynamic and data-driven applications. In Next.js, there are several rendering methods available, each with its own advantages and use cases. In this Article we will explores the concepts of Client-Side Rendering (CSR), Server-Side Rendering (SSR), Static Site Generation (SSG), and Incremental Static Regeneration (ISR).

CSR (Client-Side Rendering)

In Client-Side Rendering, data is fetched from the API on each page request using the 'useEffect' hook, ensuring the data is always up-to-date as it runs after the page is rendered.

These examples all assume that the JSONPlaceholder API endpoint https://jsonplaceholder.typicode.com/posts returns a list of objects, where each object has an id and title. These items are then displayed on the page.

import React, { useEffect, useState } from 'react';

function Page() {
    const [data, setData] = useState(null);

    useEffect(() => {
        fetch('<https://jsonplaceholder.typicode.com/posts>')
            .then(response => response.json())
            .then(json => setData(json));
    }, []);

    return (
        <div>
            {data ? data.map(item => <div key={item.id}>{item.title}</div>) : 'Loading...'}
        </div>
    );
}

export default Page;

SSR (Server-Side Rendering)

In Server-Side Rendering, data is fetched on the server side before the page is loaded on every page request, potentially causing a delay, but ensuring the page is loaded with the fetched data.


export async function getServerSideProps() {
    const res = await fetch('<https://jsonplaceholder.typicode.com/posts>');
    const data = await res.json();

    return { props: { data } };
}

function Page({ data }) {
    return (
        <div>
            {data.map(item => <div key={item.id}>{item.title}</div>)}
        </div>
    );
}

export default Page;

SSG (Static Site Generation)

In Static Site Generation, data is fetched and stored statically at build time, which results in better performance by eliminating the need for dynamic data fetching on each request, as seen in Server-Side Rendering.


export async function getStaticProps() {
    const res = await fetch('<https://jsonplaceholder.typicode.com/posts>');
    const data = await res.json();

    return { props: { data } };
}

function Page({ data }) {
    return (
        <div>
            {data.map(item => <div key={item.id}>{item.title}</div>)}
        </div>
    );
}

export default Page;

ISR (Incremental Static Regeneration)

Incremental Static Regeneration, a combination of Static Site Generation and Server-Side Rendering, initially renders the page statically for faster loading times, and under certain conditions, the page is rebuilt to fetch updated data from the API.

export async function getStaticProps() {
    const res = await fetch('<https://jsonplaceholder.typicode.com/posts>');
    const data = await res.json();

    return {
        props: { data },
        revalidate: 10, 
// The page will be regenerated if the API data changes after 10 seconds
    };
}

function Page({ data }) {
    return (
        <div>
            {data.map(item => <div key={item.id}>{item.title}</div>)}
        </div>
    );
}

export default Page;

Choosing the appropriate rendering method depends on the specific requirements of your application. If you need real-time data updates and interactivity, CSR might be a suitable choice. If you prioritize SEO and initial loading speed, SSR or ISR could be beneficial. SSG is ideal when your data does not require frequent updates and you want to optimize performance.

Understanding these rendering methods empowers developers to make informed decisions and build web applications that deliver the best user experience based on their specific needs.

Luminary

NextJS Data Fetching 101

How to Approach Front-End?

My Favourite NextJS Tricks

Yarn Commands

Why I Prefer REM over Pixel