개발자 공고를 보다보면 자주 보는 문구들
"SSR에 대한 이해 및 처리 경험이 있는 분"
"SPA 프레임워크 사용에 능숙하신 분"
분명 프론트엔드 개발자 하려면 html, css, javascript 3대 언어만 알면 된다더니??!
React를 사용하려 보니 어쩌다가 NextJS까지 검색하게 되었고 거기서 또 등장하는 SSR / SPA.. 짚고 넘어가야겠다
SSR(Server Side Rendering)
서버 사이드 렌더링이란?
페이지를 이동할때마다 서버에 새로운 페이지에 대한 요청을 하는 방식.
사용할때마다 새로고침이 되고 받아오는동안 껌뻑껌뻑 거린다.
그렇기 때문에 페이지에 정보량이 많으면 로딩이 길어지고 느려지고 그러면 우리는 짜증이 나겠지?
그렇기 때문에 나오게 된게 CSR이다.
CSR(Client Side Rendering)
CSR을 보기전에 우선 SPA를 알아봐야 한다고 하니 SPA를 우선 알아보고 넘어가야겠다
SPA(Single Page Application)
SPA는 글자 그대로 한개의 페이지를 가진 어플리케이션이다.
최초 한번 페이지 전체를 로딩하고, 요청하는 컴포넌트들만 바꿔주게 되어 서버의 부담이 덜하다.
그러니까 SSR에서는 페이지 전체를 싸악 로딩하고 안에서 어떤 버튼(예를 들면 검색버튼이라던가, 로그인버튼 같은 이런저런 컴포넌트들)을 누르면 아예 싸그리 페이지 자체가 새로고침되면서 새로 로딩되는것이고,
SPA를 사용하게 되면 전체는 그대로 있으면서 그 부분만 다시 렌더링 되는 것이다.
전체가 싹다 새로고침되는거보다 요청하는 부분만 불러와지니깐 당연히 속도는 빨라지지!
대신에 처음에 모든 화면을 싹다 로딩해야 하니까 처음 로딩만 좀 시간이 걸린다.
대표적인 SPA 라이브러리가 React, Vue, Angular이다.
그렇다면 클라이언트 사이드 랜더링이란?
최초 요청 시 HTML, CSS, JavaScript 등 각종 리소스를 받아오고, 이후에 서버에 데이터만 요청하고 JavaScript로 View를 컨트롤 하는 기법이다.
그렇다고 CSR = SPA는 아니다!
SPA는 CSR의 방식으로 렌더링하는 것이다.
SEO (검색 엔진 최적화, Search Engine Optimization)
[요고는 나중에 알아보자..]
정리
SSR
- 서버에서 렌더링 하는 방식
- 초기 로딩 속도가 빠르다.
- 서버에 계속 요청해야 하므로 서버에 부담이 간다.
- SSR방식으로 SPA를 렌더링 하는 방법: Next.js(React), Nuxt.js(Vue), Universal(Angular), svelte(Sapper)을 사용하면 된다
- SEO(검색 엔진 최적화) 가능, SSR을 통해 얻을 수 있는 최고의 이점!
CSR
- 클라이언트 측에서 HTML을 반환하고, 작동하는 컴포넌트만 클라이언트에서 렌더링 하는 방식
- 처음 한번 HTML 전체를 로딩하고 컴포넌트들만 로딩하기 때문에 작업이 빠르다.
- 초기 로딩시 전체를 다 불러와야 하기때문에 초기 로딩이 느리다.
- SEO 문제가 있다. 하지만 CSR방식중 SPA에서는 서버 렌더링하는 SEO 대응 기술이 미지 존재하고 있다.
