Maîtriser la SSR dans Next.js : comment améliorer le référencement et l'expérience utilisateur

SSR (Server-Side Rendering) est une autre méthode de génération de pages dans Next.js. Dans cet article, je souhaite expliquer ce qu'est le SSR, comment il fonctionne et comment l'implémenter à la fois dans le Page Router et le App Router d'un projet Next.js.

Qu’est-ce que la RSS ?

SSR est une méthode de génération d'une page statique (ou d'une page pré-rendue) après qu'un utilisateur a fait une demande. Cela signifie qu'une page statique est générée à chaque requête. Cette méthode est utile pour les pages qui doivent être mises à jour fréquemment, car elle garantit que les données sont toujours à jour

Comment fonctionne la RSS ?

Lorsque vous utilisez SSR dans Next.js, chaque fois qu'un utilisateur demande une page sur laquelle SSR est implémenté, la page est générée après la demande. Cela signifie que l'utilisateur doit attendre pendant que Next.js génère et regroupe à nouveau le contenu statique pour chaque requête. Une fois la page statique prête, l'utilisateur peut voir la page demandée.

Il est important de noter que SSR s'exécute uniquement sur le serveur et génère une page statique pour chaque requête, il ne s'exécute donc pas pendant le processus de construction du projet.

Comment implémenter SSR dans le routeur d'application

Pour implémenter SSR dans App Router, vous n'avez pas besoin d'écrire une fonction spéciale ou de définir une configuration spécifique car elle est activée par défaut dans les composants de votre serveur.

Par exemple, si vous avez une page statique et que vous récupérez des données depuis une API, cette page utilisera SSR par défaut. Il est important de noter que lorsque SSR est utilisé, la page n'est pas regroupée ou pré-rendue au moment de la construction. Et si vous utilisez une page dynamique dans votre projet, elle utilisera SSG par défaut si vous ne récupérez aucune donnée. Mais lorsque vous récupérez une API, celle-ci passe en SSR, et encore une fois, aucune page statique ne sera regroupée pendant le temps de construction.

ceci est un exemple d'implémentation de SSR dans une route statique :

import React from 'react';

const AboutPage = async () => {
  // Fetch data from an API or any server-side source
  const data = getDataFromApi();

  return (
    <div>
      <h1>About Us</h1>
      <p>{data}</p>
    </div>
  );
};

export default AboutPage;

Comment implémenter SSR dans le routeur de pages

Pour implémenter SSR dans le routeur de pages, vous devez créer une fonction getServerSideProps dans votre fichier. Cette fonction sera appelée après chaque demande utilisateur. Si vous utilisez une route dynamique, telle qu'un fichier [id], vous devrez également utiliser getServerSideProps dans votre fichier. Cette fonction prend un argument, souvent nommé contexte, à partir duquel vous pouvez récupérer l'identifiant, la valeur de la page dynamique. Cette fonction est appelée par le serveur à chaque demande de l'utilisateur.

c'est un exemple d'implémentation dans le fichier tsx :

import { GetServerSideProps } from 'next';

interface AboutProps {
  data: string;
}

const AboutPage: React.FC<AboutProps> = ({ data }) => {
  return (
    <div>
      <h1>About Us</h1>
      <p>{data}</p>
    </div>
  );
};

// This function runs on the server on every request
export const getServerSideProps: GetServerSideProps = async () => {
  const data = getDataFromApi();
  return {
    props: {
      data,
    },
  };
};

export default AboutPage;

c'est un exemple d'implémentation dans le fichier jsx :

const AboutPage = ({ data }) => {
  return (
    <div>
      <h1>About Us</h1>
      <p>{data}</p>
    </div>
  );
};

// This function runs on the server on every request
export async function getServerSideProps() {
  const data = getDataFromApi();

  return {
    props: {
      data,
    },
  };
}

export default AboutPage;

Conclusion

SSR est une méthode utile pour regrouper ou créer des pages statiques, mais cela ne se produit pas pendant la construction. Lorsque vous avez besoin que votre page soit mise à jour à chaque demande d'utilisateur afin que les utilisateurs puissent voir les dernières données, vous pouvez utiliser SSR. Cependant, il est important de noter que cela peut prendre plus de temps et n'est pas aussi rapide que d'autres méthodes comme SSG (Static Site Generation) ou ISR (Incremental Static Regeneration) car elle génère une page statique pour chaque demande de l'utilisateur.

J'espère que vous avez apprécié cet article ! Si vous avez des questions, n'hésitez pas à me les poser. Si vous souhaitez en savoir plus sur ISR et SSG, vous pouvez consulter mes articles à leur sujet ici pour ISR et ici pour SSG. Si vous voulez en savoir plus sur tout, vous pouvez suivre mon site Web.

Merci d'avoir lu ! Au revoir pour l'instant !

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!