TIL 13일차

🟥 SPA / MPA , CSR / SSR

• SPA(Single Page Application)는 한 개(Single)의 Page로 구성된 Application이다.
• MPA(Multiple Page Application)는 여러 개(Single)의 Page로 구성된 Application이다. (여기저기 URL로 넘어다님)

• CSR : 최초 요청시에 HTML을 비롯해 CSS, Javascript 등 각종 리소스를 받아온다. 이후에는 서버에 데이터만 요청하고, 자바스크립트로 뷰를 컨트롤
• SSR : 페이지를 이동할 때마다 서버에 새로운 페이지에 대한 요청을 하는 방식

---

제목	SSR	CSR
PAGE 이동	전체 페이지를 다시 렌더링	필요한 부분만 서버로 부터 받아서 화면을 갱신
초기 랜더링 속도	빠른편(서버에서 만들어 가져와서)	느린편(client에서 따로 JS처리를 해야해서)
SEO	완성된 형태의 HTML 파일로 => SEO 좋다	검색엔진이 색인을 할 만한 컨텐츠가 존재하지 않는다 => SEO 나쁘다.
장점	서버에서 이미 렌더링해 가져와 첫 로딩 매우 짧다.	컴포넌트별 개발 용이
단점	서버 렌더링에 따른 부하	JavaScript 파일을 번들링해서 한 번에 받기 때문에 초기 구동 속도가 느리다

---

🔴 내가 생각한 CSR과 SSR

🍎 SSR은 평소에 많이 쓰던 방법으로 index.html에 js가 붙여서 일단 index.html에 있는 태그들을 보여주게 하고(태그 들이 초기에 보이니 초기 구동이 빠르게 보인다) 그 후 JS들이 동작하게 만들어 처리를 한다.

🍏 CSR은 컴포넌트 방식으로 리터럴 템플릿 형태의 태그들이 JS에 저장되어 실제 index.html에는 필요 내용이 없이 존재하는 상태에서 JS가 동작하며 렌더링을 구성해준다. ( JS의 영향을 받아 실제 보이는 태그가 구성되므로 초기 구동은 SSR보단 느린 편이라 생각 )

🍋 CSR과 SSR을 확인 하려면 F12에서 네트워크를 확인해서 그때 받아온 html이 웬만큼 다 렌더링 된 상태로 오면 SSR이고 하나도 존재하지않고 다른 파일들과 클라이언트에서 렌더링해서 보여져야 CSR이라고 생각한다.
ex) 네이버에서 my.html을 보면 아이디 비번관련 쪽이 이미 preview로 보면 만들어진 상태를 볼 수 있는데 이는 서버에서 이미 만든 SSR이 아닐까 생각한다.

---

🟠 CSR이 SPA에만 적용되고 SSR은 MPA에만 적용되나❓

아니라는 의견을 보았다.
그 이유는 전통적 사이트에서 Ajax를 사용해서 클라이언트 사이드 UI를 자바스크립트로 변형시키면 이또한 CSR이라고 볼 수 있습니다.라고 한다.
즉, 여러URL를 오고가는 MPA에서 자바스크립트로 UI를 변경시키면 CSR이기 때문이다.
출처 : 유튜브 질문

---

🟧 해쉬뱅 / History API

SPA

1. 초창기 #을 붙이는 해쉬뱅
2. History API 사용
   1) pushState : 뒤로가기 활성화 , 이전주소가 남아있다.
   2) replaceState : 뒤로가기 활성화 X , 이전주소를 없앤다.
   3) popstate : history.go나 history.back을 할 때 발생

• History API는 SPA를 지원하기 위해 실제 서버와의 연결하는 것은 아니지만 비슷하게 보이게 pushState나 replaceState를 사용해서 url을 수정하여 SPA를 지원하는것이라 판단된다.

---

🟨 출처

SPA/MPA