둘다 결국 랜더링은 브라우저에서 해주는데 굳이 나눈 이유가 궁금해서 chatgpt에 질문
렌더링(Rendering)"은 컴퓨터 그래픽스에서 화면에 그림을 그리는 과정을 의미합니다. 웹에서 "렌더링"은 HTML, CSS, JavaScript 등의 웹 문서를 브라우저에서 화면에 그리는 과정을 의미합니다.
HTML을 생성하는 것은 "서버 사이드 렌더링(Server-Side Rendering, SSR)"의 과정 중 하나입니다. SSR은 서버에서 HTML, CSS, JavaScript 등의 웹 문서를 생성하고 브라우저로 전송하여 브라우저에서 화면에 그리는 과정을 줄이고, 초기 로딩 속도를 향상시키기 위한 방법입니다. 이 과정에서 서버에서 생성된 HTML 문서가 브라우저에 의해 렌더링(Rendering)되어 화면에 표시됩니다.
반면에 클라이언트 사이드 렌더링(Client-Side Rendering, CSR)은 브라우저에서 JavaScript를 사용하여 동적으로 화면을 그리는 과정을 의미합니다. 브라우저는 HTML, CSS, JavaScript 등의 웹 문서를 다운로드하고, JavaScript를 사용하여 화면을 동적으로 조작하고, 화면에 그립니다.
**-csr의 과정은 이렇습니다. -
1.브라우저에서 URL을 입력하거나 링크를 클릭하여 페이지를 요청합니다.
2.브라우저는 서버에서 HTML 파일을 다운로드하고, HTML 파일에 포함된 JavaScript 파일을 다운로드합니다.
3.브라우저는 JavaScript 파일을 실행하고, 리액트 애플리케이션을 로드합니다.
4.리액트는 가상 DOM(Virtual DOM)을 사용하여 화면을 구성합니다. 가상 DOM은 브라우저에서 실제로 렌더링되기 전에 메모리에서 관리되는 가상의 화면 구성요소입니다.
5.리액트는 초기 상태를 설정하고, 컴포넌트를 생성합니다. 컴포넌트는 화면을 구성하는 요소들을 말하며, 리액트에서는 컴포넌트를 조합하여 화면을 구성합니다.
6.브라우저에서는 리액트가 생성한 가상 DOM을 실제 DOM으로 변환하고, 화면에 그립니다. 이 과정에서는 브라우저의 렌더링 엔진이 HTML 요소를 받아서 화면에 그리는 작업을 수행합니다.
7.사용자가 애플리케이션에서 상호작용을 하면, 리액트는 컴포넌트를 업데이트하고, 변경된 부분만 다시 렌더링하여 화면에 반영합니다.
SSR의 과정은 다음과 같습니다.
1.클라이언트 측에서 서버로 HTTP 요청을 보냅니다.
2.서버는 요청을 받으면 라우터를 통해 요청에 대한 적절한 핸들러를 찾습니다.
3.핸들러는 데이터를 가져오고, 필요한 컴포넌트를 렌더링합니다.
4.렌더링된 HTML, CSS 및 JavaScript 코드를 클라이언트에 제공합니다.
5.클라이언트는 받은 코드를 실행하여 페이지를 렌더링합니다.
6.클라이언트에서 추가적인 JavaScript를 사용하여 SPA 방식으로 페이지를 동적으로 업데이트합니다.
결론은 SSR과 CSR을 나누는 기준은 서버와 클라이언트 간의 HTML 렌더링 책임의 차이라는것
