Dans Next.js, le hook useRouter peut être utilisé à la fois côté client et côté serveur, mais il y a des différences importantes dans leur fonctionnement, notamment lorsque l’on parle de Server-Side Rendering (SSR). Voici des explications détaillées avec des exemples pour comprendre comment useRouter fonctionne dans ces deux contextes.

1. useRouter côté Client

Lorsqu’on utilise useRouter côté client, on accède à l’instance du routeur Next.js qui permet de gérer la navigation, récupérer des informations sur l’URL actuelle (par exemple, les paramètres de la requête ou le chemin actuel), et même effectuer une navigation programmée.

Exemple côté client :

import { useRouter } from 'next/router';

const ClientSidePage = () => {
  const router = useRouter();

  // On récupère le pathname (le chemin actuel)
  const currentPath = router.pathname;
  
  // Récupérer les paramètres de requête
  const { id } = router.query;

  // Naviguer vers une autre page
  const goToHome = () => {
    router.push('/');  // Redirige vers la page d'accueil
  };

  return (
    <div>
      <h1>Page actuelle : {currentPath}</h1>
      <p>Paramètre 'id' : {id}</p>
      <button onClick={goToHome}>Aller à la page d'accueil</button>
    </div>
  );
};

export default ClientSidePage;

Explication :

• router.pathname : Donne le chemin actuel de la page (par exemple, /about).
• router.query : Accède aux paramètres de la requête de l’URL (par exemple, si l’URL est /post?id=1, router.query.id serait 1).
• router.push : Permet de naviguer vers une autre page de manière programmatique.

Le useRouter côté client est principalement utilisé pour la gestion de la navigation dynamique (naviguer d’une page à l’autre sans rafraîchir la page complète).

2. useRouter côté Serveur avec SSR (Server-Side Rendering)

Dans Next.js, Server-Side Rendering (SSR) signifie que certaines pages sont rendues côté serveur avant d’être envoyées au client. Le hook useRouter peut également être utilisé dans le contexte du SSR, mais il a un comportement légèrement différent.

Lors du rendu côté serveur, Next.js ne peut pas accéder aux hooks React directement avant que la page ne soit envoyée au client. Cependant, le routage côté serveur (comme les paramètres d’URL) peut toujours être récupéré via des fonctions de rendu côté serveur comme getServerSideProps.

Exemple côté serveur avec SSR :

import { useRouter } from 'next/router';

const ServerSidePage = ({ serverSideData }) => {
  const router = useRouter();
  
  // Récupérer le pathname côté client après le rendu SSR
  const currentPath = router.pathname;

  return (
    <div>
      <h1>Page SSR - Chemin : {currentPath}</h1>
      <p>Données côté serveur : {serverSideData}</p>
    </div>
  );
};

// Cette fonction est exécutée côté serveur pour chaque requête
export async function getServerSideProps(context) {
  const { id } = context.query; // Accéder aux paramètres de requête côté serveur
  const serverSideData = `Données pour l'ID: ${id || 'non défini'}`;

  return {
    props: { serverSideData }, // Les données sont passées au composant
  };
}

export default ServerSidePage;

Explication :

• getServerSideProps : Cette fonction permet d’exécuter du code côté serveur avant de rendre la page. Ici, nous utilisons context.query pour obtenir les paramètres de la requête (similaire à router.query côté client).
• useRouter côté serveur : Le hook useRouter peut être utilisé côté client une fois que la page est rendue. Cependant, pour récupérer des données côté serveur (avant le rendu), vous devez utiliser getServerSideProps.

Le useRouter côté serveur, par défaut, ne fonctionne pas avant que la page ne soit envoyée au client. C’est pourquoi l’accès aux informations de l’URL comme les paramètres de requête doit être effectué dans getServerSideProps pendant le rendu côté serveur.

Comparaison Côté Client vs Serveur avec SSR

Conclusion

• Côté Client : Le hook useRouter est utilisé pour gérer la navigation, les paramètres de l’URL, et pour effectuer des redirections sans recharger la page. Il fonctionne de manière réactive après le premier rendu de la page.
• Côté Serveur (SSR) : Lorsque vous utilisez SSR avec getServerSideProps, vous ne pouvez pas utiliser useRouter pour accéder aux informations de l’URL avant que la page ne soit envoyée au client. Vous devez récupérer les paramètres de l’URL via l’objet context dans getServerSideProps. Cependant, une fois que le rendu côté serveur est terminé et que la page est envoyée au client, vous pouvez utiliser useRouter pour gérer la navigation côté client.

Cela montre comment useRouter fonctionne dans un contexte de rendu hybride (SSR et client) et comment l’utiliser efficacement dans un projet Next.js.