공부한 내용을 정리한 글입니다
내용에 오류가 있거나 더 좋은 의견이 있다면 댓글로 남겨주세요.
배움에 큰 도움이 됩니다. 🖋
CSR
index.html
<body>
<div id="root"><div>
<srcipt src="app.js"></script>
</body>
웹서비스에서 점차 동적인 처리를 할 일이 많아지면서, 사용자가 한 페이지 내에 머무르면서 필요한 데이터를 서버에서 받아와 부분적으로만 업데이트하는 SPA이라는 개념이 등장했다. CSR은 이 SPA가 렌더링 되는 방식이다.
서버에서 빈 HTML파일을 받아와 브라우저의 Javascript 엔진이 그 안에 링크된 스크립트 파일을 이용해 동적으로 HTML element를 생성하고, 그것을 root element에 추가하는 방식으로 렌더링 된다.
렌더링 순서
1. 사용자가 사이트에 접속해 웹 페이지를 요청한다
2. 브라우저가 서버에서 Javascript 파일 링크가 포함된 빈 index.html 파일을 응답받는다.
<body>
<div id="root"><div>
<srcipt src="app.js"></script>
</body>
3. 아직 html 안에는 element가 없기 때문에 사용자는 빈 페이지를 보게 된다.
4. 브라우저가 index.html에 링크된 Javascript 파일을 다운받는다
- 파일 안에 어플리케이션에 필요한 로직, 구동할 프레임워크(React), 라이브러리의 소스코드도 포함되어 있기 때문에 사이즈가 크다.
다운받는 시간이 오래 걸릴 수 있다.
5. 프레임워크를 통해 Javascript가 실행되고, data를 받아오기 위한 api 요청을 한다. 사용자가 placeholder를 볼 수 있다.
6. 서버에서 브라우저에 응답 데이터를 보낸다.
7. 이제 사용자가 데이터가 채워진 온전한 페이지를 보고, 상호 작용할 수 있다.
특징
1. 렌더링을 브라우저에서 하므로 서버 부하를 줄일 수 있다.
2. 초기에 받는 파일의 크기가 커 초기 페이지 로드가 오래걸린다.
- Javascript 파일을 번들링해 한 번에 받기 때문에 받는 파일의 크기가 크다.
3. 렌더링이 필요한 부분만 바꾸기 때문에 페이지 새로고침이 발생하지 않는다.
- 클라이언트의 프레임워크에서 데이터가 변경된 특정 DOM 요소만 다시 렌더링 한다.
- 초기 렌더링 이후의 페이지를 로드할 때 빠르다.
4. HTML body가 비어있어 검색 크롤러가 사이트를 분석하는데 어려움이 있다.
- 구글의 검색 크롤러는 Javascript를 읽을 수 있어 괜찮지만 그렇지 않은 검색사이트에서 SEO가 어렵다.
고민할 점
번들 파일의 크기를 줄이기 위한 방법
- 사용자에게 보여지는 최종 번들 Javascript 파일에 꼭 필요한 로직만 보내기 위해 코드를 어떻게 스플리팅 할 것인가.
SSR
서버에서 사용자에게 보여줄 페이지를 미리 구성해 사용자에게 보여주는 방식이다.
렌더링 순서
1. 사용자가 사이트에 접속해 웹 페이지를 요청한다
2. 서버에서 즉시 렌더링이 가능한 index.html 파일을 생성한다.
3. 브라우저가 서버로부터 렌더 가능한 HTML을 응답받는다. 사용자가 렌더링된 웹사이트를 볼 수 있다. 그러나 아직 동적으로 제어할 수 있는 Javascript 파일은 받아오지 않았으므로 상호작용 할 수 없다.
4. Javascript 파일을 다운로드한다.
5. 이제 사용자의 상호작용에 응답할 수는 없지만 동작을 기억해 놓을 수는 있다.
6. 브라우저가 Javascript 프레임워크를 실행한다.
7. 페이지가 완전히 로드되었다. 이전에 기억해 놓은 사용자의 상호작용이 있다면 실행된다. 이제 웹페이지에서 상호작용이 가능하다.
특징
1. 사용자가 클릭을 할 때마다 서버에 요청이 가기 때문에 서버 요청이 잦아진다.
- 깜빡임 이슈가 있다. 사용자가 클릭 시 서버에서 웹사이트 전체를 다시 받아 오는 것과 동일하기 때문
2. 렌더할 준비가 된 파일을 응답받기 때문에 사용자가 콘텐츠를 보는 시점이 빠르다. 그러나 상호작용 가능한 시점과 시차가 있다.
- 동적으로 데이터를 처리할 수 있는 Javascript를 나중에 다운받기 때문이다.
- 서버에서 페이지를 생성하는 데 시간이 걸리므로 전체적인 페이지 렌더링은 CSR에 비해 느리다. 전체 페이지가 다시 로드된다.
3. 깜빡임 이슈가 있다. 사용자가 클릭 시 서버에서 웹사이트 전체를 다시 받아 오는 것과 동일하기 때문.
4. 크롤러가 사이트를 분석하는데 필요한 모든 정보가 index.html에 담겨져 오기 때문에 SEO를 쉽게 적용할 수 있다.
고민할 점
TTV와 TTI 시간차를 줄이기 위한 방법
SSG
각 URL에 대한 HTML 파일을 미리 생성해 서버에 배포해 놓는 방식이다.
특징
1. Javascript 파일을 함께 갖고 있어 추가적인 데이터 요청이나 동적인 처리가 가능하다.
2. URL을 미리 예측할 수 없거나 페이지 수가 많은 사이트의 경우 정적 사이트로 관리하는 것이 어렵거나 불가능할 수 있다.
참고
https://d2.naver.com/helloworld/7804182
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
https://www.infidigit.com/blog/server-side-rendering-vs-client-side-rendering/
Server-Side Rendering vs Client-Side Rendering: Which one is Good?
Server-Side Rendering vs Client-Side Rendering: It's important to decide which web rendering technique is good when creating a website. learn CSR vs SSR in detail
www.infidigit.com
'WEB' 카테고리의 다른 글
| [HTTP 완벽 가이드] HTTP가 사용자를 식별하는 데 사용하는 기술 (0) | 2023.10.16 |
|---|---|
| presigned URL을 이용 중 CORS 에러가 났다 (0) | 2023.02.06 |
| Browser의 렌더링_Render Tree의 생성, 배치, 그리기 (2/2) (0) | 2023.01.17 |
| Browser의 렌더링_Browser, DOM, SSOM (1/2) (0) | 2023.01.16 |
| Token의 구조부터 Access, Refresh Token까지의 간략한 정리 (0) | 2023.01.13 |
댓글