Server state vs client state in NextJS

Introduction

Server state and client state help manage data in web apps. Server state is data from the server, client state is data stored in the browser.

When you fetch user info from a database on the server.

When you store if a user clicked a button on the page.

When you want to show live data from a server API.

When you keep track of form inputs before sending them.

When you cache server data to avoid extra loading.

Syntax

NextJS

/* Server state example: fetching data in Next.js server component */
export default async function Page() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return <div>{data.message}</div>;
}

/* Client state example: using useState in a React component */
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

Server state is usually fetched asynchronously and can be shared across users.

Client state is local to the user and changes instantly on interaction.

Examples

This fetches user data on the server and shows the name.

NextJS

export default async function Page() {
  const res = await fetch('https://api.example.com/user');
  const user = await res.json();
  return <h1>Hello, {user.name}</h1>;
}

This toggles a button label on the client when clicked.

NextJS

import { useState } from 'react';

export default function Toggle() {
  const [on, setOn] = useState(false);
  return <button onClick={() => setOn(!on)}>{on ? 'ON' : 'OFF'}</button>;
}

Sample Program

This example shows client state with a counter button that updates instantly on click. It also shows server state by fetching a post title from an API and displaying it.

NextJS

import { useState } from 'react';

// Client state: count button
function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>Client State Example</h2>
      <button onClick={() => setCount(count + 1)} aria-label="Increment count">
        Count: {count}
      </button>
    </div>
  );
}

// Server state: fetch message
export async function getServerSideProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts/1');
  const post = await res.json();
  return { props: { title: post.title } };
}

export default function Page({ title }) {
  return (
    <div>
      <Counter />
      <h2>Server State Example: {title}</h2>
    </div>
  );
}

Important Notes

Server state updates when you fetch new data from the server or reload the page.

Client state updates immediately on user actions without needing to reload.

In Next.js, server state can be fetched in server components or data fetching methods like getServerSideProps.

Summary

Server state is data from the server, shared and fetched asynchronously.

Client state is local data in the browser, updated instantly by user actions.

Use server state for data from APIs, client state for UI interactions.