CSR과 SSR은 요즘 Front-end단에서 뜨거운 감자 같은 존재인거같습니다.
CSR과 SSR중 어떤걸 사용하느냐?에 대한 유무에 대해서 크게 와닿은 경험은 없었지만
왜 SSR을 쓰고 왜 CSR을 사용하는지 궁금해졌습니다.
CSR (Client Side Rendering)
쉽게 말해 서버에서 코드를 클라이언트(Front)으로 보내주면 클라이언트 단에서
코드를 렌더링하여 보여주는 방식입니다.
SSR (Server Side Rendering)
서버에서 코드를 렌더링 다해서 클라이언트딴으로 바로 보내주는 것입니다. 즉
서버에서 렌더링을 다해서 클라이언트딴에서는 보여주는 역할만 하게 해주는 방식입니다.
우선 저는 Front-end단 기술 스택으로 흔히 많이 쓰는 React를 사용했습니다.
React는 CSR을 사용합니다.
따라서 React로 예를 들어서 이번 문서를 기술하겠습니다.
<div id="root"></div>React는 root 라는 태그부분은 서버로 부터 받아온 코드를 전체를 렌더링하여 해당 url마다
렌더링된 코드들을 보여주는 방식입니다.
이 부분에서 장점과 단점을 이야기 할 수 있습니다.
장점: /index라는 url에서 A data를 보여주고 '다음'이라는 버튼을 눌러서
B Data를 보여줘야 한다고 할때 SSR의 경우에는 이미 보여준 A data 또한 다시 받아와서 렌더링 해야하지만 CSR의 경우에는 A data는 이미 렌더링 했음으로 B data에 대한 렌더링만 해서 보여줄 수 있습니다.
따라서 이는 속도면에서 향상되어 보여집니다.
그러면 SSR을 버리고 CSR을 쓰면 되지 않을까? 라는 생각을 했습니다.
그러나 CSR만 사용하기에는 Risk가 존재합니다.
-
root id를 가진 태그에 데이터를 렌더링해서 routing이 되기때문에 아무래도 initlization 느려다는 점이 있습니다.
-
SEO(search engine optimization) 검색엔진최적화라고도 하는데 이부분에서 이슈가 있을 수 있다 그 이유로는, 서버에서 태그를 받아서 js를 만나 렌더링을 해야하는데 js를 만나 렌더링이 되기 전까지는 blank파일(빈파일)이기때문에 빈파일이라서 검색 엔진 봇들이 무시하고 넘어갈 수 있는 이슈가 있을 수 있기 때문입니다.
이러한 이슈들로 인해서 여전히 SSR을 사용하는데 CSR과 SSR을 모두 사용할 수 있도록 설계된 라이브러리가
'NestJS'입니다.
https://nestjs.com/
NestJs는 초기 파일이 렌더링 될때는 SSR을 쓰고 그 이유에는 CSR을 쓴다고 나와있습니다.
이러한 라이브러리를 잘 참고하여 사용하면 더 좋은 코드를 만들어 낼 수 있지 않을까 생각해본 시간이였습니다.
해당 내용에 오류가 있다면 언제든 피드백 주세요!
감사합니다!
