서버사이드 렌더링 개념정리
출처 [ https://www.youtube.com/watch?v=iZ9csAfU5Os ]
Sites history
Static Sites ( 1990s )
서버에 html 문서를 저장하고, 도메인 주소로 접속 시 , 그 html 문서를 보여주는 형식.
- 문제점
- 페이지 내의 다른 링크를 클릭 하면 서버에서 다시 해당 페이지 html 문서를 받아와서 업데이트를 해 출력 해주기에 사이트가 클 수록 사용성이 떨어진다.
iframe ( 1996 )
문서 내에서 또 다른 문서를 문서를 담을 수 있는 iframe 태그가 도입이 되었다.
부분적으로 문서를 받아와서 업데이트를 할 수 있게 되었다.
XMLHttpRequest ( 1998 ~ )
fetchAPI의 원조이다. HTML 문서 전체가 아니, JSON 과 같은 포맷으로 서버에서 가볍게 필요한 데이터만 받아올 수 있다.
JavaScript 를 사용하여 동적으로 html 요소를 생성해서 페이지에 업데이트 하는 방식이다.
AJAX ( 2005 ) Asynchronous JavaScript And XML
공식적으로 AJAX 란 이름으로 XMLHttpRequest 객체를 활용하여 서버 통신을 하는 것에 사용한다.
구글 Gmail 과 GoogleMaps 를 이것으로 만들었다. (SPA - Single Page Application)
사용자가 한 페이지에 머무르면서 필요한 데이터를 서버에서 받아와서 부분적으로 업데이트를 한다.
가장 큰 특징으로는 페이지가 리프레쉬 하지 않아도 되는 수행이 되는 비동기성이다.
CSR ( Client Side Rendering )
SPA 트렌드 , 사용자들의 PC성능의 향상으로 많은 처리 동작 들이 무리 없이 수행 할 수 있게 되며, 자바스크립트의 표준화가 잘 되어짐에 따라 React, Vue와 같은 CSR 프레임워크 라이브러리들이 나타나게 된다.
모든 처리를 클라이언트 (브라우저) 에서 처리하는 것을 말한다.
[ CSR HTML 예제 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta
name="description"
content="Web site"
/>
<title>App</title>
</head>
<body>
<div id="root"></div>
<script src="app.js"></script>
</body>
</html>예제를 보면 HTML 문서가 텅텅 비어있기 때문에, 처음 접속을 했을 경우 화면은 빈 화면만 보인다. 링크 된 app.js 파일을 서버에서 다운로드 받게 되는데, 해당 파일 안에는 페이지에 필요한 로직 뿐 아니라 구동하는 프레임워크나 라이브러리도 포함이 되어 있다. 해당 파일을 읽어 동적으로 html 화면을 뿌려준다.
- 문제점
- 한 개의 파일에 압축 해 놓은 형태라 사이즈가 클 수 있어 사용자가 첫 화면을 보기까지 시간이 오래 걸릴 수 있다.
- 좋지 못한 Low SEO ( 검색엔진 최적화 ) , CSR에서 사용 되는 html의 body 부분은 텅텅 빈 형태이기 때문에, 크롤링이 잘 안되는 단점이 있다.
SSR( Server Side Rendering )
CSR의 문제점들로 인해 1990년 중반에 사용하던 Static Sites 에 영감을 받아 도입이 되게 된다.
클라이언트에서 모든 것을 처리하는 방식 과는 다르게, 서버에 필요한 데이터를 모두 가지고 와서
html 파일을 만들고 , html 파일을 동적으로 제어 할 수 있는 소스 코드와 함께 클라이언트(브라우저)로 보내주는 방식이다.
첫번째 페이지 로딩이 빠르고, 모든 컨텐츠가 html에 담겨, SEO에 효율성이 증가 하였다.
- 문제점
- 사용자가 클릭을 하게 되면 전체적인 웹사이트를 다시 서버에서 받아오는 것과 동일 하기 때문에, Static Sites 에서 발생하던 깜빡임(Blinking) 이슈가 생긴다.
- 사용자가 클릭을 할 때 마다, 서버에 요청하여 html을 만들어야 하기 때문에 서버에 과부하가 걸리기가 쉽다.
- 사용자가 빠르게 웹사이트를 확인 할 수 있지만, js파일을 아직 읽어오지 못했을 경우, 클릭이나 동적인 반응을 못하는 경우도 발생할 수 있다.
TTV( Time To View ) 와 TTI( Time To Interact )
- CSR 정리
- 사이트에 접속 한다.
- 서버에서 index 파일을 받아온다 ( HTML 파일이 아무것도 없기 때문에, 빈 화면 )
- html 파일에 링크되어 있는 모든 로직이 담겨있는 js 파일을 클라이언트로 요청한다.
- 받아온 js 파일로 인해 동적으로 html 사용자에게 보여지고 클릭 할 수 있게 된다.
CSR은 사용자가 웹사이트를 볼 수 있음 ( TTV ) 과 동시에 클릭을 하거나 인터랙션 ( TTI ) 이 가능하게 된다.
고민해야할 부분
번들링 해서 사용자에게 보여주는 js 파일을 효율적으로 분할 해서 첫번째로 사용자가 보기 위해서 필수적인 부분만 보낼 수 있는 지에 대한 고민.
- SSR정리
- 사이트에 접속 한다.
- 서버에서 이미 만들어진 index 파일을 받아오게 되고, 사용자가 볼 수 있다. ( js를 받아오지 않아서 동적으로 제어 할 순 없다) ( TTV )
- 자바스크립트 파일을 서버에서 받아온다.
- 동적인 구현 클릭이나 인터랙션이 가능하게 된다. ( TTI )
사용자가 사이트를 볼 수 있는 시간과 인터랙션을 할 수 있는 시간에 대한 공백이 존재하는 편이다.
고민해야할 부분
사용자가 보고 인터랙션 하는 시간 단차를 줄이기 위한 노력 및 매끄러운 UI & UX를 제공이 가능 할 지에 대한 고민.
SSG ( Static Site Generation )
react 는 csr 에 특하된 라이브러리 이지만 , gatsby 와 함께 사용 하면, 리액트로 만든 웹 어플리케이션을 정적인 웹페이지로 미리 생성을 해서, 서버에 배포를 할 수 있다.
추가적인 데이터를 서버에서 받아오거나 동적으로 처리 해야 하는 로직이 있다면, 자바스크립트 파일을 함께 넘길 수 있기 때문에 동적인 작업도 충분히 가능하다. ( next.js 도 가능 )
'STUDY > JavaScript' 카테고리의 다른 글
| [TypeScript] TypeScript 할때, DT와 TS의 차이! (별로 쓸데없음 주의) (0) | 2023.01.02 |
|---|---|
| [JavaScript] Array.prototype.reduce() | 리듀서 함수 (0) | 2022.12.02 |
| [JavaScript] Array(배열) JS 함수 정리(2) (0) | 2022.11.28 |
| [JavaScript] 문자열 함수 실행 eval() , new Function() (0) | 2022.11.27 |
| [JavaScript] ID , Class 제어 Element.id Element.className (0) | 2022.11.27 |
댓글