안녕하세요 getServerSideProps 에 대해 여쭤봅니다.

Question

질좋은 강의 감사합니다. 언제나 도움이 되는 거 같네요. 강의 내에선 getServerSideProps을 대부분 쓸 것이고, getStaticProps, getStaticPath를 쓸 일은 정말 현저히 적을 것이라고 말씀하셨는데요. (저도 next를 사용해보면서 그렇게 느꼈구요.) 최근 공지사항에서 'getServerSideProps를 최소화하시는 게 좋습니다. 이를 위해서는 유저 정보를 SSR하지 마시고 CSR해야 합니다. getStaticProps나 getStaticPath를 써야 서버쪽에서 컴포넌트 캐싱이 가능합니다. 유저 정보는 개인마다 다 다르기때문에 캐싱이 불가능하거든요. 다음 리뉴얼 때는 getStaticPath와 getStaticProps만 써서 Incremental Rendering을 보여드릴까 생각 중입니다.' 라고 하셔서 조금 혼란이 옵니다 ㅠㅠ... Incremental Rendering을 검색하면 뭔가 방법이 나올까하고 구글링해봤는데 큰 소득을 얻지 못해서 구체적으로 어떤 방식으로 코드를 써야 할 지 갈피가 잡히지 않아 질문드립니다. 모든 페이지를 // export async function getStaticPaths() { // const await = axios.get('/post...') // return { // paths: [ // { params: { id: '1' } }, // { params: { id: '2' } }, // { params: { id: '3' } }, // { params: { id: '4' } }, // ], // fallback: true, // }; // } 이런식으로 바꾸어야 좋은 건가요? SSR를 최소한으로 한다면 next를 쓰는 의미가 없을 거 같은데 생각할수록 답을 알 수 없어지는 느낌입니다.

제로초(조현영) · Answer

getStaticProps와 getStaticPaths도 모두 SSR입니다. 인프런으로 예를 들어보겠습니다. 모두가 똑같이 보는 공통 페이지들이 있죠? 예를 들어 메인페이지와 강좌 소개 페이지 등이 있습니다. 메인 페이지는 getStaticProps로 할 수 있고, 강좌 페이지들은 getStaticPath로 여러 강좌를 미리 렌더링해둘 수 있습니다. 그 페이지에서 개인화되어서 바뀌는 부분은 api 요청으로 따로 받아오면 됩니다. 또한 개인 대시보드 같은 것은 getServerSideProps 해도 되지만 그냥 CSR 해도 되고요. 이 부분은 선택의 영역입니다. 쿠팡도 마찬가지로 상품페이지들은 getStaticPath로 미리 만들어두고 개인화면은 CSR로 불러옵니다. 쿠팡이 next를 썼는지는 모르겠지만 일단 원리는 그렇습니다.