[컴] React server component(RSC)

리액트 서버 콤포넌트 / reactjs

React server component(RSC)

ref. 1 에서 이야기하는 server rendering 의 장점:

• 브라우저에서 여러번 서버로 요청하는 것보다는 서버에서 여러번 요청하는 것이 빠르다.
• me: 물론 브라우저에서 한번 요청할때 모든 정보를 브라우저로 전달해 준다면 그건 이점이 없을 것이다. 하지만 흔히 api server라 불리는 서버라면, 기능별로 쪼개져 있어서 그러기 쉽지 않다.
• 브라우저에서 동작해야 하는 기능은 관련 library(js file)을 download 해야 한다. 그에 비해 서버는 한번 설치해놓고 계속 사용할 수 있다.

RSC에 대한 몇가지 내용:

1. 기본적으로 RSC 는 server component 가 root element 가 된다. 그래서 server에서 시작해서 필요한 element 들을 모두 만들고, client component 에 대해서만 client component 라고 표시하고 던져준다고 보면 된다.
2. client component 는 server component 를 import 할 수 없다. server component 에는 browser에서 실행불가능한 코드도 있을 수 있기 때문이다.

예시

• reactjs/server-components-demo · GitHub

.server.tsx, .client.tsx

react programming 을 할 때 이 component 의 구분은 확장자(extension)으로 해준다. 예를 들어

MyComponent.client.tsx 라면, client component 이며, MyComponent.server.tsx 라면, 이것은 server component 이다.

client component 에서 server component 를 어떻게 사용할 수 있지?

Composite 을 한다. 즉, client component 는 props 로 Server Component를 받는 것이다. 예를 들면, client component 를 만들고, children 을 props 로 받는다고 하면, 이 children 에 server component를 pass 할 수 있다.

RSC 렌더링(rendering)

참고: ref.1, ref. 2

1. 서버가 브라우저로부터 React component 를 render 해달라는 요청을 받는다.

2. root component 는 항상 Server component 다.

3. root component 에서부터 render를 시작해서 하위의 다른 server component, client component들을 render하게 된다. client 의 하위에 있는 server component 도 다 render된다.

4. 이 때 client component 는 서버쪽에서 render 할 수 없기에, client component 라는 표시만 남겨둔다. (module reference object)

5. 이것을 client 로 보낸다. 이 때 json 형식으로 된 결과를 보낸다.

   • The RSC Wire Format 예시[ref. 1] :

   M1:{"id":"./src/ClientComponent.client.js","chunks":["client1"],"name":""}
   J0:["$","@1",null,{"children":["$","span",null,{"children":"Hello from server land"}]}]

6. client 에서 Client Component 와 Server component들의 render된 결과안의 slot들을 render하고, merge 한다.

기존의 SSR 과의 차이

결과적으로 차이점은

• client 로 보내는 것이 html code 가 아니 json 으로 된 tree 이다.

뿐이라고 생각된다.

server component 를 기존의 servlet 같은 server side rendering(SSR)을 바탕으로 설명해보자.

기존의 SSR

기존의 server servlet page 같은 것들로 비교해서 설명할 수 있을 듯 하다. .jsp 같은 서블릿 페이지들은 다음과 같은 동작을 한다.

1. 브라우저에서 특정 page를 요청
2. 서버는 url 에 해당하는 servlet 페이지를 rendering 해서 html page 를 만들어 보내준다.
   • 이때 이 page안에는 javascript code 가 들어가 있다.
   • servlet을 rendering 할 때 servlet 내의 server 관련 함수들은 미리 호출이 돼서 페이지에 반영된다.
3. 브라우저가 받은 html page 중에 javascript 부분이 브라우저에 의해 실행된다.

React server component

1. 브라우저에서 특정 page를 요청
2. 서버는 url 에 해당하는 react component 를 rendering 하고, html page 를 만들어 보내준다.
   • 이때 이 page안에는 javascript code 가 없다.
   • 대신에 json 으로 된, element 를 만드는데 필요한 정보들이 있다.
   • rendering 할 때 server 관련 함수들은 미리 호출이 돼서 response에 반영된다.
3. 브라우저가 받은 json 를 가지고, client 에서 react component 를 다시 구성하고 rendering한다. 그리고 화면에 보여진다.

왜 써야 하는가?

굳이 이것을 써야 하는가에 대한 고민은 생긴다. 이전의 servlet 을 쓰는 것이 더 나은 것은 아닐까 생각된다.

see also. 1 을 보면, 관련 이야기가 있다. 한번 쯤 읽어보면 좋을 듯 싶다.

See Also

1. Is React Having An Angular.js Moment?

Reference

1. How React server components work: an in-depth guide
2. Composing Client and Server Components | Next.js