Teknik Pengambilan Data Lanjutan dalam Next.js

Pengambilan Data Lanjutan dalam Next.js

Next.js menyediakan ciri berkuasa untuk mengambil data dalam aplikasi anda, termasuk pemaparan sebelah pelayan (SSR), penjanaan tapak statik (SSG) dan pengambilan data sebelah pelanggan. Dengan memanfaatkan teknik ini, anda boleh membina aplikasi berprestasi dan berskala yang memberikan pengalaman pengguna yang lancar. Panduan ini akan meneroka teknik pengambilan data lanjutan dalam Next.js dan menunjukkan cara melaksanakannya dalam projek anda.

Rendering Sebelah Pelayan (SSR)

Contoh: Menggunakan 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;

Penjanaan Tapak Statik (SSG)

Penjanaan tapak statik dalam Next.js membolehkan anda membuat pra-memaparkan halaman pada masa binaan, memastikan kandungan itu statik dan boleh disampaikan terus daripada CDN. Ini boleh meningkatkan prestasi dengan ketara dan mengurangkan beban pada pelayan anda.

Contoh: Menggunakan 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;

Penjanaan Semula Statik Bertambah (ISR)

Penjanaan semula statik tambahan dalam Next.js membolehkan anda mengemas kini kandungan statik tanpa membina semula keseluruhan tapak. Ini berguna untuk halaman yang perlu dikemas kini dengan kerap, seperti artikel berita atau catatan blog.

Contoh: Menggunakan getStaticProps dengan pengesahan semula

// 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;

Pengambilan Data Sebelah Pelanggan

Next.js juga menyokong pengambilan data pihak pelanggan, yang membolehkan anda mengambil data selepas halaman awal dimuatkan. Ini boleh berguna untuk mengambil data yang tidak diperlukan untuk pemaparan awal atau untuk mengendalikan interaksi pengguna yang memerlukan pemuatan data.

Contoh: Menggunakan useEffect dan useState untuk Pengambilan Data Sebelah Klien

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;

Menggabungkan Kaedah Pengambilan Data

Dalam banyak aplikasi, anda mungkin perlu menggabungkan kaedah pengambilan data yang berbeza untuk mengoptimumkan prestasi dan pengalaman pengguna. Sebagai contoh, anda boleh menggunakan SSR atau SSG untuk pemuatan halaman awal dan pengambilan sisi klien untuk data tambahan atau interaksi pengguna.

Contoh: Menggabungkan SSR dan Pengambilan Sisi Pelanggan

// 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;

Menggunakan SWR untuk Pengambilan Sisi Pelanggan

SWR (stale-while-revalidate) ialah perpustakaan cangkuk React yang dibuat oleh Vercel untuk pengambilan data. Ia menyediakan ciri seperti caching, pengesahan semula, penjejakan fokus dan banyak lagi, menjadikan pengambilan data pihak pelanggan lebih cekap dan berkuasa.

Contoh: Menggunakan 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;

Kesimpulan

Next.js menawarkan pelbagai teknik pengambilan data untuk memenuhi kes penggunaan dan keperluan prestasi yang berbeza. Dengan memahami dan memanfaatkan pengambilan data SSR, SSG, ISR dan pihak pelanggan, anda boleh membina aplikasi web yang berkuasa dan berprestasi tinggi yang memberikan pengalaman pengguna yang sangat baik. Menggabungkan teknik ini dengan berkesan boleh membantu anda mengoptimumkan aplikasi Next.js anda untuk kedua-dua kelajuan dan SEO, memastikan pengguna anda mendapat pengalaman yang terbaik.

Atas ialah kandungan terperinci Teknik Pengambilan Data Lanjutan dalam Next.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!