CSR 과 SSR

CSR과 SSR에 대해서 정리를 한번 하고 가야겠다. 두 개를 비교한 글들이 많아서 특징을 정리하기는 수월했다. 근데 뭔가 렌더링 과정에 대해 내가 정확히 알지를 못해서 두 특징들이 와닿지 않은 거 같다. 따라서 렌더링부터 보자. 그리고 공부하면서 당연하다고 생각했던 script의 위치와 CSR과 SSR에서는 어떤 차이를 가져오는지 내 생각을 정리해 보겠다. 

일단 내가 헷갈렸던 부분부터 정리하고 넘어가자. 먼저 SSR 말고 CSR이 나오게된 간단한 이유는 페이지상에 제공되는 데이터들이  많아지니 문제점들이 많아져서 져서 CSR이 나온 거 같다.

---

CSR과 SSR의 차이를 보면 SSR은 서버에서 렌더링 해서 그냥 브라우저에서 띄울 수 있게 넘겨준다는데 그럼 이미 DOM이 만들어진 상태인가?  

이거는 명확하지 않은데 서버사이드에서 템플릿 엔진이 그냥 바로 볼 수 있게 만들어 주는 거 같긴 하다. 근데 DOM은 결국 브라우저 렌더링 엔진에서 따로 만들어야 하지 않나? 싶다. SSR도 당연히 템플릿을 받아서 script를 브라우저가 읽어서 받아오는 과정을 따로 거쳐야 한다.

그리고 템플릿 엔진을 찾아 보니까 클라이언트 템플릿 엔진이라고 하는 용어도 나오는데 이게 내가 아는 react 나 vue 같다. 서버사이드 템플릿 엔진은 내가 아는 pug나 그 플라스크나 장고로 개발하다 보면 템플릿에 jinja2 쓰는데 이런 경우인 거 같다.  아무튼 그래서 SSR은 서버에서 만들어 놓은 템플릿에 데이터를 바인딩 해서 렌더링을 해서 보내고, CSR은 브라우저가 공통적인 프레임을 템플릿으로 만들어서 요청에 따라 데이터만 전달받아 DOM을 동적으로 그려주는 방식이다.( 특징들은 다른 데서 잘 찾아보면 더 나온다)  결론적으로는 둘 다 브라우저 렌더링 엔진에서 렌더 트리는 만들어야 되는 거 같음 그래야 자바스크립트로 조작할 수 있으니까.

---

그럼 다음 궁금증은 렌더링 과정에 대해 각종 글들을 읽다보면 html을 렌더링 엔진이 파싱 하면서 스크립트 코드를 만나면 멈추고 자바스크립트를 받아 오고 그건 또 자바스크립트 엔진이 처리하고 한다는데.. 그럼 중간에 아직 DOM이 완성이 안됐는데 조작을 하는 경우가 생긴다는 건데 그럼 문제가 안생기나?? 찾아보니 생긴다고 한다. 그래서 스크립트 를 body 하단에 위치한다고도 한다. 나는 그렇게 안 한적도 많고 또 그냥 head에 넣는 경우가 많아서 찾아보았다. 그래서 경우들을 정리해 보자.

스크립트 태그를 넣는 경우는 크게 4가지가 있다.  그전에 스크립트태그의 파일은 2가지 과정을 거치는 것을 알아야 한다 다운로드와 실행이다. 이거에 따라서 또 경우가 나뉜다. 

아무튼

첫번째 경우는 head에 넣는 경우인데 이건 위에서 말한 것처럼 중간에 파싱이 멈춘다. 그래서 예기치 못한 문제가 말 생활 수 있다고 한다.

두 번째 경우는 body 마지막에 태그를 넣는다고 한다 파싱이 다 끝나가니까 상관없을 거 같다. 웹이 자바스크립트에 의존적이라면 더 상관 없다고 한다. 그래서 내가 보기에는 CSR은 이런 식으로 동작하는 하지 않을까 생각한다..

세 번째는 <script async src="script.js"></script>  이런식으로 async를 사용하는 경우다. 이건 파싱 하면서 script를 받는데 문제는 다운로드한 뒤 실행을 시켜서 중간에 파싱이 멈춘다. 이 방법은 좀 더 빠른데 첫 번째 경우와 같은 문제가 생길 수 있다.

마지막은 <script defer src="script.js"></script> 이런식으로 defer를 사용하는 방법이 다. 가장 안정적이다 다운은 스크립트를 읽으면 받고 실행은 파싱이 끝나면 한다. 그래서 가장 안정적인 방법 같다. 

구체적인 그림은 참고에 있는 블로그를 보면 될거 같다. 자세하게 써주셨다.

 

그래서  내 생각은 react 같은 친구들은 어차피 동적으로 dom을 만들어내는 jsx로 다 처리하니까 2번째 경우와 비슷한 거 같다. 

 

구체적인 CSR, SSR 비교: https://proglish.tistory.com/216

SSR과 CSR의 차이

참고: https://jae04099.tistory.com/entry/HTML-script-%ED%83%9C%EA%B7%B8%EB%8A%94-%EC%96%B4%EB%94%94%EC%97%90-%EC%9C%84%EC%B9%98-%ED%95%B4%EC%95%BC-%ED%95%A0%EA%B9%8C

[HTML] script 태그는 어디에 위치 해야 할까?

 

 

틀린점 찾아 주시면 감사하겠습니다.