[Next.js] getServerSideProps

클라이언트에서 데이터를 받아 렌더링하는 것이 아닌, SSR을 사용해 렌더링하여 구현하기 위해 getServerSideProps에 대해 알아보기로 했다.

getServerSideProps

서버 사이드 렌더링(SSR) 방식이다. 서버 측에서 실행되며 브라우저에서는 실행되지 않는다. 외부 데이터를 서버에서 받아와 초기 데이터로 설정하고, 페이지로 전달한다. 동적으로 데이터를 가져오기 때문에 업데이트가 가능하다.

👉 언제 사용하는 것이 좋은가?

동적인 데이터가 필요한 경우에 좋다. 사용자의 로그인 상태나 상품 리스트와 같이 페이지가 렌더링될 때마다 바뀌는 데이터가 있는 경우에 사용하면 좋다.

검색엔진 최적화(SEO)를 고려하는 경우에 좋다. 서버 측에서 데이터를 미리 가져오므로, 검색 엔진이 페이지의 컨텐츠를 분석할 때 초기 데이터가 포함되어 SEO에 유리하다.

API를 통해 데이터를 가져오는 경우 클라이언트 측에서 종종 CORS 문제가 발생하곤 하는데, getServerSideProps를 사용하면 문제를 방지할 수 있다.

👉 getServerSideProps가 명시적으로 호출되지 않아도 작동하는 이유는 뭘까?

Next.js가 자동으로 페이지 렌더링 전에 실행해주기 때문이다. getServerSideProps는 Next.js의 pages 디렉토리에서만 동작하는 특수한 함수다. 이름이 꼭 "getServerSideProps"여야 하며 pages/index.tsx, pages/products.tsx 같은 Page 컴포넌트 파일 내부에 있어야 한다.

Next.js는 이 함수가 있으면 사용자가 페이지에 접속하기 직전에 서버에서 이 함수를 실행해서 props를 만든 다음 그 props를 페이지 컴포넌트에 자동으로 전달해준다.

const Home = (propsFromServer) => {
  // propsFromServer = { products }
  ...
};

실행 순서는 사용자 → 요청 → Next.js 서버 → getServerSideProps 실행 → props 생성 → 페이지에 전달 → 렌더링 순이다.
그래서 Home 컴포넌트에서 props를 받기만 하면 되고, 따로 getServerSideProps()를 호출할 필요가 없다.

참고: app 디렉토리에서는 getServerSideProps 사용이 불가능하다.