Next.js getServerSideProps 서버사이드 렌더링 알아보기

Next.js 의 getServerSideProps 란?

Next.js 의 Pre-render 에서 알아보았듯 Next.js 는 Create React App 으로 만든 리액트 프로젝트와 다르게 JS 파일을 이용해 어느정도 기본 HTML 파일을 만든 뒤 해당 파일에서 자바스크립트가 동작할 수 있도록 하는 Hydration 이라는 과정을 거쳐서 렌더링을 한다.

Next.js 에서 getServerSideProps() 라 불리는 함수를 함수를 export 하면, API 에서 가져오는 데이터까지 Next.js 의 Pre-render 내용에 포함시킬 수 있다.

혹은 클라이언트에서 민감한 정보를 공개하고 싶지 않을 때 getServerSideProps 를 이용해 서버에서 처리하고 클라이언트에서는 어떤 일이 일어났는지 숨길 수도 있다.

샘플 소스코드

export async function getServerSideProps(context) {
  return {
    props: {
      data: "abc"
    }, // will be passed to the page component as props
  }
}

위와 같이 async function getServerSideProps() 를 export 하면, 반환되는 오브젝트의 props 프로퍼티를 해당 페이지 컴포넌트(export default function Xxx(props) { ... })에서 이용할 수 있다.

// export async function getServerSideProps() 에서 반환한 값이 넘어온다.
export default function Index({ data }) {
  // ...
}

위와 같이 data props 를 받게 되면, 내부에 입력했던 "abc" 문자열이 들어있다.

context 에는 무엇이 들어있을까? (파라미터 활용하기)

export async function getServerSideProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

잘 보면 함수의 형태가 getServerSideProps(context) 인 것을 볼 수 있다. 여기서 context 는 오브젝트인데 next.js 에 의해서 자동으로 넘겨받는 값이다. 다음과 같은 프로퍼티들을 가지고 있다.

• params: 동적 라우팅 을 사용할 때 URL 로 넘어온 파라미터를 가지고 있다. 이를테면 [id].js 페이지가 있다면 params 내부에는 { id: ... } 처럼 값이 넘어온다.
• req: cookie props 를 포함한 HTTP IncomingMessage 오브젝트
• res: HTTP Response 오브젝트
• query: 쿼리 스트링을 표현하는 오브젝트이다.
• preview: Preview Mode 일 시에 true이다.
• previewData: preview 데이터셋이다.
• resolvedUrl: 클라이언트 transitions 을 위한 _next/data prefix 를 벗긴 요청 URL의 일반화된 버전과 오리지널 버전의 쿼리 값을 포함한다.
• locale: 활성화된 locale
• locales: 지원하는 모든 locales
• defaultLocale: 설정된 기본 locale

API 데이터 가져오기 예제

export default function Index({ movies }) {
  return (
    <div>
      <SEO title={"INDEX PAGE"} />
      {!movies && <h4>Loading...</h4>}
      {movies?.map((movie) => (
        <div key={movie.id}>
          <img
            src={`https://image.tmdb.org/t/p/w500/${movie.poster_path}`}
            width={50}
            height={50}
          />
          <h4>{movie.original_title}</h4>
        </div>
      ))}
    </div>
  );
}

export async function getServerSideProps() {
  // API 키를 숨기는데도 유용하게 사용될 수 있다.
  const API_KEY = process.env.API_KEY;
  const response = await fetch(
    `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`
  );
  const json = await response.json();
  const movies = json.results;

  return {
    props: {
      movies,
    }
  };
}

• 핵심은 export async function getServerSideProps() { ... } 를 이용하고 이 블럭 안에서 fetch 완료된 데이터를 return 으로 넘기는 것이다.
• fetch 부분은 서버 사이드에서만 동작한다.
• 크롬 브라우저 내에서 view-source:http://localhost:3000/ 와 같이 초기 시작 소스코드를 보면, 매우 긴 데이터가 이미 로드되어 있는 것을 확인할 수 있다.
• 데이터가 로드된 이후에는 리액트가 다시 페이지 동작의 주도권을 가져가서 정상적인 리액트 페이지로서 동작한다.
  • getServerSideProps 에서 생성된 props 를 전부 가져가서 리액트 상태에 이용한다.

Router 대용으로 사용하기

getServerSideProps 를 router 오브젝트 대용으로도 사용할 수 있다.

export default function MovieDetail({ movie }) {
  const { title, id } = movie;
  return (
    <div>
      The Title is : {title} {id}
    </div>
  );
}

export function getServerSideProps({ query: { params } }) {
  const [title, id] = params;

  return {
    props: { movie: { title, id } },
  };
}

위와 같이 사용할 수 있는데, router 오브젝트를 썼을 때의 아래와 같은 단점을 해결해준다.

1. 페이지에 바로 접근 시에 router 가 undefined 상태라는 것
2. next.js 에서 생성하는 정적 HTML 에 쿼리스트링으로 넘어온 내용이 존재하지 않게 된다는 것

SEO 최적화를 하려면 쿼리스트링으로 넘어오는 정보는 위와 같이 getServerSideProps 에서 처리해주는 것이 좋을 것이다.

주의점

• non-page 파일에서는 이용할 수 없다.
• getServerSideProps 는 standalone 함수로 export 되어야 한다.
  • 페이지의 프로퍼티 등으로 이용되면 안된다.
• getServerSideProps API 문서 에서 구체적인 사례를 더 볼 수 있다.