Next.js 15 Fullstack (App Router + Server Actions) · 课时

理解 RSC 与 RCC

掌握 React Server Components（RSC）与 React Client Components（RCC）在 Next.js 15 中的核心区别和优势

理解 RSC 与 RCC 是 CoddyKit 上的免费 Next.js 15 Fullstack (App Router + Server Actions) 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Next.js 15 Fullstack (App Router + Server Actions) 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Next.js 15 Fullstack (App Router + Server Actions) 课程共包含 4 节课。

本课时的部分内容尚未翻译，以英文显示。

Welcome to Next.js Components!

In Next.js 15, building user interfaces relies heavily on React components. But there's a new twist!

Traditionally, all React components run in the user's browser.
Next.js 15 introduces two main types: Server Components (RSC) and Client Components (RCC).
Understanding their differences is crucial for building fast, efficient, and interactive Next.js applications. Let's dive in!

What are Server Components (RSC)?

React Server Components (RSC) are components that run exclusively on the server, before any JavaScript is sent to the browser.

They generate HTML directly on the server.
This HTML is then sent to the client, along with any necessary client-side JavaScript for interactive parts.
RSCs are the default component type in the Next.js App Router.

RSC in Action: A Simple Header

Here's a basic component. Since there's no 'use client' directive and no interactive features (like state or event handlers), Next.js treats this as a Server Component by default.

It runs on the server, renders its HTML, and that's what the browser receives.

import React from 'react';

interface HeaderProps {
  title: string;
}

export default function Header({ title }: HeaderProps) {
  return (
    <header>
      <h1>{title}</h1>
      <p>Welcome to our page!</p>
    </header>
  );
}

Benefits of Server Components

RSCs offer significant advantages for performance and efficiency:

Zero Client JS: They don't add to the client-side JavaScript bundle, leading to faster page loads.
Direct Server Access: Can directly access server resources (like databases or file systems) without needing client-side API calls.
Improved SEO: Content is rendered on the server, making it easily crawlable by search engines.
Enhanced Security: Sensitive logic and data fetching stay on the server.

What are Client Components (RCC)?

React Client Components (RCC) are what you're likely familiar with – they run entirely in the user's browser, just like traditional React components.

They enable interactivity, client-side state management, and access to browser-specific APIs (like localStorage or navigator).
RCCs require JavaScript to be downloaded and executed in the browser.

RCC in Action: An Interactive Button

This component uses useState to manage a counter and an event handler to update it. Because it needs client-side interactivity, we mark it with 'use client'.

This directive tells Next.js to send this component's JavaScript to the browser for execution.

'use client';

import React, { useState } from 'react';

export default function CounterButton() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

The 'use client' Directive

The 'use client' directive is a critical marker in Next.js:

It must be placed at the very top of a file, before any imports.
It signals to Next.js that this file, and any modules it imports, should be treated as part of the client bundle.
This directive acts as a 'boundary' – everything below it, including imported child components (unless explicitly marked as RSCs), will render on the client.

Key Differences at a Glance

Here's a quick comparison of RSCs and RCCs:

Execution: RSC (Server), RCC (Browser)
Interactivity: RSC (No), RCC (Yes, with hooks/events)
State/Effects: RSC (No), RCC (Yes, useState, useEffect)
Bundle Size: RSC (Adds zero client JS), RCC (Adds to client JS bundle)
Data Access: RSC (Direct server resources), RCC (Needs client-side fetching or props)
Directive: RSC (Default, no directive), RCC (Requires 'use client')

When to Use Which Component Type?

Choosing between RSC and RCC depends on your component's needs:

Use RSC for: Static content, initial data fetching (e.g., from a database), SEO-critical parts, components that don't need client-side interactivity.
Use RCC for: Interactive UI elements (buttons, forms), client-side state management, components requiring browser APIs (e.g., geolocation, local storage), animations.

Often, you'll compose RSCs and RCCs together for a powerful user experience!

Quick Check

Which of the following statements about React Server Components (RSC) and React Client Components (RCC) in Next.js 15 are TRUE?

Recap: RSC & RCC Fundamentals

You've learned the core differences between Server and Client Components in Next.js 15!

Server Components (RSC): Run on the server, generate HTML, reduce client JS, are the default.
Client Components (RCC): Run in the browser, enable interactivity and state, require the 'use client' directive.
Combining them allows you to build highly performant and dynamic web applications.

Next, we'll explore how to fetch data specifically within Server Components efficiently!

常见问题解答

「理解 RSC 与 RCC」课时是免费的吗？

是的 — 「理解 RSC 与 RCC」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Next.js 15 Fullstack (App Router + Server Actions) 课程的其余内容，请升级到 CoddyKit PRO。 Next.js 15 Fullstack (App Router + Server Actions) 课程共包含 4 节课。

「理解 RSC 与 RCC」这节课中我会学到什么？

掌握 React Server Components（RSC）与 React Client Components（RCC）在 Next.js 15 中的核心区别和优势你通过在浏览器中直接运行的动手代码来练习 Next.js 15 Fullstack (App Router + Server Actions)，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Next.js 15 Fullstack (App Router + Server Actions) 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Next.js 15 Fullstack (App Router + Server Actions) 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「理解 RSC 与 RCC」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Next.js 15 Fullstack (App Router + Server Actions) 课中编写并运行代码吗？

能。每节 Next.js 15 Fullstack (App Router + Server Actions) 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Next.js 15 Fullstack (App Router + Server Actions)