인프런 커뮤니티 질문&답변
작성한 질문수
getServerSideProps 함수와 SSR의 관계
작성
·
55
·
수정됨
0
안녕하세요 강사님. 강의 잘 보고 있습니다.
getServerSideProps 함수와 SSR의 상관관계에 대해 의문점이 생겨 QnA를 찾아보고 있었는데요.
비슷한 질문이 있어서 해당 답변 참고했는데 이해가 잘 되지 않아서요. 해당 답변에선 getServerSideProps 함수를 선언하지 않으면 SSG로 동작한다고 말씀해주셨습니다.
getServerSideProps는 강의에서 말씀하신대로 서버에서 호출되어 미리 데이터를 패칭해주고 props를 주입해주는 용도로 사용된다고 이해했는데요.
getServerSideProps 함수를 정의하여 export하면 해당 페이지가 SSR방식으로 동작한다는 내용이 이해가 잘 되지 않습니다.
next는 기본적으로 SSR SSG방식으로 동작하는 것으로 알고 있고, 처음 접속하는 페이지는 SSG방식으로, 이후 관련된 Link 등으로 이동시 CSR 방식으로 렌더링 되는 것으로 이해하고 있습니다. 해당 부분에 대해 정확한 동작이 궁금합니다.
또한, getServerSideProps 함수를 정의한 페이지가 만약 현재 접속한 페이지에 Link 컴포넌트로 연결이 되어있다면 관련된 js 코드가 프리패칭 될 것인데요. 이 경우 getServerSideProps 함수를 정의한 페이지가 SSR이 아닌 CSR방식으로 렌더링 되는게 아닌가 질문드립니다. (getServerSideProps 함수는 여전히 서버에서 호출되는 것으로 이해하고 있습니다)
관련하여 클로드 답변 첨부드립니다. (오류가 있다면 정정 부탁드립니다..!)
추가 +) 질문을 하다 보니 다소 난해해졌는데요.
정리하자면 아래와 같이 이해하면 될지 궁금합니다.
기본적으로 접속시 SSG로 렌더링된 사이트를 보여주지만, getServerSideProps 함수를 정의하면 SSR로 요청한다.
Link 등으로 연결되어 있는 경우 getServerSideProps 함수를 통해 데이터를 패칭해온다. 이후 페이지 렌더링 자체는 CSR로 진행한다.
항상 좋은 강의 감사합니다.
답변 6
1
0
0
0
안녕하세요 dbstjrwnekd님 이정환입니다.
추가로 달아주신 질문에 인프런 시스템의 오류 때문인지 답변을 달 수 가 없어 여기에 답변 달아드립니다. 말씀하신 api/hello와 api/time은 페이지가 아닌 api입니다. 요런걸 API Routes라고 하는데요 Next.js 내에서 API를 생성하기 위해 제공되는 기능으로 이후에 다룰 예정입니다.
0
안녕하세요 dbstjrwnekd님 이정환입니다.
next는 기본적으로 SSR 방식으로 동작하는 것으로 알고 있다고 하셨는데요 그렇지 않습니다.
페이지 라우터 버전의 Next.js는 모든 페이지를 기본적으로 SSG로 동작시킵니다. 이는 우리 강의의 SSG 파트에서도 설명해드리고 있습니다. 또 아래의 Next.js 공식문서에도 언급이 되어 있으니 참고하시면 좋을 것 같습니다.
출처 : https://nextjs.org/docs/pages/building-your-application/rendering/static-site-generation
이어서 "처음 접속하는 페이지는 SSR 방식으로, 이후 Link 등으로 이동 시 CSR 방식으로 렌더링되는 것으로 이해하고 있다"라고 말씀하셨는데요, 이는 아마 사전 렌더링과 SSR 개념을 혼동하신 것 같습니다.
엄밀히 말씀드리자면, 처음 접속하는 페이지를 서버에서 미리 만들어서 보내주는 건 "SSR"이 아니라 "사전 렌더링(Pre-rendering)"이라고 합니다. 그리고 이후 Link 등을 통해 페이지를 이동할 때는 말씀하신 것처럼 CSR 방식으로 동작하는 게 맞습니다.
여기서 중요한 건, 사전 렌더링은 하나의 큰 개념이고 그 안에 SSR, SSG, ISR 이 세 가지 방식이 포함되어 있다는 점입니다. 즉, SSR은 사전 렌더링의 여러 방식 중 하나일 뿐이지 사전 렌더링 자체를 의미하는 건 아닙니다.
참고로 본 내용은 2.10) 사전 렌더링과 데이터 페칭 강의에서 아주 구체적으로 다루고 있으니 해당 챕터를 복습해 보시는걸 추천드립니다.
이어서 프리페칭에 대한 질문도 주셨는데요, 프리페칭된 페이지로 이동하는 경우에는 말씀하신대로 CSR 방식으로 페이지가 이동하게 됩니다. 앞서 말씀드렸듯 Next.js는 첫번째 접속에만 사전 렌더링(SSR, SSG, ISR) 방식으로 페이지를 렌더링 하고 이후의 페이지 이동은 모두 CSR로 처리하기 때문입니다. 프리페칭하여 페이지를 이동하는 건 최초 접속이 아니므로 CSR로 처리됩니다.
0
안녕하세요, 인프런 AI 인턴입니다. dbstjrwnekd님.
Next.js의 getServerSideProps와 SSR에 관련된 동작 방식에 대한 궁금증을 풀어드리겠습니다.
getServerSideProps 와 SSR의 관계
SSR(Server-Side Rendering) 기본 개념:
getServerSideProps함수는 서버 측에서 호출되어, 페이지에 필요한 데이터를 미리 패칭한 후 HTML을 생성하여 브라우저에 전달합니다. 이 과정은 매 요청마다 서버에서 수행되며, 페이지가 SSR 방식으로 동작하도록 보장합니다.SSR과 CSR의 차이:
- 페이지 최초 접근 시: SSR을 통해 페이지가 렌더링되며, 이때
getServerSideProps함수가 호출되어 필요한 데이터를 서버에서 받아오고 해당 데이터로 HTML을 구성합니다.
- 페이지 이동 시 (CSR): 브라우저 내에서 JavaScript 번들이 작동하여 구성요소들을 교체하는 방식으로 작동합니다. 여기서는 서버와의 추가적인 통신 없이 클라이언트 측에서 페이지를 전환하게 됩니다.
- 페이지 최초 접근 시: SSR을 통해 페이지가 렌더링되며, 이때
기본 동작 방식:
Next.js는getServerSideProps를 정의하지 않은 페이지는 기본적으로 SSG(Static Site Generation) 방식으로 처리하게 됩니다. 이는 사전 렌더링된 HTML 파일을 활용하여 매우 빠른 응답을 제공합니다. 그러나, SSR을 적용하여 실시간으로 데이터를 렌더링해야 하는 경우엔getServerSideProps를 활용하여 각 요청 시점에 서버에서 데이터를 받아오는 과정이 필요합니다.
Link 컴포넌트를 사용한 이동 시 동작
- 프리패칭 (Prefetching):
Next.js는Link컴포넌트를 통해 이동할 수 있는 페이지를 미리 준비하는 과정이 있습니다. 그러나, 이 경우에도getServerSideProps가 정의되어 있다면, 해당 페이지로 이동할 때 SSR을 다시 수행하여 최신 데이터를 받아 옵니다. 페이지를 전환할 때마다 매번 새롭게 데이터를 가져와야 하는 상황에서 유용합니다.
기타
- 정확한 동작 확인:
관련 자료 및 강의를 참고하셔서 동작을 실습해보시면 더 명확한 이해가 가능할 것입니다.
이 부분이 여전히 혼란스러우실 수 있는데요, 설명을 통해 조금은 해소가 되셨으리라 믿습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.