Next.js 是一个流行的 React 框架，为构建服务器渲染和静态生成的 Web 应用程序提供了强大的功能。Web 开发的一个重要方面是从 API 或数据库获取数据。在本文中，我们将探索 Next.js 中可用的不同数据获取方法，并了解何时以及如何使用它们。无论您是初学者还是有一定的 Next.js 使用经验，本指南都将帮助您以简单易懂的方式掌握数据获取的基础知识。
静态数据获取
静态数据获取非常适合在所有请求中保持不变的内容。它涉及在构建时获取数据，使 Next.js 能够使用数据预渲染页面。这种方法可确保快速加载时间并减少运行时服务器上的负载。要实现静态数据获取，可以使用Next.js的**getStaticProps**函数。
例子：
// pages/index.tsx
import React from 'react';
import { GetStaticProps } from 'next';
interface HomeProps {
data: string;
}
export const getStaticProps: GetStaticProps<HomeProps> = async () => {
const res = await fetch('https://api.example.com/data');
const data = await res.json();
return {
props: {
data,
},
};
};
const HomePage: React.FC<HomeProps> = ({ data }) => {
return (
<div>
<h1>Welcome to my website!</h1>
<p>{data}</p>
</div>
);
};
export default HomePage;
在此示例中，该getStaticProps函数从指定的 API 端点 ( https://api.example.com/data) 获取数据。然后，获取的数据作为 prop ( data) 传递给HomePage组件，该组件在构建时使用数据进行预渲染。
服务器端渲染 (SSR)
服务器端呈现允许您获取向服务器发出的每个请求的数据。当您需要显示经常更改的动态内容时，此方法非常有用。当用户访问页面时，服务器获取数据并生成 HTML，然后将其发送到客户端。Next.js提供了getServerSideProps实现服务端渲染的功能。
例子：
// pages/post/[id].tsx
import React from 'react';
import { GetServerSideProps } from 'next';
interface PostProps {
data: {
title: string;
body: string;
};
}
export const getServerSideProps: GetServerSideProps<PostProps> = async (context) => {
const { params } = context;
const res = await fetch(`https://api.example.com/posts/${params?.id}`);
const data = await res.json();
return {
props: {
data,
},
};
};
const PostPage: React.FC<PostProps> = ({ data }) => {
return (
<div>
<h1>{data.title}</h1>
<p>{data.body}</p>
</div>
);
};
export default PostPage;
在此示例中，该getServerSideProps函数根据id来自 API 端点 ( https://api.example.com/posts/[id]) 的参数获取特定帖子的数据。然后，获取的数据作为 prop ( data) 传递给PostPage组件，该组件针对每个请求在服务器端呈现。
客户端渲染 (CSR)
客户端渲染适用于初始页面加载后需要获取数据的场景。此方法通常用于交互式组件或当 SEO 不需要数据时。对于客户端渲染，页面最初渲染时没有数据，并且使用 JavaScript 在客户端异步获取数据。useEffectNext.js 通过hook 或其他库（如 React Query 或 SWR）支持客户端渲染。
例子：
// pages/products.tsx
import React, { useEffect, useState } from 'react';
const ProductsPage: React.FC = () => {
const [products, setProducts] = useState<string[]>([]);
useEffect(() => {
const fetchProducts = async () => {
const res = await fetch('https://api.example.com/products');
const data = await res.json();
setProducts(data);
};
fetchProducts();
}, []);
return (
<div>
<h1>Products</h1>
<ul>
{products.map((product) => (
<li key={product}>{product}</li>
))}
</ul>
</div>
);
};
export default ProductsPage;
在此示例中，useEffect挂钩用于从 API 端点 ( https://api.example.com/products) 获取产品数据。获取的数据存储在products状态变量中，这会触发组件的重新渲染。然后产品名称将显示在客户端的列表中。
增量静态再生 (ISR)
增量静态再生结合了静态渲染和服务器端渲染的优点。它允许您在构建时预渲染静态页面，然后定期或按需重新生成它们。此方法非常适合偶尔更改但不需要实时更新的内容。Next.js 提供了启用 ISR 的revalidate选项。getStaticProps
例子：
// pages/blog/[slug].tsx
import React from 'react';
import { GetStaticProps, GetStaticPaths } from 'next';getStaticProps
interface BlogProps {
data: {
title: string;
content: string;
};
}
export const getStaticProps: GetStaticProps<BlogProps> = async (context) => {
const { params } = context;
const res = await fetch(`https://api.example.com/blog/${params?.slug}`);
const data = await res.json();
return {
props: {
data,
},
revalidate: 60, // Re-generate page every 60 seconds
};
};
export const getStaticPaths: GetStaticPaths = async () => {
const res = await fetch('https://api.example.com/blog');
const data = await res.json();
const paths = data.map((post: { slug: string }) => ({
params: { slug: post.slug },
}));
return {
paths,
fallback: true,
};
};
const BlogPage: React.FC<BlogProps> = ({ data }) => {
return (
<div>
<h1>{data.title}</h1>
<p>{data.content}</p>
</div>
);
};
export default BlogPage;
在此示例中，该getStaticProps函数根据slug来自 API 端点 ( https://api.example.com/blog/[slug]) 的参数获取博客文章数据。然后，获取的数据作为 prop ( data) 传递给BlogPage组件。此外，该getStaticPaths函数还用于生成所有博客文章的动态路径。该页面将每 60 秒重新生成一次，以确保内容是最新的。
结论：
了解 Next.js 中不同的数据获取方法对于构建高效且高性能的 Web 应用程序至关重要。通过利用静态数据获取、服务器端渲染、客户端渲染和增量静态重新生成，您可以创建响应式且优化的 Web 体验。尝试这些方法并选择最适合您的项目需求的一种。
