정적 생성과 서버사이드 렌더링

차이점 : 언제 html파일을 생성하는가?

• 정적 생성(SSG)
  • 빌드하는 시점에 미리 html파일 생성
  • 퍼포먼스 문제로 Next.js는 정적 생성을 권고

• 서버사이드 렌더링(SSR)
  • 페이지를 접속해서 새로운 요청마다 html파일 생성
  • 항상 최신 상태를 유지해야 하는 경우 사용
  • 아래는 공식문서를 찾아보면서 추가로 얻게 된 정보들이다.
  • 언제 사용해야 되는가?
    • 지리적 위치, 권한처럼 해당 페이지를 렌더링 할 때 데이터를 가져와야 할 때 사용한다.
    • 자주 변경되는 데이터가 있는 페이지일 때

클라이언트 사이드 렌더링

공식문서에서 getServerSideProps설명 중에 클라이언트 사이드로 데이터를 불러오기에 대한 설명이 있어서 간단하게 적어본다

대시보드같이 SEO가 필요없으면서 자주 업데이트 되는 데이터가 포함되어 있고 미리 렌더링할 필요가 없다면 클라이언트 측에서 페이지 요청 시에 데이터를 가져온다.

getServerSideProps 에러처리

pages/500.js 파일이 표시된다고 한다. 에러처리할 파일을 만들면된다.

getServerSideProps - context

공식문서에서 context에는 무엇이 담겼는지와 404페이지, 리다이렉트, 타입스크립트에서 사용방법도 확인할 수 있다.

https://nextjs.org/docs/api-reference/data-fetching/get-server-side-props

공식문서 2페이지가 다르다. 대주제로 한 개는 Documentation 아래에, 한 개는 API Reference 밑에 있다.

---

결론

getStaticProps vs getServerSideProps

공통점

• 두 함수 모두 pre-render가 필요한 경우.
• SEO가 필요한 경우에 사용

차이점

• 빌드 이후 변경이 가능하냐! 불가능하냐! 맨 위에 썼듯이 빌드 시에 html파일을 생성하는 정적 생성방식. getStaticProps는 빌드 시에 pre-rendering을 하기 때문에 빌드 후 동적으로 바뀌는 데이터에 대해서는 페이지에 반영되지 않는다. 하지만 getServerSideProps는 페이지를 요청할 때! pre-rendering을 하기 때문에 동적으로 바뀌어야 하는 데이터가 있는 부분에는! 쓰는 것이 좋다.

• getStaticProps는 빌드 후에 변경이 불가능하다. 호출 시마다 data fetch를 하지 않기 때문에 getServerSideProps에 비해 성능이 좋은 것.

• getServerSideProps는 Page가 요청받을 때마다 호출되서 pre-rendering한다. 동적 데이터가 있는 페이지에서만 사용하자. 동적으로 언제든 데이터가 수정된다. 즉, 페이지 요청 시 데이터를 미리불러와서 보여주는 것은 같으나 동적으로 수정사항이 반영될 것이다.

---

getStaticPaths는 언제쓰는가?

동적 페이지에서 getStaticProps를 쓸 때 함께 사용한다.

---

이제 좀 머리속에서 정리가 된다. 즉, pre-rendering하는 거나 SEO에 좋은 것은 두 함수 다 마찬가지다. 그저 어느 시점에 데이터를 불러와서 pre-rendering하느냐가 가장 큰 차이점이었던 것.