Next.js 中的高级数据获取技术

Next.js 中的高级数据获取

Next.js 提供了用于在应用程序中获取数据的强大功能，包括服务器端渲染 (SSR)、静态站点生成 (SSG) 和客户端数据获取。通过利用这些技术，您可以构建高性能且可扩展的应用程序，从而提供无缝的用户体验。本指南将探索 Next.js 中的高级数据获取技术，并演示如何在您的项目中实现它们。

服务器端渲染 (SSR)

示例：使用 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;

静态站点生成 (SSG)

Next.js 中的静态站点生成允许您在构建时预渲染页面，确保内容是静态的并且可以直接从 CDN 提供服务。这可以显着提高性能并减少服务器的负载。

示例：使用 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;

增量静态再生 (ISR)

Next.js 中的增量静态重新生成允许您更新静态内容，而无需重建整个站点。这对于需要经常更新的页面非常有用，例如新闻文章或博客文章。

示例：将 getStaticProps 与 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;

客户端数据获取

Next.js 还支持客户端数据获取，允许您在初始页面加载后获取数据。这对于获取初始渲染不需要的数据或处理需要数据加载的用户交互非常有用。

示例：使用 useEffect 和 useState 进行客户端数据获取

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;

组合数据获取方法

在许多应用程序中，您可能需要结合不同的数据获取方法来优化性能和用户体验。例如，您可以使用 SSR 或 SSG 进行初始页面加载，并使用客户端获取其他数据或用户交互。

示例：结合 SSR 和客户端获取

// 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 进行客户端获取

SWR（stale-while-revalidate）是 Vercel 创建的一个用于数据获取的 React hook 库。它提供了缓存、重新验证、焦点跟踪等功能，使客户端数据获取更加高效和强大。

示例：使用 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;

结论

Next.js 提供了多种数据获取技术来满足不同的用例和性能要求。通过了解和利用 SSR、SSG、ISR 和客户端数据获取，您可以构建功能强大、高性能的 Web 应用程序，从而提供出色的用户体验。有效地结合这些技术可以帮助您优化 Next.js 应用程序的速度和 SEO，确保您的用户获得最佳体验。

以上是Next.js 中的高级数据获取技术的详细内容。更多信息请关注PHP中文网其他相关文章！