Next.js - Client Side Rendering

---

---

Next.js uses React.js to support client-side rendering for building highly interactive user interfaces. In this chapter we will explore what is client side rendering, it's advantages, disadvantages and learn to implement client side rendering in Next.js.

What is Client Side Rendering?

Client Side Rendering is a technique used in web applications, where content is rendered in user's browser using JavaScript. The user's browser downloads a minimal HTML page and the JavaScript needed for the webpage and then the JavaScript is used to update the DOM and render the page. When the application is first loaded, the user may notice a slight delay before they can see the full page, this is because the page isn't fully rendered until all the JavaScript is downloaded, parsed, and executed.

Advantages of CSR

• With client side rendering, we can make highly interactive user interfaces as full control of JavaScript is given to user's browser.
• Client side rendering can provide better performance in the case of repeated visits, due to caching.
• It reduces server-side computation for rendering views.

Disadvantages of CSR

• Client Side Side Rendering can impact SEO of your webpage. Some search engine crawlers might not execute JavaScript and therefore only see the initial empty or loading state of your application.
• Client Side Rendering leads to performance issues for users with slower internet connections or devices, as they need to wait for all the JavaScript to load and run before they can see the full page.

Client Side Rendering In Next.js

Next.js provides a hybrid approach that allows you to use a combination of server-side rendering, static site generation, and client-side rendering, depending on the needs of each page in your application. In Next.js, if you add a 'use client' declaration on top of page, the page will become client component and it will rendered on client side. You can use React hooks and functions inside client components of Next.js

Example of Client Side Rendering

In the following example, we have used useState and useEffect hooks to fetch data from external API and display in webpage. We added a loading component that will be visible until data fetched from API.

'use client'; // Define as Client Component

import { useState, useEffect } from 'react';

export default function CSRPage() {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await fetch('https://link/to/api');
                const json = await response.json();
                setData(json);
            } catch (error) {
                console.error('Error fetching data:', error);
            } finally {
                setLoading(false);
            }
        };
        fetchData();
    }, []);

    return (
        <div>
            <h1>{loading ? 'Loading...' : 'Client-Side Rendered Page'}</h1>
            {!loading && data && (
                <ul>
                    {data.map((item) => (
                        <li key={item.id}>{item.title}</li>
                    ))}
                </ul>
            )}
        </div>
    );
}

Output

In the output you can see that loading component is displayed until API data ready to display.