客户端组件与交互性
学习在何时以及如何使用客户端组件，构建需要客户端状态的交互式用户界面元素。
客户端组件与交互性 是 CoddyKit 上的免费 Next.js 15 Fullstack Web Apps 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Next.js 15 Fullstack Web Apps 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Next.js 15 Fullstack Web Apps 课程共包含 4 节课。
本课时的部分内容尚未翻译，以英文显示。
Meet Client Components
Welcome to Client Components! In Next.js with the App Router, components are Server Components by default. But sometimes, you need interactivity directly in the browser.
Client Components are special components that run on the client-side, meaning in the user's web browser. They are essential for adding dynamic features to your application.
Server vs. Client: A Quick Look
Let's quickly recap: Server Components render on the server, ideal for static content, data fetching, and reducing client-side JavaScript.
Client Components, on the other hand, allow for:
- User interaction (clicks, input changes)
- Managing state with React Hooks (
useState,useEffect) - Accessing browser-specific APIs (
localStorage,window)
They bring your UI to life!
Why Use Client Components?
You should reach for a Client Component when your UI needs to be interactive. Think about common web features:
- Counters & Toggles: Any UI element that changes based on user input.
- Forms: Input fields, validation, and submission logic.
- Animations: Client-side animations and transitions.
- Real-time Updates: Components that respond to WebSocket events.
- Browser-specific Logic: Anything that directly manipulates the DOM or uses browser APIs.
The 'use client' Directive
To tell Next.js that a component should be a Client Component, you simply add the "use client" directive at the very top of the file, before any imports.
This directive is crucial! It marks the boundary between server-side and client-side code. Everything below it (including imported modules) will be treated as part of the client bundle.
Building an Interactive Counter
Here's a classic example: a simple counter. Notice the "use client" directive and the use of React's useState Hook to manage the count.
The button's onClick handler updates the state, triggering a re-render in the browser.
"use client";
import React, { useState } from 'react';
export default function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>
Increment
</button>
</div>
);
}Handling More Interactions
Beyond simple clicks, Client Components excel at managing input from users. Here's an example using an input field to mirror text as you type.
The onChange event handler updates the component's state every time the input value changes.
"use client";
import React, { useState } from 'react';
export default function InputMirror() {
const [text, setText] = useState('');
return (
<div>
<input
type="text"
value={text}
onChange={(e) => setText(e.target.value)}
placeholder="Type here..."
/>
<p>You typed: {text}</p>
</div>
);
}Client-Side Effects with useEffect
The useEffect Hook is your go-to for side effects that need to run in the browser, like setting up timers, fetching data on component mount, or subscribing to external events.
This timer component uses useEffect to update its seconds state every second.
"use client";
import React, { useState, useEffect } from 'react';
export default function Timer() {
const [seconds, setSeconds] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setSeconds(prev => prev + 1);
}, 1000);
return () => clearInterval(interval); // Cleanup function
}, []); // Empty dependency array means run once on mount
return (
<p>Timer: {seconds} seconds</p>
);
}Accessing Browser Features
Since Client Components run in the browser, they have full access to browser-specific APIs and global objects like window and localStorage.
This example shows how to read from and write to localStorage, which is unavailable in Server Components.
"use client";
import React, { useState, useEffect } from 'react';
export default function LocalStorageDisplay() {
const [storedValue, setStoredValue] = useState('');
useEffect(() => {
// This code runs only on the client after hydration
const item = localStorage.getItem('myKey');
if (item) {
setStoredValue(item);
}
}, []);
const saveValue = () => {
localStorage.setItem('myKey', 'Hello from CoddyKit!');
setStoredValue('Hello from CoddyKit!');
};
return (
<div>
<p>Stored: {storedValue || 'Nothing yet!'}</p>
<button onClick={saveValue}>
Save to LocalStorage
</button>
</div>
);
}Nesting Client Components
You can nest Client Components within other Client Components, and even within Server Components. A Server Component can render a Client Component as a child.
When a Server Component renders a Client Component, the Client Component's JavaScript is sent to the browser, and it 'hydrates' (becomes interactive) once loaded.
This allows you to build complex UIs where static parts are server-rendered, and interactive parts are client-rendered.
Client Component Check
Time to test your understanding of Client Components!
Client Components: Key Takeaways
You've mastered the basics of Client Components!
- They are marked with
"use client"at the top of the file. - Essential for interactivity, state management with Hooks (
useState,useEffect), and event handling. - They can access browser-specific APIs (e.g.,
localStorage,window). - Server Components can render Client Components, allowing for a mix of server and client rendering.
Next, we'll explore more advanced data fetching patterns, leveraging both Server and Client Components effectively!
常见问题解答
「客户端组件与交互性」课时是免费的吗？
是的 — 「客户端组件与交互性」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Next.js 15 Fullstack Web Apps 课程的其余内容，请升级到 CoddyKit PRO。 Next.js 15 Fullstack Web Apps 课程共包含 4 节课。
「客户端组件与交互性」这节课中我会学到什么？
学习在何时以及如何使用客户端组件，构建需要客户端状态的交互式用户界面元素。 你通过在浏览器中直接运行的动手代码来练习 Next.js 15 Fullstack Web Apps，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Next.js 15 Fullstack Web Apps 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Next.js 15 Fullstack Web Apps 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「客户端组件与交互性」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Next.js 15 Fullstack Web Apps 课中编写并运行代码吗？
能。每节 Next.js 15 Fullstack Web Apps 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 深入了解服务器组件
- 客户端组件与交互性
- 高级数据获取模式
- 缓存、重新验证与流式传输