리액트에서 서버 컴포넌트와 클라이언트 컴포넌트의 차이

Question

리액트에서 서버 컴포넌트와 클라이언트 컴포넌트에 대해서 공부를 하던 중에도대체 서버와 클라이언트의 차이가 뭔지 이해가 되지 않아서 글을 남깁니다.리액트에서 각자 어떤 방식으로 쓰이는지에 따라 갈리는거 같은데제가 그 안에서의 클라이언트와 서버가 어떻게 구분되는지 명확히 이해가 안가는데 설명해주실 수 있나요??

HJOW · Answer

서버와 클라이언트부터 먼저 공부하셨어야 하는 듯?리액트를 공부하기 전에, 웹이라는 게 어떻게 동작하는지부터 공부하셨어야 한다는 겁니다.간단히 쓴다고 쓴 건데 길어져서https://velog.io/&#64;hahan/%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8Client-vs-%EC%84%9C%EB%B2%84Serverhttps://velog.io/&#64;jennyfromdeblock/%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8%EC%99%80-%EC%84%9C%EB%B2%84-%EB%B9%A0%EB%A5%B4%EA%B2%8C-%EA%B0%9C%EB%85%90%EC%9E%A1%EA%B8%B0더 요약이 잘된 블로그로 대체함.웹개발자라면 이건 기본으로 알고 있어야 함.자바 스프링이든 node.js든 php든 나발이든 이 구조에서 절대 크게 벗어날 수가 없음.특히 서버 사이드 렌더링을 이해하려면 반드시 이걸 먼저 이해하고 넘어가야 함.https://yozm.wishket.com/magazine/detail/2271/이 글은 그 다음에간단히만 설명하면우리가 웹브라우저(크롬, 엣지 등등) 로 주소를 쳐서 웹사이트에 접속을 합니다.이걸 &#34;요청&#34; 이라고 합니다.서버는 이 &#34;요청&#34;을 받습니다.여기서의 서버는, 요청을 받는 컴퓨터를 말하기도 하고, 그 컴퓨터 안에서 요청을 받아 처리하는 프로그램을 말하기도 합니다.여하튼서버는 요청을 받아, &#34;응답&#34;을 만듭니다.보통은 html 소스 형태의 텍스트가 됩니다.그 응답을, 요청을 보낸 웹 브라우저에게 전송합니다.웹 브라우저는 응답을 받았습니다.html 소스이지요. 이 html 소스를 화면에 &#34;렌더링&#34; 합니다.렌더링이 뭐냐면, 복잡할 거 없이, 특수 문법 (html)으로 작성된 내용을 실제 우리가 원하는 UI로 바꿔준다고 보면 됩니다.그래서 우리는 이쁜 웹 사이트를 두 눈으로 볼 수 있게 됐습니다.클라이언트는 &#34;고객&#34;이라는 뜻입니다.웹 브라우저는 대표적인 웹 &#34;클라이언트&#34; 라고 할 수 있습니다.여기까지가 기본.웹 소스 상에서 자바스크립트 코드를 써서 뭔가 작업을 하는 건일반적으로 서버가 관여하지 않습니다.자바스크립트가 들어간 html과, js 파일 째로 웹 브라우저가 받아서웹브라우저가 js 를 동작시키는 겁니다.리액트도 일개 js 라이브러리에 불과합니다. 역할이 커서 프레임워크 라고 거창하게 불러주는 것 뿐이죠.그래서 리액트로 만든 웹 페이지는 대부분 웹 브라우저에서 연산이 됩니다.그래서, 리액트의 거의 모든 컴포넌트는 기본적으로 &#34;클라이언트 컴포넌트&#34; 라고 합니다.왜냐하면, 웹브라우저인 클라이언트에서 동작하기 때문이죠.반면next.js 같은 얘들이 등장하면서리액트 소스를 서버에서 먼저 연산을 시켜서웹브라우저에는 html 형태로 바꿔서 보내는 방식이 생겨났습니다.이를 &#34;서버 사이드 렌더링&#34; 이라고 합니다.웹 브라우저에서는 연산된 결과물을 받을 뿐이므로원래의 소스를 알 수 없고대신, 연산이 이미 되어 변환된 내용을 받기 때문에 나머지는 그냥 화면에 보여주면 됩니다.그래서 서버 사이드 렌더링이 다들 성능이 좋다고 하는 겁니다.성능만의 문제가 아닙니다.가령, 기존에는 자바스크립트로 DB에 액세스할 수가 없었습니다.사실 당연합니다. DB는 서버에 설치되어 있거나, 서버에서만 접근 가능한 컴퓨터에 설치가 되어있죠.그런데 자바스크립트 코드는 클라이언트 웹 브라우저에서 실행됩니다.그래서 기존에는, DB 에서 데이터를 가져올 때 서버에 ajax, fetch 같은 기술로 요청을 또 보내고 응답을 받아와야 했습니다.서버 사이드 렌더링 기술을 사용하게 되면, 일부 자바스크립트 코드 (서버 컴포넌트) 가 서버에서 실행이 되므로DB에서 데이터를 받아다가 자바스크립트 코드에 바로 때려넣을 수가 있습니다.리액트 서버 컴포넌트도 마찬가지로서버 사이드 렌더링 방식을 쓰는 기술 중의 하나입니다.무조건 좋은 건 아닙니다. 가령 리액트 서버 컴포넌트는 백엔드 플랫폼을 반드시 node.js 를 써야만 이용할 수 있습니다.서버 사이드 렌더링은 엄밀히 말하면 예전에도 존재하던 기술입니다.가령, jsp 의 스크립틀릿, EL, JSTL 등의 문법은 서버에서 먼저 연산되어 html로 변환되므로, 이 또한 엄밀히 말하면 서버 사이드 렌더링이라 할 수 있습니다. php 도 마찬가지이고 말이죠.뭐 이건 각설하고그럼 언제 클라이언트 컴포넌트를언제 서버 컴포넌트를 써야 되느냐블로그 글로 대체https://yozm.wishket.com/magazine/detail/2271/그런데 중요한 건내가 타이핑 치고 있는 이 코드가 어디서 실행되는지 정도는 알아야 한다는 겁니다.

M N · Answer

렌더링 방식에서 차이가 있고 그에 따라 갖을수 있는 장점들이 있습니다 예를 들어 서버사이드렌더링 경우 서버에서 미리 html을 받아오기때문에 첫화면 로딩이 빠르다는 장점이 있습니다 그리고 데이터를 미리 받아와야하는 사이트의 경우 이런 서버사이드렌더링 방식에서 강점을 가집니다

풍월상신(가니메디안) · Answer

이 동네는, 뿌리가 java 이어서인지, react 에 대해서는 무지하면서 용감한 사람들이 참 많은 것 같아요.남의 글 긁어와 답변하는 사람에, AI 답변 긁어와 뿌리는 주인장도 있고...참 한심하다고 생각하는데,이 글만 해도, Server Component 가 뭔지 알면서 대답한 사람이 1 도 보이지 않습니다.본질적으로, React 가 지향하는 것은 SPA App 이죠. SPA App 은 서버 의존적이지 않습니다.React SPA App 은, 일단 다운로드 된 이후에는 서버 의존성이 없습니다. -데이터 통신을 제외한다면 말이죠-React 류의 Server-less 프레임웍이 등장하면서, Server-less BaaS 들이 등장했는데, AWS, FireBase 같은 것이죠.그러나, Server 가 없는 React App 에게, 클라이언트-서버 간의 직거래가 발생하는 문제가 있습니다. Credential 이 클라이언트에게 전송되어야 하는 경우가 발생할 수 있다는 것이죠. 마치 옥션에서 직거래가 발생하는 문제..NextJS 는, Server Action 이라는 아키텍쳐를 도입해서, 이 문제를 해결하고 있습니다. 믿거나말거React 17 까지에서는, '서버 컴포넌트' 라는 개념은 없었다고 저는 이해하고 있어요. 하지만 NextJS 13 부터는 철저하게 '서버 컴포넌트' 가 디폴트로 작동하고 있죠.What is Server Component?React 18 이전에는, 모든 컴포넌트가 Client Component 였습니다.하지만, NextJS 14 에서부터, 모든 컴포넌트는 디폴트로 Server Component 가 되었습니다.서버 컴포넌트에서 생성된 코드는, 사전 제네레이트 된 Dom 상태로 Client 에게 전달됩니다. SSR/SSG기존 클라이언트 컴포넌트와 가장 큰 차이점이라면, 서버에서 완성된 Dom 이 클라이언트로 다운로드 됩니다.펑션 코드의 전달이 불가능합니다. 단, Server Action 펑션의 전달은, Next 의 내부 로직에 의해 가능합니다.

리액트에서 서버 컴포넌트와 클라이언트 컴포넌트의 차이

3개의 답변

Q&A 목록