CSR 이란?
React를 사용한 CSR에서 브라우저는 페이지에 필요한 최소한의 HTML 페이지와 JavaScript를 다운로드한다. 그런 다음에 JavaScript를 사용해서 DOM을 업데이트하고 페이지를 렌더링한다. 애플리케이션이 처음 로드될 때, 즉 사용자가 페이지를 처음 로딩했을 때 사용자는 전체 페이지를 보기 전에 약간의 딜레이를 느낄 수 있다. 모든 JavaScript가 다운로드 및 실행이 될 때까지 페이지가 완전히 렌더링되지 않기 때문이다.
순서대로 나타내자면 다음과 같다.
- 사용자가 홈페이지를 최초로 접속했을 때 클라이언트는 이를 확인하고 서버로 요청한다.
- 서버는 빈 페이지(HTML, CSS)를 클라이언트에게 전달한다. (JavaScript에 대한 링크는 존재)
- 전달받은 클라이언트에서 해당 화면을 그려주고 스크립트를 다운로드하여서 최종적인 화면을 사용자에게 보여준다.
(따라서 JS 다운로드를 완료하기 전에는 빈 페이지만 보여주게 된다. 즉, 로딩이 느림) - 사용자가 다음 액션을 수행하는 경우 클라이언트 내에서 페이지를 요청하고 수행한다.
페이지가 처음으로 로드된 후에는 필요한 데이터만 가져오면 되고 JavaScript는 전체 페이지를 새로 고치지 않고도 페이지의 일부를 다시 렌더링할 수 있으므로 동일한 웹 사이트의 다른 페이지로 이동하는 것이 일반적으로 더 빠르다.
< 참고 출처 >
https://nextjs.org/docs/pages/building-your-application/rendering/client-side-rendering
Rendering: Client-side Rendering (CSR) | Next.js
In Client-Side Rendering (CSR) with React, the browser downloads a minimal HTML page and the JavaScript needed for the page. The JavaScript is then used to update the DOM and render the page. When the application is first loaded, the user may notice a slig
nextjs.org
The Benefits of Server Side Rendering Over Client Side Rendering
Most of our pages on walmart.com are using server side rendering (henceforth SSR) with only a few unique exceptions.
medium.com