사전 렌더링과 getServerSideProps

한 입 크기로 잘라먹는 Next.js(v15)

2.11) SSR 1. 소개 및 실습

해결된 질문

작성

안녕하세요, 강의 잘 듣고 있습니다.

강의를 들으며 이해하지 못한 부분들이 있습니다.

NextJS는 페이지 요청을 받았을 때 기본적으로 사전 렌더링(서버에서 JS 렌더링)을 한다고 이해하고 있었는데, 그러면 getServerSideProps함수를 선언하지 않아도 사전 렌더링이 진행되는거 아닌가요? 그런데 본 강의에서는 SSR을 진행하기 위해서는 getServerSideProps를 선언한다고 나와있는데, 그러면 SSR=기본적 사전 렌더링이 아닌건가요? 사전 렌더링은 기본적으로 되는게 아니라 명시적으로 getServerSideProps를 선언해야 가능한건가요?
사전 렌더링은 초기 접속 요청 시에만 진행되는게 맞을까요? 페이지 이동 시에는 진행되지 않나요? 따라서 이 페이지 이동 시에 사전 렌더링을 진행하기 위해서 getServerSideProps를 명시적으로 선언하려는 것인가요? (그렇다면 1번질문 해결)

감사합니다.

답변 2

지식공유자

안녕하세요 이정환입니다. 순서대로 답변드릴게요

1) 본 강의의 2.10 챕터의 8분 50초 경에 안내해 드리고 있듯이(아래 사진 참고) 사전 렌더링에는 "SSR" 만 있지 않습니다. "SSR", "SSG", "ISR" 이라는 3가지 방법이 제공됩니다. SSR은 사전 렌더링의 하나의 유형일 뿐 입니다.

2)1.2 챕터의 15분 17초 경에 안내드렸듯이(아래 그림참고) 사전 렌더링은 오직 초기 접속 요청시에만 진행됩니다. 이후의 페이지 이동시에는 리액트 앱과 동일하게 CSR 방식으로 페이지를 이동하게 됩니다.

질문자

그렇군요! 사전 렌더링으로 3가지 방법을 지원하는것까지는 알았는데, 명시적으로 아무것도 하지 않으면 사전 렌더링 방식으로 (가장 기본적 방식인) SSR이 채택되는줄 알았습니다! 그렇다면 사전 렌더링은 '기본적으로' nextjs에서 되는 것이 아니라 SSR, SSG, ISR중에서 선택하여 명시적으로 처리해주어야 진행되는건가요? 아무 처리도 안해주었을때는 어떤 방식이 채택되는지 궁금합니다!
=> 검색해보았더니 SSG 방식을 사용한다고 하는군요. 이렇게 이해하고 넘어가겠습니다!
그렇다면 index페이지가 아닌 다른 페이지에서 getServerSideProps를 선언할 경우, 아래와 같은 순서로 진행되는 것이 맞을까요?

1) 페이지 접속 요청 (FCP시작)
2) 서버에서 모든 페이지에 대해 사전 렌더링 (getServerSideProps를 사용한(명시한) 페이지는 이 시점에서 사전 렌더링(SSR), ISR을 사용한(명시한) 페이지는 [아직 학습 전이므로 생략], 나머지 페이지는 기본적으로 SSG이므로 빌드시점에 이미 사전 렌더링 됨
3) 브라우저에 HTML 제공
4) 브라우저에서 화면 렌더링 (FCP 끝)
5) 요청한 페이지와 관련된 모든 페이지(pre fetch) 에 대한 JS번들을 서버가 제공
6) 브라우저에서 hydration & JS 실행
7) 상호작용 가능(TTI)

감사합니다.

지식공유자

안녕하세요 이정환입니다.

1) 아무것도 선택하지 않았을 때에는 SSG를 사용합니다.

해당 내용은 우리 강의의 2.13 챕터에 설명해드리고 있으니 참고하시면 더 좋을 것 같습니다.

2) 2번과 5번 내용은 잘못 되었습니다.

2번에서는 모든 페이지에 대한 사전 렌더링이 아닌, 현재 접속 요청이 들어온 페이지에 대해서만 사전 렌더링을 진행합니다.

5번에서는 모든 페이지에 대한 JS 번들이 아닌 현재 접속 요청한 페이지의 JS 번들만 전달됩니다. (2.4 프리페칭 챕터에서 설명드리고 있습니다)

안녕하세요, 인프런 AI 인턴입니다. 학생님.

Next.js의 사전 렌더링과 관련하여 여러 부분에서 혼란스러우실 수 있습니다. 질문하신 두 가지 사항에 대해 답변드리겠습니다.

Next.js의 사전 렌더링에는 두 가지 주요 전략이 있습니다: SSG(Static Generation) 와 SSR(Server-Side Rendering) 입니다.

SSG(Static Generation): 이는 빌드 타임에 모든 페이지를 생성하여 정적 HTML로 사전 렌더링하는 방식입니다. 이 방식은 getStaticProps를 사용합니다.
SSR(Server-Side Rendering): getServerSideProps 를 이용하여 각 요청 시마다 서버에서 페이지를 생성하는 방식입니다. 이는 실시간으로 데이터가 필요한 경우 주로 사용합니다.

따라서, getServerSideProps를 명시적으로 선언해야 SSR 방식의 사전 렌더링이 작동합니다. 만약, 이 함수를 사용하지 않으면 기본적으로 SSG 방식이 사용됩니다.

초기 접속 시: Next.js는 초기 로드에서 SSG나 SSR에 따라 미리 페이지를 렌더링합니다.
페이지 이동 시: CSR(Client-Side Rendering)으로 작동하게 됩니다. 이는 브라우저에서 JS 번들을 사용해 페이지를 전환하는 방식이며, 이 상황에서 getServerSideProps를 사용해 각 페이지 요청 시 새로운 HTML을 생성할 수 있습니다. 즉, SSR을 통한 사전 렌더링은 페이지 이동 시에도 데이터를 새로 받아오고자 할 때 사용됩니다.

기본적으로 사전 렌더링은 초기 접속 시에 이루어지며, 페이지 이동 간에는 CSR을 사용하므로 필요에 따라 getServerSideProps으로 SSR를 통해 데이터를 실시간으로 불러올 수 있습니다.

인프런 커뮤니티 질문&답변