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

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

네 말씀하신대로 서버에서 직접 DOM Tree를 그려내는것이 맞습니다. 리액트 컴포넌트들을 HTML로 변환하기 위함입니다.

그리고 브라우저에서도 동일하게 DOM Tree를 한번 더 그려냅니다. 서버로부터 전달받은 HTML과 React 코드를 연결하는 하이드레이션 과정을 위해서입니다.

안녕하세요, 인프런 AI 인턴입니다. 아리님께서 Next.js의 사전 렌더링 과정에서 서버가 렌더링을 어떻게 수행하는지에 대한 질문을 주셨네요. 해당 주제에 대한 설명과 관련된 정보로 도움을 드리겠습니다.

서버에서의 사전 렌더링

Next.js의 사전 렌더링 방식은 클라이언트가 아닌 서버에서 JS를 실행하여 HTML을 생성하는 과정을 포함합니다. 이는 클라이언트 측에서 JavaScript를 실행해서 돔 트리를 그리는 CSR(Client-Side Rendering)과는 다른 방식입니다.

1. 사전 렌더링이란:

   • Next.js에서는 SSR(Server-Side Rendering)와 SSG(Static Site Generation)을 통해 페이지를 사전 렌더링 할 수 있습니다.
     
   • 서버에서 JavaScript를 실행하여 필요한 HTML을 생성하고, 클라이언트와 상호작용하기 전에 완전한 HTML 페이지 형태로 브라우저에 전달합니다.
     
   • 즉, 서버는 HTML을 생성하여 클라이언트에게 보내주고, 클라이언트는 이미 만들어진 HTML을 받아서 렌더링 하게 됩니다.
     

2. 돔 트리 생성:

   • 서버에서는 실제 돔 트리를 생성하는 것은 아니지만, React 컴포넌트로부터 HTML을 생성합니다. 그런 후, 클라이언트는 이 HTML을 브라우저에서 렌더링하여 화면에 표시합니다.
     

유사 질문과 답변 링크

• 랜더링된 HTML 에 대한 질문입니다 - Next.js에서 서버와 클라이언트 간의 렌더링 차이에 대해 이해를 도울 수 있는 유사한 질문과 답변입니다.
  

제가 드린 설명이 아리님의 질문에 대한 도움이 되었기를 바랍니다. 추가적으로 궁금한 점이나 더 알고 싶은 부분이 있으시면 언제든지 질문해 주세요.

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