Data Fetching 관련 질문 있습니다~

안녕하세요 조은님!
완강 후에 Data Fetching 관련해서 질문 드릴게 있어서 왔습니다.

Q. Next 12에서는 정적인 페이지와 주기적으로 데이터 값이 바뀌어야 할 때 (SSG, SSR) 등 상황에 맞게 Data Fetching을 사용하고 있었는데 Next 13에서는 Server component 만으로 SSG와 SSR을 대체가 가능한걸까요?

Q. 강의에서 데이터를 가져올 때 fetch를 사용하셨었는데 Server component에서는 fetch 말고 axios를 사용해도 상관없는지 궁금합니다.

Q. 저는 아래와 같이 axios를 사용해서 Time 데이터를 가져왔는데 캐시 비우기 버튼을 누르지도 않았는데 새로고침 할 때 마다 초가 계속 바뀌더라구요(disabled cache 체크 안했습니다!)
그래서 fetch로 바꾸어서 해봤더니 강의에서 나온 것 처럼 잘 동작하고 있었습니다. 혹시 어떤 차이가 있는건지 궁금합니다.

import customAxios from "./customAxios";
import { METHOD } from "@/type/common";

export const getTime = async (timeZone: string) => {
  const data = await customAxios(
    METHOD.GET,
    `https://timeapi.io/api/Time/current/zone?timeZone=${timeZone}`,
    { next: { tags: ["time"] } }
  );

  return data;
};

안녕하세요! 질문 남겨주셔서 감사합니다. 질문 내용이 너무 좋네요!

Q. Next 12에서는 정적인 페이지와 주기적으로 데이터 값이 바뀌어야 할 때 (SSG, SSR) 등 상황에 맞게 Data Fetching을 사용하고 있었는데 Next 13에서는 Server component 만으로 SSG와 SSR을 대체가 가능한걸까요?

Server Component는 SSG, SSR와 같은 Prerendering을 대체하는 게 아니라 보완한다는 점을 이해하시면 좋을 것 같아요. 말씀주신 것처럼 Next 12에서 데이터의 변화 주기에 맞게 Prerendering 기법을 사용하셨을텐데, 이는 페이지 단위로 HTML을 미리 생성하는 방식입니다.

반면, Server Component는 컴포넌트 단위로 서버에서 렌더링 합니다. Server Component의 반대 개념인 Client Component는 서버에서 Prerendering도 가능한 방식이기 때문에 Server Component를 쓴다고 해서 Prerendering을 하지 않는게 아닌거죠. 결국 Server Component와 Prerendering은 상호 보완적인 방식으로 쓰인다고 보시면 좋을 것 같아요.

이해해 도움이 되실만한 글을 남겨두겠습니다. React 18: 리액트 서버 컴포넌트 준비하기 | 카카오페이 기술 블로그

Q. 강의에서 데이터를 가져올 때 fetch를 사용하셨었는데 Server component에서는 fetch 말고 axios를 사용해도 상관없는지 궁금합니다.

상관은 없지만 Next.js의 기능을 온전히 사용하기 위해선 fetch를 사용하는 걸 권해드려요. 이유는 다음 질문의 답변에 남겨둘게요!

Q. 저는 아래와 같이 axios를 사용해서 Time 데이터를 가져왔는데 캐시 비우기 버튼을 누르지도 않았는데 새로고침 할 때 마다 초가 계속 바뀌더라구요(disabled cache 체크 안했습니다!)
그래서 fetch로 바꾸어서 해봤더니 강의에서 나온 것 처럼 잘 동작하고 있었습니다. 혹시 어떤 차이가 있는건지 궁금합니다.

Next.js 13에서의 fetch는 웹 API인 Fetch API를 확장한 함수입니다. 특징 중 하나는 데이터 요청을 자동으로 캐싱한다는 점 입니다. 때문에 새로고침 없이도 초가 계속 바뀌는 차이가 있는 것입니다. (이와 같은 Web API인 fetch를 확장하는 방식이 오해를 불러일으키기 쉬워 비판하는 여론도 있어요)

관련해서 도움되실만한 글을 남겨두겠습니다. 디어 기술 블로그: Next.js App Router로 제품 만들기: 이제 더 이상 Axios를 쓰지 않기로 했습니다

혹시나 이해가 되지 않으시면 또 질문 남겨주세요! 그 외의 질문이 있어도 편히 남겨주세요.

다른 수강생 분들에게도 도움되는 질문해주셔서 너무 감사합니다!

인프런 커뮤니티 질문&답변