[Next.js] useEffect vs getStaticProps vs getServerSideProps

Next.js는 기본적으로 다양한 데이터 fetch을 제공한다. 기본적인 리액트의 useEffect 뿐만 아니라 getStaticProps 그리고 getServerSideProps까지. 우리는 여기서 늘 데이터를 어떤 방식으로 가져오게 될지 고민하게 되는데, 기본적으로 세 가지 데이터 fetch 방식을 이미 알고 있더라도, 이번에 더 자세하게 각각의 장단점과 언제 사용하면 좋을지 알아보자.

[Next.js] useEffect vs getStaticProps vs getServerSideProps

1. useEffect

useEffect는 React Hook이며, 컴포넌트가 마운트될 때 또는 특정 변수가 변경될 때 코드를 실행하는 데 사용됩니다. Next.js에서 useEffect는 클라이언트 측에서 데이터를 가져오는 데 사용할 수 있습니다.

장점:

• 컴포넌트 로직과 데이터 가져오기 코드를 분리할 수 있습니다.
• 다양한 조건에 따라 데이터를 동적으로 가져올 수 있습니다.

단점:

• 페이지가 처음 로드될 때 데이터를 가져오기 때문에 페이지 렌더링 속도가 느려질 수 있습니다.
• 클라이언트 측 JavaScript가 비활성화된 경우 작동하지 않습니다.

2. getStaticProps

getStaticProps는 Next.js 페이지 컴포넌트의 특수 함수이며, 빌드 타임에 실행됩니다. 이 함수는 페이지에 필요한 데이터를 반환하고, 컴포넌트 props로 전달됩니다.

장점:

• 페이지 렌더링 속도를 향상시킬 수 있습니다.
• SEO(검색 엔진 최적화)에 유리합니다.
• 클라이언트 측 JavaScript에 의존하지 않습니다.

단점:

• 빌드 타임에 데이터를 가져오기 때문에 데이터가 변경될 때마다 페이지를 다시 빌드해야 합니다.
• 실시간 데이터를 가져오는 데 사용할 수 없습니다.

3. getServerSideProps

getServerSideProps는 getStaticProps와 유사하지만, 빌드 타임이 아닌 서버 측에서 매 요청마다 실행됩니다. 이 함수는 페이지에 필요한 데이터를 반환하고, 컴포넌트 props로 전달됩니다.

장점:

• 페이지 렌더링 속도를 향상시킬 수 있습니다.
• 실시간 데이터를 가져오는 데 사용할 수 있습니다.
• 사용자별 맞춤형 데이터를 제공할 수 있습니다.

단점:

• getStaticProps보다 서버 리소스를 더 많이 사용합니다.
• getStaticProps보다는 SEO(검색 엔진 최적화)에 유리하지 않습니다.

4. 어떤 옵션을 선택해야 할까요?

다음은 각 옵션을 사용해야 하는 경우의 예입니다. 이는 개인적인 의견이므로 참조만 해주세요.

a. useEffect

사용해야 하는 경우:

• 페이지 로드 후 데이터를 가져와야 하는 경우
  • 예: 사용자 프로필 정보, 최신 뉴스 기사, 블로그 게시물 목록 등
• 사용자 상호 작용에 따라 데이터를 동적으로 가져와야 하는 경우
  • 예: 검색 필터링, 무한 스크롤링, 실시간 데이터 업데이트 등

장점:

• 컴포넌트 로직과 데이터 가져오기 코드를 분리할 수 있습니다.
• 다양한 조건에 따라 데이터를 동적으로 가져올 수 있습니다.

단점:

• 페이지가 처음 로드될 때 데이터를 가져오기 때문에 페이지 렌더링 속도가 느려질 수 있습니다.
• 클라이언트 측 JavaScript가 비활성화된 경우 작동하지 않습니다.

예시:

const MyComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('/api/data');
      const data = await response.json();
      setData(data);
    };

    fetchData();
  }, []);

  return (
    <div>
      {data.map((item) => (
        <p key={item.id}>{item.name}</p>
      ))}
    </div>
  );
};

b. getStaticProps

사용해야 하는 경우:

• 페이지 렌더링 속도를 향상시키고 싶은 경우
  • 정적 페이지는 서버에서 미리 렌더링되어 클라이언트로 전송되므로 페이지 로딩 속도가 빨라집니다.
• SEO(검색 엔진 최적화)에 유리한 페이지를 만들고 싶은 경우
  • 검색 엔진은 정적 페이지를 더 쉽게 인덱싱하고 크롤링할 수 있습니다.
• 데이터가 자주 변경되지 않는 경우
  • 데이터가 자주 변경된다면 빌드 타임에 데이터를 가져오는 것이 비효율적입니다.

장점:

• 페이지 렌더링 속도를 향상시킬 수 있습니다.
• SEO(검색 엔진 최적화)에 유리합니다.
• 클라이언트 측 JavaScript에 의존하지 않습니다.

단점:

• 빌드 타임에 데이터를 가져오기 때문에 데이터가 변경될 때마다 페이지를 다시 빌드해야 합니다.
• 실시간 데이터를 가져오는 데 사용할 수 없습니다.

예시:

export async function getStaticProps() {
  const response = await fetch('/api/data');
  const data = await response.json();

  return {
    props: {
      data,
    },
  };
}

const MyComponent = ({ data }) => {
  return (
    <div>
      {data.map((item) => (
        <p key={item.id}>{item.name}</p>
      ))}
    </div>
  );
};

export default MyComponent;

c. getServerSideProps

사용해야 하는 경우:

• 실시간 데이터를 가져와야 하는 경우
  • 예: 주식 시세, 스포츠 경기 결과, 채팅 메시지 등
• 사용자별 맞춤형 데이터를 제공해야 하는 경우
  • 예: 사용자 프로필 정보, 추천 상품 목록, 사용자 설정 등
• 페이지 렌더링 속도와 SEO 모두 중요한 경우

장점:

• 페이지 렌더링 속도를 향상시킬 수 있습니다.
• 실시간 데이터를 가져오는 데 사용할 수 있습니다.
• 사용자별 맞춤형 데이터를 제공할 수 있습니다.

단점:

• getStaticProps보다 서버 리소스를 더 많이 사용합니다.
• getStaticProps비해 SEO(검색 엔진 최적화)에 유리하지 않습니다.

예시:

export async function getServerSideProps(context) {
  const userId = context.req.query.userId;

  const response = await fetch(`/api/data/${userId}`);
  const data = await response.json();

  return {
    props: {
      data,
    },
  };
}