프리 렌더링을 하면 검색 엔진 최적화(SEO)에 도움이 되고, 페이지의 로딩 속도가 빠르다는 장점이 있다고 배웠습니다. 정적 생성과 서버사이드 렌더링 두 가지 선택지가 있었는데요. 이 두 가지를 언제 어떻게 사용하는 것이 좋을까요? 이번 레슨에서는 앞에서 만들었던 페이지들을 다시 살펴보면서 언제 어떤 것을 사용하면 좋을지 알아보도록 하겠습니다.
앞에서 만들었던 페이지
홈페이지
우선 홈페이지(/pages/index.js)에서는 상품 데이터가 자주 업데이트되지 않는다고 가정했기 때문에, 정적 생성을 했었습니다. getStaticProps() 함수를 구현하고 데이터를 불러와서 정적 생성을 하도록 구현했죠. 만약에 관리자가 상품을 자주 업데이트하거나, 항상 최신의 상품을 보여 줘야 한다면 서버사이드 렌더링을 선택했을 겁니다.
검색 페이지
검색 페이지(/pages/search.js)에서는 주소에 있는 쿼리스트링 값에 따라서 다른 검색 결과를 보여 줘야 하기 때문에, 서버사이드 렌더링을 했었습니다. getServerSideProps() 함수를 구현해서 쿼리스트링에 따라 다른 데이터를 가지고 서버사이드 렌더링을 하도록 구현했죠.
상품 상세 페이지
상품 상세 페이지(/pages/items/[id].js)에서는 항상 최신의 리뷰 데이터를 보여주기 위해서, 서버사이드 렌더링을 했었습니다. getServerSideProps() 함수를 구현해서 아이디 값에 따라 다른 데이터를 가지고 서버사이드 렌더링을 하도록 구현했죠. 리퀘스트가 들어올 때마다 매번 리뷰 데이터를 불러와서 렌더링하기 때문에, 항상 최신의 리뷰 데이터로 프리렌더링할 수 있었습니다.
설정 페이지
설정 페이지(/pages/settings.js)에서는 딱히 데이터를 사용하지 않았기 때문에, Next.js에서 기본적으로 정적 생성을 하고 있었습니다.
이렇게 페이지마다 데이터를 어떻게 보여줄 것인가에 따라 서버사이드 렌더링, 정적 생성을 다르게 해 줬습니다. Next.js에서는 특별한 경우가 아니라면 되도록이면 정적 생성으로 구현할 것을 권장하고 있는데요. 리퀘스트가 들어올 때마다 매번 렌더링을 하는 것보다 미리 렌더링을 해서 저장해 둔 것을 보내 주는 게 훨씬 빠르기 때문입니다. 그렇다면 언제 서버사이드 렌더링을 고려하는 게 좋을까요?
서버사이드 렌더링을 고려하면 좋은 경우
이럴 때 서버사이드 렌더링을 고려해 보세요.
항상 최신 데이터를 보여 줘야 하는 경우
데이터가 자주 바뀌는 경우
리퀘스트의 데이터를 사용해야 하는 경우 (예: 헤더, 쿼리스트링, 쿠키 등)
그 외에 특별한 이유가 없다면 되도록 정적 생성을 하는 걸 권장합니다.
