Next.js는 데이터를 가져와서 페이지를 렌더링하는 방법에 대한 여러 옵션을 제공한다.

그 중에서도 getServerSideProps & getStaticProps & getStaticPaths 3가지에 대한 함수들이 가장 많이 쓰인다.

SSR

getServerSideProps

getServerSideProps 는 서버 사이드 렌더링(SSR)에 사용되고 페이지가 요청할 때마다 호출되며 서버에서만 실행된다. 이 함수는 데이터를 가져와서 페이지(컴포넌트)의 props로 전달한다. 이렇게 하면 데이터가 변경될 때마다 페이지가 서버에서 렌더링되므로 항상 최신의 데이터를 보여준다.

export async function getServerSideProps(context) {
  const res = await fetch(`https://.../posts`);
  const data = await res.json();

  return { props: { data } };
}

Next.js에서는 정말 필요할 때만 사용하라고 권장하고 있다. 왜냐하면 CDN에 캐싱이 되지 않아서 느리기 때문이다.

• CDN : 전 세계에 분포된 서버 네트워크이고 그 중 가장 가까운 서버에서 콘텐츠를 제공해줌

---

SSG

getStaticProps

getStaticProps 는 정적 사이트를 생성하는 SSG에 사용되고 빌드 시에 한 번만 호출되며 서버에서 실행된다. 그리고 데이터를 가져와서 페이지의 props로 전달하고 빌드 시에 페이지가 렌더링되므로 빠른 페이지 로드 시간을 제공해준다.

export async function getStaticProps({ params }) {
  const res = await fetch(`https://.../posts/${params.id}`);
  const data = await res.json();

  return { props: { data } };
}

빌드 시 생성된 HTML을 브라우저에 넣다 보니 SEO에 훨씬 최적화되어 있다는 점이 유리하다.

getStaticPaths

getStaticPaths 는 동적 라우팅을 사용하는 SSG 페이지에 사용된다. 마찬가지로 빌드 시에 호출되고 서버에서 실행된다. 가능한 모든 경로를 반환하고 각 경로에 대해 해당 함수를 호출하고 페이지를 미리 렌더링한다.

export async function getStaticPaths() {
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }));
  
  const res = await fetch('https://.../posts');
  const data = await res.json();
  
  return { paths, fallback: false };
}

---

주로 사용되는 페이지

• SSR
  • 어드민 페이지 (사용자별 대시보드)
  • 주식, 주가 페이지
  • 실시간으로 데이터가 페칭되어야 하는 페이지
    ...

• SSG
  • 마케팅 페이지
  • 블로그 포스팅 & 포트폴리오
  • 쇼핑몰 목록
    ...

그리고 위 함수들은 모두 Next.js가 인식을 해야하므로 오타를 주의해야 한다..

---

CSR

useState & useEffect

import React, { useState, useEffect } from 'react'
 
export function Page() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
 
  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://.../data');
      if (!response.ok) {
        throw new Error(`HTTP 통신 오류 status: ${response.status}`);
      }
      const result = await response.json();
      setData(result);
    }
 
    fetchData().catch((e) => {
      console.error('통신 오류 : ', e)
    });
  }, []);
  
  if (!loading) {
  	return <p>로딩 중...</p>
  }
 
  return <p>{data ? `${data}` : '로딩 중...'}</p>
}

Next.js를 접하기 전 기존에 데이터를 가져오는 CSR 방식이다. 클라이언트에서 직접 HTTP 요청을 해서 데이터를 가져오는데 그 후에는 자바스크립트를 사용해서 DOM을 업데이트하고 페이지를 렌더링했다. 다만, 최초 렌더링 시에는 데이터가 null 또는 undefined가 될 수 있으므로 loading을 걸어서 데이터를 가져오면 데이터를 다시 렌더링하고 JSX를 반환한다.

useSWR

Next.js를 개발하고 있는 Vercel에서 만든 데이터 페칭 라이브러리이다. useEffect 도 좋은 패턴이지만 더 나은 성능, 캐싱, 업데이트 등을 위해 라이브러리를 사용하는 것이 좋다고 Next.js팀에서도 권고하고 있다.

import useSWR from 'swr'
 
export function Page() {
  const { data, error, isLoading } = useSWR(
    'https://.../data',
    fetcher
  )
 
  if (error) return <p>데이터 불러오기 실패</p>
  if (isLoading) return <p>로딩 중...</p>
 
  return <p>{data}</p>
}

사용법은 굉장히 싶고 훨씬 뛰어난 가독성과 간결해진 코드를 볼 수 있다.

useSWR 을 사용하면 백그라운드에서도 데이터를 자동으로 업데이트 해서 항상 최신 상태를 유지할 수 있고 데이터 페칭 시 에러가 발생하면 자동으로 리페칭을 해주는 특징을 지니고 있고 이외에도 다양한 좋은 기능을 지원한다.