Next.js - getServerSideProps, getStaticProps

Next.js는 기본적으로 "모든 페이지를 미리 렌더링"을 하는 특징을 가지고 있다. 이렇게 미리 렌더링해서 html 파일을 생성한다면 더 나은 성능과 SEO 이점을 얻을 수 있다.

 

그 중 Next.js는 빌드 시 페이지를 html로 만들어 요청시 제공해 주는 "정적 렌더링"과 페이지 요청 시 서버 사이드 렌더링을 통한 "서버 사이드 렌더링" 방식이 있다.

 

그 두가지 방식을 지원하는데는 Next.js에서 지원하는 getServerSideProps, getStaticProps를 활용할 수 있다.

getServerSideProps

말 그래도 서버측에서 Props를 가져오겠다는 함수다. 보통 외부데이터를 서버에서 받아와서 초기 데이터로 Setting을 하고 페이지로 전달하도록 구성해준다.

 

getServerSideProps는 페이지 요청 시 마다 실행이 되며 페이지로 전달해준 데이터를 서버에서 렌더링을 해주게 된다.

getServerSideProps를 사용한 예제

fetch로 요청을 받은 Response를 Props에 data를 담고 return을 시키면서 index 함수에 data를 전달해 렌더링을 할 수 있다.

getStaticProps

말 그대로 정적으로 Props를 넘겨주겠다는 것이다. 특히 빌드 시에 데이터를 불러와 결과를 JSON으로 저장하여 사용한다는 점이 특징이다. getServerSideProps와는 달리 페이지 요청시 계속해서 데이터를 전달받는 것이 아니다.

따라서 Static한 값을 이용할 때는 getStaticProps가 적절하다.

 

getStaticProps의 예제

getStaticProps는 빌드 시 고정된 값을 사용한다고 말했다. 하지만 props의 데이터가 변경되고 싶을 때도 있을 수도 있다. 그럴땐 props에 "revalidate"의 Property를 추가하고 변경하고 싶은 시간 값(초)를 입력해서 변경할 수도 있다.

 

또, getStaticProp를 사용하는 동적 라우팅 페이지 같은 경우에는 getStaticPath를 사용해야 한다.

 

먼저 getStaticProps를 통해 정적으로 미리 렌더링을 하고 getStaticPath를 통해 path를 정해주고 그 안에 전달할 값을 지정해 준다. 그리고 꼭 fallback 키가 필수다.

 

getStaticPaths의 예제

getServerSideProps와 달리 getStaticProps의 getStaticPaths는 "params"로 props를 넘겨준다는것이 포인트다.

그리고 fallback 프로퍼티에 boolean값을 통해 반환 값을 정해준다. false일 경우 404 페이지를 보여준다.

 

fallback 프로퍼티는 주로 많은 데이터가 종속 되어있는 정적 페이지에서 유용하게 사용된다. 보통 많은 데이터가 종속되어 있는 페이지는 빌드 할 때 굉장한 시간이 소요되기 마련이다. 

 

쉽게 말해 빌드 되는 시간을 로딩페이지를 보여주면서 완료가 되면 정적 데이터를 가지고 있는 페이지의 전부를 다 보여주는 개념이라고 생각하면 좋을 것 같다.

 

후기...

getServerSideProps와 getStaticProps는 Next.js에서 가장 중요한 부분이라고 생각한다.

사용 방법이 그리 복잡하지는 않지만 적절하게 사용을 하면서 성능을 잘 조절해야되는 민감한 부분이라고 생각된다.

 

항상 그랬듯이 한국인이 좋아하는 속도를 위해서는 많은 양의 데이터를 어떻게 처리할 지 어떻게 빠르게 렌더링 할 지 고민하는게 웹 개발자의 숙명인 것 같다.