리액트에서 데이터 패칭
type List = string[];
export default function Page() {
const [list, setList] = useState<List>([]);
const fetchList = async () => {
const res = await fetch("...");
const data = await res.json();
setList(data);
}
useEffect(()=>{
fetchList();
},[])
return <div>...<div>
}리액트에서 API 엔드포인트에 데이터를 요청할 때의 필수적인 조건은 컴포넌트가 마운트 된 이후에 진행되야 한다는 점입니다.
가뜩이나 초기 로딩이 느린 리액트 앱에서 컴포넌트 마운트 이후에 발생하는 API 요청 방식은 이미 기다렸던 유저를 더 기다리게 해야하는 단점이 있습니다.
이런식으로 유저는 계속 기다려야합니다. 초기 로딩이 1초 느려질 때마다 유저의 이탈률은 기하학적으로 증가하는데 이는 좋은 웹사이트가 아니겠죠.. Next는 이러한 단점을 해결하기위해 사전렌더링 시점에 데이터를 요청하고 응답해줍니다.
Next에서 데이터 패칭
Next는 사전렌더링 시점에 백엔드 서버에 데이터를 요청하고 요청한 데이터가 포함된 정적인 HTML을 브라우저에 제공할 수 있습니다.
- 유저가 기다려야하는 횟수 1회로 감소
- 데이터 페칭 시점이 매우 앞당겨지므로 유저가 기다려야 하는 시간 감소
- 정적인 HTML 미리 브라우저에 페인팅
- 페이지에 필요한 JS Bundle 만 전송
이러한 구성으로 Next 는 React 보다 뛰어난 사용자 경험을 제공합니다.
사전 렌더링시에 백엔드 서버 상태가 안좋거나 요청하는 데이터가 커서 응답이 느리면 어떡해요?
만약 위와같은 상태라면 유저는 아무런 화면도 볼 수 없게됩니다. 아주 치명적인 문제인데요. 이런 문제를 해결하기위해 SSG 방식을 제공합니다.
프로젝트를 빌드하는 시점에 API 응답 속도에 개선이 필요한 페이지는 SSG 방식을 사용하여 빌드타임에 데이터를 요청할 수 있습니다.
Next.js에서 사전 렌더링(Pre-rendering) 이란,
SSR(Server-Side Rendering)뿐만 아니라 SSG(Static Site Generation)을 포함하는 더 넓은 개념입니다. Next.js는 두 가지 방식으로 사전 렌더링을 지원합니다.
- SSR (Server-Side Rendering)
페이지 요청이 들어올 때마다 서버에서 HTML을 생성하고, 이를 클라이언트에 전달하는 방식입니다. 페이지는 매 요청마다 새로 렌더링되므로, 동적인 데이터를 다룰 때 유용합니다.
특징: 요청 시점에 서버에서 HTML을 생성하여 최신 데이터를 반영합니다.
- SSG (Static Site Generation)
페이지를 빌드 시점에 미리 HTML로 생성하는 방식입니다. 빌드 과정에서 모든 HTML 파일이 만들어져 서버에 배포되며, 정적 콘텐츠를 다룰 때 유용합니다.
특징: 페이지가 미리 생성되므로 매우 빠르고, 요청 시 서버 부담이 없습니다. 그러나 동적인 데이터를 반영하려면 추가적인 방법이 필요합니다.
