Next.js App Router Performance

Next.js App Router introduces a new paradigm for building React applications, focusing on Server Components and optimized data fetching.

Always remember to use Server Components by default. Only use Client Components when interactivity is required.

Server Components

Server Components allow you to render components on the server, reducing the amount of JavaScript sent to the client.

// This is a Server Component by default
export default async function Page() {
  const data = await fetch('https://api.example.com/data').then((res) => res.json());
  return <div>{data.title}</div>;
}

Client Components

Use the 'use client' directive to create Client Components.

'use client';

import { useState } from 'react';

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

Next.js Performance — Optimizing Next.js applications.