[감귤's 기초 상식 02 ] SPA, SSR, CSR 너네는 대체 뭐냐..?

어우, 용어 정리하는데도 머리가 아파서 어지럽습니다... SPA, SSR, CSR 도데체가 나를 어질어질하게 만드는 이것들은 대체 무엇인지 오늘 본격적으로 정리해보겠습니다. 🤣

 

 

 

 

🦕 SSR ( Server Side Rendering )

# Next.js

# SEO 에 유리 

# 초기 로딩 속도 빠름 : 네이버 블로그, 뉴스

# JS 파일을 모두 다운로드하고 적용하기 전까지는 어떠한 상호작용도 발생하지 않기는 함. 

# 서버에서 랜더링을 해서 브라우저로 보낸다 - 옛날에는 거의 SSR 사용.

# TTI 와 TTV 가 같음

[1] TTI ( Time to Interact )
새로고침을 수행하였을 때, 다시 무언가를 수행할 수 있을 때까지의 시간 ( 버튼이 재 활성화 될 때가지의 시간 )
 
[2] TTV ( Time to View ) 
전체 화면이 보여지는 때까지의 시간 

 

 

🦕 CSR ( Client Side Rendering )

# 아고다

# 동적으로 라우팅 관리 

# 빠른 라우팅으로 강력한 유저 경험(UX)을 제공. - 사이트에 상호작용 많을 때 사용

# 서버에서 랜더링을 해서 브라우저로 보낸다 - 옛날에는 거의 SSR

# JS API를 통해  브라우저에서 랜더링해서 View에 보여줌

# TTI 는 느리고 TTV 는 빠름.

* 전체를 재 랜더링 하기 때문. 

 

 

 

🦕 SPA ( Single Page Apllication ) 

# 일종의 CSR

# single web document만 로드한 다음 내용이 표시 될 때 XML, Fetch와 같은 JS API를 통해 해당 문서의 본문 내용을 업데이트.

 

 

 

 

 

 

---

참고 01 : https://www.startupcode.kr/company/blog/archives/11

참고 02 : https://www.ascentkorea.com/seo-for-spa/

참고 03 : https://velog.io/@fromzoo/SSR-vs-SPA

참고 04 : https://www.daleseo.com/spa-ssg-ssr/

참고 05 : https://narup.tistory.com/264

참고 06 :