Composants client et interactivité
Apprenez quand et comment utiliser les composants client pour les éléments d’interface interactifs qui nécessitent un état côté client.
Composants client et interactivité est une leçon Next.js 15 Fullstack Web Apps gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Next.js 15 Fullstack Web Apps, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Next.js 15 Fullstack Web Apps comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
Meet Client Components
Bienvenue dans les Client Components ! Dans Next.js avec l'App Router, les composants sont des Server Components par défaut. Mais parfois, vous avez besoin d'interactivité directement dans le navigateur.
Les Client Components sont des composants spéciaux qui s'exécutent côté client, c'est-à-dire dans le navigateur web de l'utilisateur. Ils sont essentiels pour ajouter des fonctionnalités dynamiques à votre application.
Server vs. Client: A Quick Look
Récapitulons rapidement : les Server Components s'exécutent sur le serveur, ce qui est idéal pour le contenu statique, la récupération de données et la réduction du JavaScript côté client.
Les Client Components, quant à eux, permettent :
- L'interaction utilisateur (clics, changements d'entrée)
- La gestion d'état avec les React Hooks (
useState,useEffect) - L'accès aux API spécifiques au navigateur (
localStorage,window)
Ils donnent vie à votre interface utilisateur !
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!
Questions Fréquemment Posées
La leçon « Composants client et interactivité » est-elle gratuite ?
Oui — le texte complet de « Composants client et interactivité » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Next.js 15 Fullstack Web Apps, passe à CoddyKit PRO. Le cours Next.js 15 Fullstack Web Apps comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Composants client et interactivité » ?
Apprenez quand et comment utiliser les composants client pour les éléments d’interface interactifs qui nécessitent un état côté client. Tu pratiques Next.js 15 Fullstack Web Apps avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Next.js 15 Fullstack Web Apps ?
Aucune expérience préalable n'est requise. Next.js 15 Fullstack Web Apps sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Composants client et interactivité » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Next.js 15 Fullstack Web Apps ?
Oui. Chaque leçon Next.js 15 Fullstack Web Apps inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Approfondissement des composants serveur
- Composants client et interactivité
- Méthodes avancées de récupération des données
- Mise en cache, revalidation et diffusion progressive