Next.js의 고급 데이터 가져오기 기술-JS 튜토리얼-php.cn

Advanced Data Fetching Techniques in 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 (  {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 사용

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

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

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