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 (
    

      
{post.title}
      
{post.body}
    
  );
};

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 (
    

      {posts.map((post) => (
        

          
{post.title}
          
{post.body}
        
      ))}
    
  );
};

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 (
    

      
{post.title}
      
{post.body}
    
  );
};

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 
Loading...
;
  }

  return (
    

      {posts.map((post) => (
        

          
{post.title}
          
{post.body}
        
      ))}
    
  );
};

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 (
    

      
{user.name}
      
{user.email}

      
Posts
      {loading ? (
        
Loading...
      ) : (
        

          {posts.map((post) => (
            

              
{post.title}
              
{post.body}
            
          ))}
        
      )}
    
  );
};

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 
Error loading posts.
;
  if (!data) return 
Loading...
;

  return (
    

      {data.map((post) => (
        

          
{post.title}
          
{post.body}
        
      ))}
    
  );
};

export default SWRPostsPage;

結論

Next.js 提供了多種資料擷取技術來滿足不同的用例和效能要求。透過了解和利用 SSR、SSG、ISR 和客戶端資料獲取，您可以建立功能強大、高效能的 Web 應用程序，從而提供出色的使用者體驗。有效地結合這些技術可以幫助您優化 Next.js 應用程式的速度和 SEO，確保您的用戶獲得最佳體驗。