docs: csr, ssr

docs/.vuepress/const.js

@@ -34,6 +34,7 @@ exports.FrontEndList = [
   'frontend/browserRender.md',
   'frontend/property-attribute.md',
   'frontend/axios_fetch_ajax.md',
+  'frontend/csr_ssr.md',
 ]
 exports.Alogorithm = ['Alogorithm/binary_search.md']
 exports.VuePressList = [

docs/frontend/csr_ssr.md

@@ -0,0 +1,112 @@
+# CSR, SSR
+
+## CSR 설명
+
+먼저 CSR 을 이해가 전 SPA 부터 설명
+
+### SPA
+
+SPA는 single page application으로 하나의 html을 두는 것을 의미
+
+다른 페이지로 이동할 때 필요한 부분만 수정해서 바꿈
+
+![Untitled](https://velog.velcdn.com/images/wooseok123/post/bd1216d7-036c-4bca-b4cb-e2c8e4058666/image.png)
+
+사진(ajax 통신 방식)과 같이
+
+1. 클라이언트가 서버에 요청
+2. 모든 정적 리소스를 받아옴
+3. 조작이 있을 시, Ajax 요청
+4. 바뀐 부분만 다시 받아옴
+
+### CSR
+
+- 렌더링 책임은 클라이언트에게 있음
+- SPA를 구축하는 데 용이한 방식
+
+SPA와 유사하지만 이해를 돕기 위해 렌더링을 생각하면 됨
+
+SPA - 리소스를 모두 받아와 클라이언트에서 한꺼번에 렌더링 함, 변경 시 모든 부분이 아닌 필요한 부분만 변경 (이걸 React는 가상돔을 사용하지만, Ajax 통신의 경우 필요한 리소스만 다시 받아옴)
+
+CSR - SPA를 렌더링 하는 방식
+
+즉, React와 같은 SPA 기반은 CSR로 렌더링한다.
+
+`CSR은 리소스를 모두 받아오기 때문에 초기 로딩이 느릴 수도 있음.`
+
+`그렇기 때문에 CSR방식은 JS 스크립트의 용량을 얼마나 낮춰 초기 로딩속도를 빠르게 하는지 가 중요해짐.`
+
+**CSR 장점**
+
+- 페이지를 이동할 때 깜빡거림이 없다.
+- 서버측 렌더링 부담을 덜어줌, 한번 다운 받은 리소스는 cache로 저장하기 때문에 다시 받아오지 않아도 도미
+- 모든 리소스를 받아왔기 때문에, 다른 페이지로 라우팅 할 때 이동속도가 빠름
+
+**CSR 단점**
+
+- SEO가 안됨
+  - 이미 만들어진 HTML이 아닌 정적 리소스로 받아와 클라이언트에서 페이지를 구성함으로, 초기 HTML 파일은 비어있다고 생각하면 된다.(React에 index.html에 뭐가 있는지 생각해 보자) 그렇기 때문에 SEO에 취약하다.
+- 첫 화면을 느리게 보여줄 수 있음
+  - 모든 리소스를 받아오기 때문에
+
+## SSR
+
+서버측에서 빈 HTML이 아닌 컨텐츠가 채워있는 상태로 렌더링되어 클라이언트로 보내지는 방식
+
+MPA를 구현하는데 쓰이는 렌더링 방식이다.
+
+### MPA
+
+Multi Page Application
+
+![Untitled](https://velog.velcdn.com/images/wooseok123/post/30a62005-4eca-4a12-a0e6-178f562bcdc5/image.png)
+
+전통적인 렌더링 방식이다.
+
+사용자에게 부드러운 환경 제공을 위해 CSR 방식이 생긴 거
+
+즉, CSR보다 전통적인 렌더링 방식이 SSR이다. (이걸 이해하려면 자바스크립트와 브라우저의 역사를 알아야함)
+
+**MAP 방식**
+
+1. 서버에 요청을 보낸다.
+2. 서버가 HTML 파일을 만들어 클라이언트에 전송
+3. 만약 수정이 있을시 다시 서버에 요청
+4. 수정된 HTML 파일을 만들어 다시 한번 클라이언트에 전송
+
+### SSR
+
+SSR은 서버에서 렌더링 된 상태로 클라이언트로 전해지는 것이다.
+
+렌더링된 파일이 먼저 받아 진 후, JavaScript 코드를 다운받게 된다.
+
+React의 경우 JSX구문이 js로 되있지만, SSR 환경에선 모두 렌더링 된 상태로 사용자에게 보여진다.
+
+(JavaScript 코드를 다운받는 의미는, 뷰와 관계없는 js 코드를 말한다. )
+
+`JavaScript의 로드 시간과, 뷰와 관련된 렌더링 시간이 다르기 때문에 이 차이를 얼마나 줄이느냐가 사용자 경험의 중요한 요소이다.`
+
+**SSR 장점**
+
+- 빠른 첫 로딩
+  - CSR 처럼 모든 리소스를 받지 않기 때문에 첫 로딩이 빠르다.
+- SEO에 좋음
+  - 이미 만들어진 HTML을 보내기 때문에 검색 엔진이 파일을 인식할 수 있다.
+
+**SSR 단점**
+
+- 페이지 이동시 깜빡거림이 있음
+- 서버에 많은 부하를 줄 수 있음
+- TTV < TTI
+  - 인터렉션이 많이 들어간 코드에선 UX가 안좋을 수 있다.
+  - TTV 와 TTI가 불일치 하기 때문에
+
+### 참고:
+
+TTV
+
+- Time To View, 클라이언트에서 페이지의 내용을 '볼 수 있을 때'까지의 시간을 의미한다.
+
+TTI
+
+- Time To Interact, 클라이언트에서 페이지의 내용을 '동작할 수 있을 때'까지의 시간을 의미한다.