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 사용

// 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 후크 라이브러리입니다. 캐싱, 재검증, 포커스 추적 등과 같은 기능을 제공하여 클라이언트 측 데이터 가져오기를 더욱 효율적이고 강력하게 만듭니다.

예: 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 및 클라이언트 측 데이터 가져오기를 이해하고 활용함으로써 뛰어난 사용자 경험을 제공하는 강력한 고성능 웹 애플리케이션을 구축할 수 있습니다. 이러한 기술을 효과적으로 결합하면 속도와 SEO 모두에 맞게 Next.js 애플리케이션을 최적화하여 사용자에게 가능한 최고의 경험을 보장할 수 있습니다.

위 내용은 Next.js의 고급 데이터 가져오기 기술의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!