Pourquoi les composants clients s'affichent-ils en tant que SSR dans nextjs, alors que les composants marqués comme « utiliser le client » affichent toujours leur code HTML en tant que SSR ? Pourquoi ?

Dans Next.js, la façon dont les composants côté client (« utiliser le client ») fonctionnent avec SSR (Server-Side Rendering) peut parfois prêter à confusion. Décomposons-le :

Comment fonctionnent les composants client et serveur dans Next.js :

• Composants du serveur : ce sont ceux par défaut dans Next.js et ils sont pré-rendus sur le serveur. Ils ne sont pas envoyés au client en JavaScript mais uniquement en HTML.
• Composants client : lorsque vous marquez un composant avec "utiliser le client", cela signifie que le composant doit s'exécuter du côté client car il peut avoir une interactivité (comme useState, useEffect), ou s'appuie sur des API de navigateur qui ne fonctionnent pas dans un environnement de serveur.

Pourquoi les composants clients affichent toujours du HTML sur le serveur :

Même si un composant est marqué comme « utiliser client », le HTML initial de ce composant peut toujours être généré sur le serveur (SSR), mais uniquement à des fins HTML statiques. . Cela signifie :

• Rendu initial : Le serveur génère le HTML de la page, y compris les composants clients, pour de meilleures performances et un meilleur référencement. Il s'agit de HTML statique, non interactif.
• Hydratation : lorsque ce HTML atteint le navigateur, Next.js hydrate le composant côté client avec JavaScript, permettant son interactivité.

Pourquoi cela se produit :

• Performances : en rendant le code HTML initial par le serveur, l'utilisateur peut voir le contenu plus rapidement (délai d'accès au premier octet ou TTFB plus rapide) sans attendre le chargement du JavaScript côté client.
• SEO : le pré-rendu du code HTML est important pour le référencement, car il garantit que les moteurs de recherche peuvent explorer et indexer le contenu.
• Hydratation : une fois le HTML servi, Next.js envoie le bundle JavaScript au client, qui "hydrate" le HTML statique, en attachant des écouteurs d'événements et en le rendant interactif.

Que se passe-t-il avec « utiliser le client » ?

• Rendu HTML côté serveur : même si un composant est côté client, Next.js génère toujours du HTML pour la vue initiale. Ainsi, même s'il n'exécute pas de JavaScript interactif sur le serveur, il envoie un balisage HTML au client.
• Hydratation côté client : Le JavaScript nécessaire à l'interactivité est envoyé au client, et une fois la page chargée, Next.js hydrate le composant, le rendant entièrement fonctionnel.

Idée fausse:

Marquer un composant avec "utiliser le client" ne signifie pas qu'il ne générera pas de code HTML côté serveur. Cela signifie simplement que le JavaScript interactif ne sera chargé que sur le client, mais que le serveur pourra toujours générer le code HTML statique initial pour le rendu.

Pour résumer :

• SSR des composants clients : Le HTML des composants clients peut être pré-rendu sur le serveur (pour le chargement initial), mais ils ne sont pas interactifs tant qu'ils ne sont pas hydratés sur le client.
• "use client" : Cette directive garantit que le JavaScript pour l'interactivité côté client est exécuté uniquement dans le navigateur, mais n'arrête pas la génération HTML statique sur le serveur.

Si vous souhaitez vous assurer que le composant se comporte différemment, vous devrez peut-être repenser où et comment vous chargez certains contenus dynamiques, surtout si vous vous attendez à un comportement spécifique au client (comme accéder à une fenêtre ou à un document).

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!