Next.js에서 데이터 가져오기를 처리하는 방법
Next.js는 개발자가 서버 측에서 렌더링된 React 애플리케이션을 빠르게 구축할 수 있게 해주는 강력한 프레임워크입니다. 그것은 다양한 필수 기능을 가지고 있습니다. 주요 기능 중 하나는 데이터를 쉽게 가져오고 구성 요소에서 쉽게 사용할 수 있도록 하는 기능입니다.
데이터 가져오기는 개발자가 웹사이트/웹 애플리케이션에서 데이터를 검색하고 표시할 수 있도록 하는 필수 기능입니다. Next.js에서 데이터를 가져오는 몇 가지 방법이 있으며 각각 장점과 사용 사례가 있습니다. 이 기사에서는 Next.js에서 데이터를 가져오는 다양한 방법을 살펴봅니다.
useEffect 후크를 사용하여 데이터 가져오기
useEffect 후크는 구성 요소에서 API 호출과 같은 부작용을 수행하는 데 사용되는 React 후크입니다 . useEffect 후크를 사용하여 Next.js에서 데이터를 가져올 수 있습니다.
이 후크는 로그인한 사용자에게 특정한 정보를 표시하는 사용자 프로필 페이지와 같이 동적 데이터가 필요한 페이지에 유용합니다.
useEffect 후크를 사용하려면 먼저 선택한 구성 요소로 가져와서 데이터를 가져오고 이를 사용하여 페이지를 렌더링합니다.
예를 들어:
import { useEffect, useState } from 'react';
export default function Home() {
const [data, setData] = useState("");
useEffect(() => {
fetch('https://api.example.com/data');
.then((response) => response.json())
.then((data) => setData(data))
}, []);
return (
<div>
{data.name}
</div>
)
}
이 코드 블록은 useEffect 후크를 사용하여 API에서 데이터를 가져옵니다. if는 useEffect 후크에 데이터를 가져오는 함수와 종속성 배열이라는 두 개의 매개변수를 전달합니다. 성공하면 setData()를 사용하여 가져오기 요청이 반환하는 데이터로 구성 요소의 상태를 업데이트합니다.
useEffect 후크에 전달하는 종속성 배열에는 효과가 의존하는 값이 포함되어야 합니다. 구성 요소는 종속성 배열의 값이 변경될 때만 효과를 다시 실행합니다. 이 예제에서와 같이 종속성 배열이 비어 있으면 첫 번째 렌더링에서만 효과가 실행됩니다.
SWR을 사용하여 자동 재검증 처리
SWR (stale-while-revalidate) 라이브러리는 데이터 가져 오기를 처리하기 위한 React 후크 라이브러리입니다. Next 애플리케이션에서 사용하려면 먼저 SWR 라이브러리를 설정해야 합니다.
SWR 라이브러리의 핵심 기능 중 하나는 데이터 재검증을 자동화하는 기능입니다. 이 기능은 데이터가 자주 업데이트되고 지속적으로 최신 상태를 유지해야 하는 경우에 필수적입니다. 이 기능은 애플리케이션이 항상 최신 데이터에 액세스할 수 있도록 하여 보다 동적이고 사용자에게 응답성을 높입니다.
SWR 라이브러리는 사용자가 페이지에 다시 초점을 맞추거나 탭 사이를 전환할 때 API에 대한 새로운 가져오기 요청을 만듭니다. 사용자가 페이지를 떠나면 화면에 표시되는 데이터는 오래된 데이터가 됩니다. 페이지로 돌아오면 SWR 라이브러리는 API에 새 가져오기 요청을 보내고 새 데이터를 오래된 데이터와 비교하여 변경되었는지 확인합니다.
SWR 라이브러리가 이 작업을 수행하지 못하도록 하려면 revalidateOnFocus 옵션을 사용할 수 있습니다.
이렇게:
const { data, error, isLoading } = useSWR('https://api.example.com/data', fetcher, {
revalidateOnFocus: false,
})
revalidateOnFocus 속성을 false로 설정하면 페이지에 다시 초점을 맞출 때마다 SWR 라이브러리가 데이터를 재검증하지 않습니다.
SWR 라이브러리는 또한 사용자가 인터넷에 다시 연결할 때마다 데이터를 재검증합니다. 이 작업은 특정 상황에서 매우 유용할 수 있으며 자동으로 작동합니다.
작업을 비활성화하려면 revalidateOnReconnect 옵션을 사용할 수 있습니다.
const { data, error, isLoading } = useSWR('https://api.example.com/data', fetcher, {
revalidateOnReconnect: false,
})
데이터의 자동 재검증을 비활성화하려면 revalidateOnFocus 및 revalidateOnRecconect 속성을 모두 false로 설정합니다.
Isomorphic-Unfetch 라이브러리를 사용하여 가져오기 요청 수행
isomorphic -unfetch 라이브러리는 Next.js 애플리케이션에서 가져오기 요청을 수행할 수 있는 작고 가벼운 라이브러리입니다. 라이브러리는 기본 가져오기 API에 대한 훌륭한 대안입니다. 사용이 간단하여 가져오기 요청을 처음 작성하는 개발자에게 적합합니다.
기본 가져오기 API를 지원하지 않는 이전 브라우저의 폴리필로 isomorphic-unfetch를 사용할 수 있습니다. isomorphic-unfetch 라이브러리는 미니멀하고 소규모 애플리케이션 작업에 적합합니다.
Next.js 애플리케이션에서 isomorphic-unfetch를 사용하려면 다음 명령을 실행하여 라이브러리를 설치하십시오.
npm install isomorphic-unfetch
그런 다음 라이브러리를 가져와 구성 요소에서 사용하여 다음과 같이 데이터를 가져올 수 있습니다.
import Fetch from 'isomorphic-unfetch'
import {useState, useEffect} from 'react'
export default function Home() {
const [data, setData] = useState(null)
useEffect(() => {
Fetch('https://api.example.com/data')
.then((response) => response.json)
.then((data) => setData(data))
}, [])
if (!data) return <div>Loading...</div>
return (
<div>
<h1>{data.name}</h1>
</div>
)
}
isomorphic-unfetch 기능은 클라이언트 측과 서버 측 모두에서 작동합니다.
Next.js로 효율적인 데이터 가져오기
데이터 가져오기는 애플리케이션을 개발할 때 중요한 기능입니다. Next.js는 데이터를 가져오는 여러 가지 방법을 제공하며 각 방법에는 장단점이 있습니다.
사용할 방법을 결정할 때 장단점을 고려하고 편안하게 사용할 수 있는 기술을 사용하도록 하십시오.
답글 남기기