Overview

In Next.js, Server Components are rendered entirely on the server. This approach supports both SSR (Server-Side Rendering) and SSG (Static Site Generation), offering enhanced performance, improved SEO, and flexible caching compared to client-side fetching.

Core Concepts

Server-Side Only

• Execution Environment: Runs exclusively on the server; browser APIs like window or localStorage are unavailable.
• Logging: console.log outputs appear in server logs, not in the browser's DevTools.

Rendering Methods

• SSR (Server-Side Rendering): Data is fetched at each request, and the server returns fully rendered HTML.
• SSG (Static Site Generation): Data is fetched at build time to generate static HTML files, which boosts performance and scalability.

Caching Strategies

• Custom Fetch Options: Use options such as { cache: "no-cache" } to control caching.
• Built-in Caching: Utilize Next.js features like fetch(..., { next: { revalidate: 10 } }) to implement ISR or reduce redundant fetch calls.

Example

The following example demonstrates a Server Component that fetches data before rendering:

// app/dashboard/page.tsx
export default async function Dashboard() {
  // Customize caching as needed.
  const res = await fetch("<https://api.example.com/data>", { cache: "no-cache" });
  const data = await res.json();

  return (
    <section>
      <h1>Data: {data.title}</h1>
    </section>
  );
}

When to Use

• Static Rendering or SSR:

  Ideal for pages that need data to be available at the initial render.

• Better SEO:

  Fully rendered HTML improves indexing and search visibility.

• Reduced Frontend Load:

  Data is pre-fetched on the server, eliminating additional client-side fetch calls.

Advantages