[참고: Server Components - next.js docs]
[참고: Server Components - react docs]
React Server Components – React
The library for web and native user interfaces
react.dev
Rendering: Server Components | Next.js
Learn how you can use React Server Components to render parts of your application on the server.
nextjs.org
React v18에서 도입되고, NextJs v13에서 기본 컴포넌트로 사용된 서버 컴포넌트에 대해서 알아보려합니다.
Server Components are a new type of Component that renders ahead of time, before bundling, in an environment separate from your client app or SSR server.
React 공식문서에서 처음 언급한 내용중에 SSR 서버와는 다른,, 이라는 문구가 존재합니다.
하지만 이 문구만으로는 서버 컴포넌트가 어떻게 SSR 서버와 다른건지 알수가없습니다.
이를 이해하기 위해서는 우선 서버 렌더링과 클라이언트 렌더링을 이해하면 좋습니다.
Client Rendering vs Server Rendering
리액트는 SPA이므로 일반적으로 매우 간단한 HTML(진입점 정도만 존재하는 html)위에 자바스크립트를 이용하여 컨텐츠를 그립니다.
위의 문장을 파일로 말한다면, HTML 파일과 JS 번들 파일이 존재할것입니다.
즉, 리액트로 구성된 웹을 완벽하게 확인하려면 HTML 파일과 JS 번들 파일이 모두 가져와진 후입니다.
반대로 말해서 JS 번들이 도착하지 않는다면 사용자는 매우 간단한 HTML, 즉 빈화면을 보게될것입니다.
이러한 동작은 일반적으로 문제가 되지 않지만, 만약 인터넷이 느린곳 또는 JS 번들 크기가 큰 상황에서는 문제가 될 수 있습니다.
인터넷이 느려서 JS 번들이 도착하는데 시간이 오래 걸린다면 수 초간 빈 흰 화면을 보고있어야합니다. (JS 번들 크기가 큰 경우도 마찬가지)
이러한 렌더링 방식을 Client Rendering이라고 합니다
물론 클라이언트 렌더링이 무조건 나쁜 것은 아닙니다.
우선 필요한 모든 파일을 가져온 후에는 마친 한 페이지에서 이동하는 것처럼 빠른 상호작용을 경험할 수 있습니다.
단지 초기 로딩시에 문제가 될 수 있다는 점을 언급하고 싶었습니다.
이러한 문제점을 해결할 수 있는 방법이 Server Rendering입니다.
서버 렌더링의 경우 사용자가 웹에 방문하면 마찬가지로 서버에 요청이 보내지고, 서버에서 HTML 파일과 JS 번들을 제공합니다.
하지만 차이점이 존재합니다.
이전의 SPA에서는 진입점만 존재하는 HTML을 제공한 후 js를 이용하여 동적으로 컨텐츠를 불러왔다면, 이번에는 HTML에 어느정도 필수적인 컨텐츠를 렌더링한 후에 클라이언트로 전송해줍니다.
이러면 사용자 입장에서는 JS를 이용할 수 없는 환경에서도 필수적인 정보가 보여집니다.
그림으로 표현하면 아래와 같은것입니다.
위의 사진에서 Render application on server(연한 주황색)이 마무리되는 8(x축)쯤부터 서버 렌더링의 경우에는 유저가 컨텐츠를 확인 할 수 있습니다.
반면 클라이언트 렌더링의 경우 JS 번들이 모두 로드되는 25(x축) 부터 컨텐츠를 확인할 수 있습니다.
'NextJs' 카테고리의 다른 글
| [NextJs] 서버 액션을 사용하면 클라이언트 구성 요소가 서버에서 실행되는 비동기 함수를 호출할 수 있습니다 (0) | 2024.09.22 |
|---|---|
| [NextJs] Streaming을 이용하여 최대한 빠르게 컨텐츠를 표시할 수 있습니다 (0) | 2024.09.19 |
