👩🏻‍💻 SSR, CSR? SPA?

SSR로 되어있던 프로젝트를 CSR로 렌더링 하는 방식으로 전환하는 작업을 하고 있다.
그래서 SPA로 개발을 하게 되었는데 개발하기 전에 용어를 정확히 알고 가자!

📌 SSR vs CSR

• SEO
• 초기요청 속도
• 초기요청 이후 페이지 전환 속도

SSR(Server Side Rendering)

이전 회사에서도 그렇고 대부분의 프로젝트가 SSR로 되어 있었다.

서버에서 렌더링을 마치고 Date 받아와 HTML을 내려주기에 CSR보다는 페이지를 초기구성은 CSR보다는 빠르지만 페이지 전환하는 속도는 느리고 새로운 걸 받아올 때마다 화면이 깜빡거리는 현상도 나타난다. 하지만 최대 장점은 SEO이다.
그래서 SSR은 검색로봇이 페이지를 크롤링하기에 매우 적합하다.

CSR(Client Side Rendering)

CSR은 SSR렌더링 방식보단 초기구성은 느리지만 페이지 전환에는 빠르다.
최초로 로딩할 때 데이터는 아무것도 없는 문서와 여러 Static파일들이 로드된 이후에 한번 페이지를 요청해서 받아오기 때문이다.

📌 SPA(Single Page Application)

SPA와 CSR이 같은게 아닙니다.
SPA는 단 한번만 리소스를 로딩하고 그 이후에는 데이터를 받아올 때만 서버와 통신한다. 필요한 부분만 갱신하기에 네이티브 앱에 가까운 자연스러운 페이지이동을 제공할 수 있다.
여기서 SPA는 처음에만 페이지를 받아오는 것이고 동적으로 데이터를 조회하여 렌더링하는 방식이 CSR이다.

SPA에서 SSR

MPA에는 CSR을 하지 못하지만 SPA에서 처음 로드하는 페이지만 SSR을 하고 그 이후에는 CSR을 하면 SPA가 여전히 유지가 된다.
CSR에서 SPA를 구성하면 최대 장점이 SEO이다. SSR의 제일 큰 장점이 SEO가 뛰어나다는 점이기에 적절히 사용하면 문제점들을 보안할 수 있다.
그래서 Node.js 기반의 SSR을 선택하거나 Next.js를 사용하게 된다.