Dans cette version de Next.js, nous explorerons ce que sont les composants client et serveur, leurs différences, quand les utiliser, et fournirons des exemples pratiques pour vous aider à les implémenter dans votre projets.
Dans Next.js, il existe une distinction claire entre les Composants client et les Composants serveur. Cette séparation vous permet de prendre de meilleures décisions sur où et comment traiter le code, ce qui a un impact direct sur les performances et l'expérience utilisateur.
Composants client s'exécutent dans le navigateur, permettant l'interactivité et l'accès aux API du navigateur comme une fenêtre ou un document. Ils sont idéaux pour gérer l'interface dynamique de votre application et répondre aux actions des utilisateurs.
'use client'; // Indicates that this component runs on the client import { useState } from 'react'; export default function ClientComponent() { const [count, setCount] = useState(0); return (); }Client-side Counter
The count value is: {count}
Cet exemple classique est un compteur qui permet à l'utilisateur d'interagir directement avec la page. Le « client d'utilisation » ; La directive indique à Next.js que ce composant doit être exécuté dans le navigateur.
Les composants du serveur sont une nouvelle fonctionnalité de l'architecture Next.js. Ces composants sont traités sur le serveur et envoient le HTML déjà rendu au navigateur. Cela réduit la quantité de JavaScript qui atteint le client, accélérant ainsi le chargement initial de la page.
export default async function ServerComponent() { const data = await fetch('https://api.example.com/data').then(res => res.json()); return (); }Data from the Server
{data.message}
Dans cet exemple, le composant est rendu sur le serveur, récupère les données d'une API, puis renvoie le code HTML rendu. Cela signifie que la logique de récupération des données n'atteint pas le client, ce qui améliore les performances.
Next.js affine la manière dont les composants serveur et client interagissent. Voici quelques-unes des améliorations les plus notables :
Les composants sont désormais des Composants du serveur par défaut. Cela signifie que votre application s'optimise automatiquement en envoyant moins de JavaScript au navigateur, sauf si vous avez explicitement besoin d'un Composant client.
Le streaming permet aux composants de se charger par parties. Ceci est utile pour les pages volumineuses ou contenant beaucoup de données, car les sections de la page peuvent se charger au fur et à mesure qu'elles sont prêtes, sans attendre que tout le contenu soit disponible.
Next.js facilite la décision si un composant s'exécutera sur le serveur ou sur le client, vous donnant ainsi plus de contrôle sur la façon d'optimiser votre application.
Hydratation est le processus qui transforme le HTML statique envoyé depuis le serveur en une page interactive sur le client. Avec Next.js, l'hydratation est plus efficace et sélective, n'ayant lieu que lorsque cela est absolument nécessaire.
// ServerComponent.tsx export default async function ServerComponent() { const data = await fetch('https://api.example.com/products').then(res => res.json()); return (); } // ClientComponent.tsx 'use client'; import { useState } from 'react'; export default function ClientComponent() { const [search, setSearch] = useState(''); return (Product List (Server-rendered)
{data.map((product: any) => (
- {product.name}
))}setSearch(e.target.value)} placeholder="Search product" />); }Searching for: {search}
Dans cet exemple, le serveur restitue la liste des produits et l'envoie au client, tandis que le composant de recherche est interactif et géré côté client.
Next.js représente un tournant dans la façon dont nous développons des applications Web, en optimisant à la fois les performances et l'expérience utilisateur. L'utilisation efficace des Composants serveur et des Composants client vous permet de créer des applications rapides et dynamiques avec une charge initiale plus légère.
Choisir correctement entre un Composant Serveur et un Composant Client est crucial pour exploiter pleinement les capacités du framework. Grâce à ces nouvelles améliorations, il est plus facile de prendre des décisions éclairées et de créer des applications non seulement rapides mais également interactives et évolutives.
Clause de non-responsabilité: Toutes les ressources fournies proviennent en partie d'Internet. En cas de violation de vos droits d'auteur ou d'autres droits et intérêts, veuillez expliquer les raisons détaillées et fournir une preuve du droit d'auteur ou des droits et intérêts, puis l'envoyer à l'adresse e-mail : [email protected]. Nous nous en occuperons pour vous dans les plus brefs délais.
Copyright© 2022 湘ICP备2022001581号-3