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

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

Next.js는 기본적으로 서버측에서 페이지를 구성하는 모든 컴포넌트들을 사전 렌더링하여 HTML로 변환합니다. 그리고 이 과정을 서버측 렌더링 or Shell Render라고도 표현합니다.

브라우저는 이렇게 사전렌더링된 HTML을 파일을 받아 파싱하여 화면에 렌더링합니다. 그 결과 유저는 실제로 화면에 나타난 페이지를 볼 수 있고 이 시점을 FCP라고 할 수 있습니다.

그러나 이때 현재 페이지의 HTML만 받아왔을 뿐, 현재 페이지의 인터렉션을 처리하는 JavaScript Bundle은 받아오지 못했으므로 Next.js 서버는 이어 브라우저에게 현재 페이지의 JS Bundle을 보내주게 됩니다.

그러면 브라우저는 후속으로 받은 JS Bundle을 실행하여 화면에 렌더링 되어 있는 HTML과 연결합니다. 이 과정을 Hydration 이라고 표현합니다. Hydration이 완료되면 그제서야 인터렉션이 가능해지는 상태가 됩니다. 이 시점을 TTI라고 표현합니다.

이때 FCP -> TTI 까지의 시간 즉, 렌더링은 완료되었지만 인터렉션이 불가한 시점의 처리는 어떻게 되는지에 대해 추가적으로 궁금하다고 말씀해 주셨는데요 이 시간동안은 어쩔 수 없이 대기하는 수 밖에 없습니다. 이 대기 시간은 프로젝트에 따라 다르겠지만 보통은 수백ms (1초 이내)로 완료되므로 그렇게 오랜 시간을 소요하지는 않습니다.

물론 대기 시간이 존재한다는 점 그리고 이 시간이 길어질 수 있다는 점은 단점으로 여겨질 수 있습니다. 이 내용은 우리 강의의 2섹션 마지막 챕터에서 자세히 다룹니다.

여담으로 Next.js는 TTI 까지의 시간을 줄이기 위한 다양한 기능을 제공하고 있는데, 그 중 가장 대표적으로 손꼽히는 기능이 바로 App Router입니다. (3섹션부터 살펴봅니다)

추가로 React의 CSR 방식에 비해 전처리 과정이 추가되고 복잡해 진 것 같아 비효율적인것 같다고 느끼실 수 있는데요 Next.js의 사전 렌더링은 런타임 뿐만 아니라 빌드 타임에 미리 진행할 수도 있기 때문에 기존 React App에 비해 훨씬 빠른 페이지 응답이 가능합니다. 이는 우리 강의 2섹션 SSG에서 살펴봅니다.

단번에 이해가 되지 않으실 수 있습니다. 꼬리에 꼬리를 무는 의문이 생기실 수도 있구요 그럴때 마다 질문 주시면 제가 최대한 친절히 설명해 드리겠습니다 😃

1번 질문에서 모든 컴포넌트를 렌더링한다는 말씀이 해당하는 라우트에 접속요청을 했을 때, 해당 페이지를 사전 렌더링을 하고 하이드레이션 과정은 해당 라우트의 JS 번들을 받아오는걸로 이해를 하는게 맞는거 같습니다. 이게 맞을까요?

이게 맞다면 2번 질문은 의미가 없는것 같습니다! 그런데 사용자의 인터렉션이 불가한 지점의 처리는 어떻게 하는지 궁금하긴 합니다.

또 Next.js Docs의 사전 렌더링 부분 찾아봐도 클라이언트, 서버 컴포넌트 혹은 실험 기능인 부분 사전 렌더링 대한 이야기 밖에 없어서요. 자세하게 설명된 곳이 없는거 같은데 제가 못찾는건지...ㅠ

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

질문자님의 Next.js에 대한 사전 렌더링 과정과 관련하여 제기된 궁금증에 대해, 유사한 질문을 한 수강생들에게 제공된 기존 답변이 도움 될 수 있을 것 같습니다.

1. Next.js의 사전 렌더링과 컴포넌트 관련 질문: Next.js에서 서버 사이드에서 컴포넌트를 사전 렌더링하는 것과 관련하여, nextjs 프리패칭 질문에서 자세한 설명을 제공하고 있습니다. 이 답변에서는 Next.js의 프리패칭 기능에 대하여 설명하고, 클라이언트 사이드에서 발생하는 페이지 이동 및 관련 자원 로드에 대한 과정을 설명합니다. 해당 답변은 사전 렌더링 시점에서 서버와 클라이언트 간의 상호 작용에 대한 이해를 돕고 있습니다.

2. 사용자 인터랙션과 FCP에 대한 이해: Next.js를 통한 사전 렌더링 프로세스와 사용자 인터랙션이 가능하게 되기까지의 과정에 대한 이해는 getServerSideProps 사용 시 질문에서 더 깊이 파고들 수 있습니다. 이 질문에서는 서버사이드 렌더링(SSR)을 이용한 페이지 사전 렌더링과, 클라이언트 사이드 렌더링(CSR)으로 전환되는 과정에 대해 답변하고 있습니다. 특히 고정된 데이터 변환 없이 사용자 요청에 따라 실시간으로 컨텐츠를 렌더링하는 SSR의 특징과 이점을 설명함으로써, 사용자 인터랙션과 FCP(First Contentful Paint) 시간 단축 사이의 관계를 이해하는 데 도움을 줍니다.

질문자님의 경우, 각 단계에서의 서버의 역할 및 클라이언트 처리 과정의 이해를 넓히면서 Next.js 사전 렌더링의 메커니즘을 좀 더 깊게 이해하실 수 있을 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.