Next.js 获取数据

在构建 Web 应用程序时，获取和处理数据是至关重要的部分。Next.js 提供了多种方式来实现这一功能，无论是通过静态生成、服务器端渲染还是客户端请求。本章将详细介绍这些方法，并提供示例代码帮助你更好地理解如何在 Next.js 中处理数据。

静态生成中的数据获取

静态生成允许你在构建阶段预先生成所有页面的内容。这种方式适合于那些内容不会频繁变化的应用程序。

使用 getStaticProps 获取数据

getStaticProps 是一个用于在构建期间获取数据的函数。它通常与 export default function Page(props) 一起使用，并且返回的数据会被传递给页面组件作为 props。

示例代码

// www.javascriptcn.com code example
// pages/index.js
import { useState } from 'react';

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

  return {
    props: {
      data, // 将获取到的数据作为 props 传递给页面
    },
  };
}

function HomePage({ data }) {
  return (
    <div>
      <h1>欢迎来到我的主页</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default HomePage;

使用 getStaticPaths 动态生成路径

如果你需要动态生成一些页面的路径，可以使用 getStaticPaths 函数来定义这些路径。这在处理具有不同参数的页面时特别有用。

示例代码

// www.javascriptcn.com code example
// pages/posts/[id].js
import { useState } from 'react';

export async function getStaticPaths() {
  // 获取所有可能的 post ID
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  const paths = posts.map(post => ({
    params: { id: post.id.toString() },
  }));

  return { paths, fallback: false };
}

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

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

function PostPage({ data }) {
  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.content}</p>
    </div>
  );
}

export default PostPage;

服务器端渲染中的数据获取

服务器端渲染（SSR）允许你在每次请求时动态地生成页面内容。这对于 SEO 友好的应用和需要实时更新内容的应用非常有用。

使用 getServerSideProps 获取数据

getServerSideProps 是一种在每次请求时获取数据的方法。与 getStaticProps 不同，它在运行时执行，而不是在构建时。

示例代码

// www.javascriptcn.com code example
// pages/about.js
import { useState } from 'react';

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/about');
  const data = await res.json();

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

function AboutPage({ data }) {
  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.description}</p>
    </div>
  );
}

export default AboutPage;

客户端数据获取

对于那些不需要在服务器端预渲染或静态生成的数据，我们可以选择在客户端进行获取。

使用 useEffect 和 useState 钩子

你可以使用 React 的 useEffect 和 useState 钩子来在客户端加载数据。

示例代码

// www.javascriptcn.com code example
// pages/api/data.js
export default function handler(req, res) {
  const data = [
    { id: 1, title: '文章1' },
    { id: 2, title: '文章2' },
  ];
  res.status(200).json(data);
}

// pages/client-side-fetching.js
import { useState, useEffect } from 'react';

function ClientSideFetching() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      <h1>客户端数据获取</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default ClientSideFetching;

以上就是 Next.js 中数据获取的主要方法。每种方法都有其适用场景，选择合适的方式可以使你的应用程序更加高效和灵活。希望这些示例能帮助你更好地理解和使用 Next.js 进行数据获取。