Next.js getServerSideProps 사용하기(feat.SSR)

- 글에 들어가기 전 -

Next는 SSR(서버사이드렌더링)과 CSR(클라이언트사이드렌더링) 모두를 지원하는 프레임워크다.
Next의 핵심 특징 중 하나는 하이브리드 렌더링을 지원한다는 것이다. 즉 페이지별로 SSR과 CSR을 유연하게 선택할 수 있다.
다음 해결과정에서 넥스트의 SSR기능을 지원하는 함수인 getServerSideProps을 사용해 볼 것이다.

🧠 이슈 및 원인

다이나믹 라우팅 구조로 url이 구성되어있는데 상세페이지에서 이 url을 사용해 데이터를 보여줘야 하는 상황
처음엔 useRouter을 사용해보려 했는데 useRouter은 클라이언트 측이 라우팅을 처리하여 페이지 로딩 이후에 사용되기 때문에 url에서 필요한 정보를 가져올수가 없었다.

🚀 해결

서버 측에서 페이지를 렌더링하기 전 데이터를 가져오는 방법을 사용해 보자!

'getServerSideProps'

getServerSideProps는 넥스트의 서버사이드렌더링 기능을 지원하는 함수이다. 페이지가 요청될때 마다 서버에서 실행되어, 페이지에 필요한 데이터를 미리 가져올 수 있다.

언제 사용해야 하나?

1. API를 통해 데이터를 가져오는 경우
클라이언트 측에서 호출하면 CORS문제가 발생 할 수 있는데 getServerSideProps를 사용하면 문제를 방지 할 수 있다
2. 동적인 데이터가 필요한 경우
사용자의 로그인 상태, 쇼핑카드 내용등과 같이 페이지가 랜더링 될 때마다 바뀌는 데이터가 있는 경우
3. 검색 엔진 최적화(SEO)를 고려하는 경우
서버 측에서 데이터를 미리 가져오므로, 검색 엔진이 페이지의 콘텐츠를 분석할때 초기 데이터가 포함되어 SEO에 유리

💡요청 시점에 데이터를 가져올 필요가 없거나, 데이터와 사전 렌더링된 HTML을 캐시하려는 경우에는 getStaticProps를 사용하는 것이 좋다.

• 사용예시1(Next.js 문서)

// 페이지.index.js
export async function getServerSideProps() {
  // Fetch data from external API
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo = await res.json()
  // Pass data to the page via props
  return { props: { repo } }
}
 
export default function Page({ repo }) {
  return (
    <main>
      <p>{repo.stargazers_count}</p>
    </main>
  )
}

• 사용예시2(내 코드에 적용)

// 페이지.index.js
const Index = ({ year, query, referer }) => {
  const { uid, phase } = query;

  return (
    <Wrap>
      <Test
    	year={year}
        phase={phase}
        referer={referer}
      />
    </Wrap>
  );
};

export const getServerSideProps = async context => ({
  props: {
    query: {
      year: context.query.year || null,
      phase: context.query.phase || null,
    },
    referer: context?.req?.headers?.referer || '',
  },
});

export default Index;

나는 이런식으로 사용했다. 다이나믹 라우팅으로 구성했던 year, phase 값을 가져와 props로 내려주어 컴포넌트 내에서 사용할 수 있도록 해주었다.

• context - 넥스트에서 제공하는 컨텍스트 객체로 요청 정보와 함께 페이지에 필요한 다양한 데이터를 가져오는데 사용
• getServerSideProps - 필요한 데이터를 가져온 다음 props 객체에 담아 리턴
• referer - 이전 페이지의 URL을 알수있다.

🤓 렌더링 전의 url 값을 어떻게 가져오지...라는 고민을 통해 알게된 getServerSideProps(SSR). API를 통해 가져오거나 동적인 데이터를 가져오는데 아주 유용하게 쓰일 것 같다! 그리고 다음번에 getStaticProps(SSG)에 대해 알아볼것이다.

참고 문서
https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props