프론트엔드의 SPA와 SSR

 

SPA는 본적이 있는데 SSR이라는 말은 초면인것같아서...

찾아보다가 까먹기전에 정리해둔다!

---

1. CSR (Client Side Rendering)

• 클라이언트에서 js를 통해 렌더링 하는 방식
• SPA형식의 대부분의 프론트엔드 라이브러리(Vue, React...)가 CRS방식으로 만들어짐
• 초기 렌더링 시간 문제, SEO문제, 메타데이터 동적 생성의 한계를 극복하기 위해 SSR프레임워크(Next.js, Nuxt.js...)를 보유하고있음

1-1. SPA (Single Page Application)

• Client Side Rendering(Client Side Navigation)방식
• 어플리케이션 생명주기중에서 한번만 리소스를 로딩하고, 그 후에는 데이터를 받아올 때에만 서버와 통신함
• 처음 요청시 딱 한번 페이지를 불러오고, 페이지를 이동 할 경우 기존 페이지 내부를 수정해서 보여주는 방식
• 필요한 부분만 갱신하기에 자연스러운 페이지 이동이 가능함
• React, Vue 등이 나오면서 대유행!

---

2. SSR (Server Side Rendering)

• 전통적인 웹 애플리케이션 방식
• 페이지를 이동할 때마다 새로운 페이지를 요청함
• 모든 템플릿은 서버 연산을 통하여 렌더링하고, 완성된 페이지 형태로 보여줌
• 웹에서 정보와 기능이 많아지면서 spa 개념이 생겼다고함.

2-1. MPA (Multiple Page Application)

• 프론트와 백이 강하게! 결합 돼있음
• AJAX로 부분적 새로고침을 통해 단점을 보완하는 듯 했으나... 아직 부족하다는 의견이 많았다고 한다

---

	👍장점	👎단점
SPA	- 자연스러운 화면 - 필요한 리소스만 부분적으로 로딩 가능 - 서버의 템플릿연산을 클라이언트로 분산 - 컴포넌트별로 개발이 용이 - 모바일앱 개발시 동일한 API 사용 가능	- JS파일을 한번에 받기 때문에 초기 구동속도 느림 (webpack의 code splitting으로 해결할 수 있다 함) - 검색엔진 최적화(SEO)가 어려움 -보안 문제점
SSR	- 검색엔진 최적화!!!!! (검색 로봇이 페이지를 크롤링하기에 매우 좋다고) - 뷰를 서버에서 렌더링하여 가져오므로 첫 로딩이 매우 짧음	- 화면이 깜빡임 - 페이지 이동 시 중복 템플릿도 계속 받아줘야 함 - 서버 렌더링에 따른 부하 - 모바일앱 개발 시 추가적인 백엔드 작업 요구

 

하나만 사용하는 것이 아니라, 각각의 장단점을 적절히 활용하여 섞어 쓰는 경우가 많다고!

위에도 말했듯이 React → Next.js, GatsbyJS / Vue → Nuxt.js 등의 라이브러리가

SPA에서 SEO를 할 수 있게 도와준다고 한다. 

 

근데 그래서 SEO가 뭔지에 대한 궁금증이 또 생겼다😭

 

SEO (Search Engine Optimization, 검색엔진 최적화)

웹 페이지 검색엔진이 자료를 수집하고, 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있도록 하는 작업! 멋진 사이트에 멋진 정보들이 가득해도 그게 검색했을 때 노출되지 않으면... 아무도 모르는.. 갈라파고스 사이트가 되기 때문에... 많이 보여야 많이 퍼지니까!