Techniques avancées de récupération de données dans Next.js

Récupération avancée de données dans Next.js

Next.js fournit des fonctionnalités puissantes pour récupérer des données dans vos applications, notamment le rendu côté serveur (SSR), la génération de sites statiques (SSG) et la récupération de données côté client. En tirant parti de ces techniques, vous pouvez créer des applications performantes et évolutives qui offrent une expérience utilisateur transparente. Ce guide explorera les techniques avancées de récupération de données dans Next.js et démontrera comment les mettre en œuvre dans vos projets.

Rendu côté serveur (SSR)

Exemple : utilisation de getServerSideProps

// pages/post/[id].js
export async function getServerSideProps(context) {
  const { params } = context;
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: {
      post,
    },
  };
}

const PostPage = ({ post }) => {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
};

export default PostPage;

Génération de sites statiques (SSG)

La génération de sites statiques dans Next.js vous permet de pré-afficher les pages au moment de la construction, garantissant ainsi que le contenu est statique et peut être servi directement à partir d'un CDN. Cela peut améliorer considérablement les performances et réduire la charge sur votre serveur.

Exemple : utilisation de getStaticProps

// pages/index.js
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return {
    props: {
      posts,
    },
  };
}

const HomePage = ({ posts }) => {
  return (
    <div>
      {posts.map((post) => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
};

export default HomePage;

Régénération statique incrémentale (ISR)

La régénération statique incrémentielle dans Next.js vous permet de mettre à jour le contenu statique sans reconstruire l'intégralité du site. Ceci est utile pour les pages qui doivent être mises à jour fréquemment, comme les articles d'actualité ou les articles de blog.

Exemple : utilisation de getStaticProps avec revalidate

// pages/posts/[id].js
export async function getStaticProps(context) {
  const { params } = context;
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: {
      post,
    },
    revalidate: 60, // Revalidate the page every 60 seconds
  };
}

const PostPage = ({ post }) => {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
};

export default PostPage;

Récupération de données côté client

Next.js prend également en charge la récupération de données côté client, ce qui vous permet de récupérer des données après le chargement initial de la page. Cela peut être utile pour récupérer des données qui ne sont pas nécessaires pour le rendu initial ou pour gérer les interactions utilisateur qui nécessitent le chargement de données.

Exemple : utilisation de useEffect et useState pour la récupération de données côté client

import { useEffect, useState } from 'react';

const PostsPage = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchPosts = async () => {
      const res = await fetch('https://api.example.com/posts');
      const data = await res.json();
      setPosts(data);
      setLoading(false);
    };

    fetchPosts();
  }, []);

  if (loading) {
    return <p>Loading...</p>;
  }

  return (
    <div>
      {posts.map((post) => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
};

export default PostsPage;

Combinaison de méthodes de récupération de données

Dans de nombreuses applications, vous devrez peut-être combiner différentes méthodes de récupération de données pour optimiser les performances et l'expérience utilisateur. Par exemple, vous pouvez utiliser SSR ou SSG pour le chargement initial de la page et la récupération côté client pour des données supplémentaires ou des interactions utilisateur.

Exemple : combinaison de SSR et de récupération côté client

// pages/user/[id].js
import { useEffect, useState } from 'react';

export async function getServerSideProps(context) {
  const { params } = context;
  const res = await fetch(`https://api.example.com/users/${params.id}`);
  const user = await res.json();

  return {
    props: {
      user,
    },
  };
}

const UserPage = ({ user }) => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchPosts = async () => {
      const res = await fetch(`https://api.example.com/users/${user.id}/posts`);
      const data = await res.json();
      setPosts(data);
      setLoading(false);
    };

    fetchPosts();
  }, [user.id]);

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>

      <h2>Posts</h2>
      {loading ? (
        <p>Loading...</p>
      ) : (
        <div>
          {posts.map((post) => (
            <div key={post.id}>
              <h3>{post.title}</h3>
              <p>{post.body}</p>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default UserPage;

Utilisation de SWR pour la récupération côté client

SWR (stale-while-revalidate) est une bibliothèque de hooks React créée par Vercel pour la récupération de données. Il fournit des fonctionnalités telles que la mise en cache, la revalidation, le suivi de la concentration, etc., rendant la récupération de données côté client plus efficace et plus puissante.

Exemple : utilisation de SWR

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

const SWRPostsPage = () => {
  const { data, error } = useSWR('https://api.example.com/posts', fetcher);

  if (error) return <p>Error loading posts.</p>;
  if (!data) return <p>Loading...</p>;

  return (
    <div>
      {data.map((post) => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
};

export default SWRPostsPage;

Conclusion

Next.js propose une variété de techniques de récupération de données pour répondre à différents cas d'utilisation et exigences de performances. En comprenant et en tirant parti de la récupération de données SSR, SSG, ISR et côté client, vous pouvez créer des applications Web puissantes et hautes performances qui offrent une excellente expérience utilisateur. La combinaison efficace de ces techniques peut vous aider à optimiser vos applications Next.js à la fois en termes de vitesse et de référencement, garantissant ainsi à vos utilisateurs la meilleure expérience possible.

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!