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.
// 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;
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.
// 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;
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.
// 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;
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.
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;
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.
// 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;
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.
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;
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
