React19 + NextJS15 | RSC 렌더링

출처

• nextjs.org rendering-server-components
• How React Server components work: an in-depth guide
• 위 글 번역본 medium
• https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md
• https://youtu.be/XdiMjKSCOfc?si=-1jBzuKkGXzq-9P2

1.React Server Component 는 서버에서 요청이 들어오면, RSC Payload 를 생성한다.

• 서버 컴포넌트의 JSX 렌더링 결과
• 빈자리 -> 서버 컴포넌트는 클라이언트 컴포넌트를 포함이 가능하므로, 해당 클라이언트 컴포넌트와 그에 필요한 자원을 응답받아야 하기 때문에 이를 기억
• props

2.생성한 RSC Payload 와 클라이언트 컴포넌트 자바스크립트 인스트럭션을 활용하여 이제 실제 HTML을 생성한다.

그래서 1번, 2번 과정이 서버에서 일어나는 과정

3.html을 응답받으면, 먼저 즉시 보여준다 => pre-rendering
4.RSC Payload 를 가지고 reconcile 단계가 발생한다. 왜냐하면? 클라이언트 컴포넌트를 포함하고 있으면 이러한 빈자리를 채워서 트리 구조가 되어야함
5.hydrate -> html 에 리액트를 끼얹어서 상호작용이 가능하도록 한다.

과감히 요약을 하자면

• React가 서버에서 실행되는 것이다.
• view가 dom에서 html렌더러로 바뀌었다.
• 서버에서 css없이 RSC Payload, 클라이언트 컴포넌트의 JS instructions을 조합(composite)한 걸로 html뼈대만 먼저 렌더링한다.

서버 컴포넌트는 서버 측에서 렌더링되어 클라이언트로 전송되며, 클라이언트 컴포넌트와 달리 브라우저에서 실행되지 않는다. 이를 통해 서버에서 데이터를 가져오고, 그 데이터를 기반으로 컴포넌트를 렌더링하는 작업을 보다 효율적으로 수행할 수 있다.