서버 사이드 렌더링이란?
Sever side = 서버 측
Rendering = 렌더링이란 요청한 소스코드들을 웹에서 사람이 볼 수 있는 형태로 만들어주는 것
Server side Rendering은 결국 서버 측에서 브라우저에 응답할 때 파일을 서버에서 렌더링해
서 보내주는 것을 말한다.
초기 전송 속도는 서버에서 렌더링 후에 보내주기 때문에 빠른 편이지만, 동적기능을 담당하는 js파일이 없다보니 인터렉션이 늦게 발생하고, 사용자가 요청하는 내용들을 매번 DB에서 요청되는 데이터들과 렌더링 후에 다시 보내야하기때문에 많은 유저들이 몰릴 경우 서버에 상당한 무리를 줄 수 있다.
초기에 서버사이드렌더링을 통한 요청과 응답의 모습을 볼 수 있다.
이 과정에서 단점으로 다른 페이지를 넘기거나 사용자가 다른 값을 변경
할 경우 그 페이지 내에 변경 값을 수정해서 다시 서버에서 렌더링한 후
사용자에게 보낸다는 것이다.
물론 이 후에 XMLHttpRequest를 통해 문서 전체가 아닌 서버에서
JSON 형식으로 일부분만 가져와서 JS를 통해 웹에서 렌더링하여
보여주게 되는데 이것이 SPA(Single Page Application)의 시작이다.
(후에 XMLHttpRequest는 Ajax로 변함)
클라이언트 사이드 렌더링이란?
쉽게 말해서 클라이언트 쪽에서 렌더링을 한다고 보면 된다.
서버에서 일일히 렌더링해서 보내는 것보다 데이터만 JSON형식으로 보내
주고 나머지 렌더링은 클라이언트 쪽에서 처리하는 것이 빠르고 효율적이
기 때문이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>app</title>
</head>
<body>
<div id="root"></div>
<script src="app.js"></script>
</body>
</html>서버 측에 페이지 요청을 하게되면 단순히 이런 간단한 HTML파일이 날라
오고 app.js라는 파일을 재요청하게 되면 그 안에 어플리케이션에 필요
한 프레임워크나 라이브러리가 들어있다.
이것을 클라이언트 내에서 렌더링한 후 사용자에게 보여주는 것이다.
단점이라고 한다면 첫 로딩속도가 느려질 수 밖에 없다는 것!
이유는 당연히 모든것들을 한번에 받아와서 렌더링을 해야하기때문에
어쩔 수 없이 로딩시간이 길어질 수 밖에 없다.
SEO = 검색 엔진 최적화에 불리하다. 이유는 첫 Response를 받았을
때 안에는 텅빈 Html파일이기때문에 검색엔진이 작동할 이유가 없다.
