Skip to content

클라이언트사이드와 서버사이드 렌더링

서버 라우팅의 경우 페이지를 전환할 떄 마다 서버로 요청하고 서버에서 렌더링하는 반면, 클라이언트 라우팅은 페이지를 클라이언트에서 처리하고 필요한 부분만 업데이트해요.

CSR 과 SSR 비교

클라이언트 사이드 렌더링서버 사이드 렌더링
클라이언트 측에서 페이지를 랜더링하는 방식을 말해요. CSR은 서버로부터 받아온 데이터를 클라이언트에서 JavaScript를 통해 동적으로 조작하여 렌더링 해요.서버 측에서 페이지를 렌더링하는 방식이애요. 서버에서 페이지를 렌더링한 후에, 클라이언트에게 전달되며, 클라이언트에서는 추가적인 JS로딩이 필요하지 않아요.
장점
1. 높은 사용자 경험:
CSR은 클라이언트 측에서 데이터를 받아와 렌더링하기 때문에 페이지 이동 속도가 빠르고, 새로고침이 발생하지 않아 사용자 경험이 높아요

2. 캐싱가능:
클라이언트에서 캐시를 사용하여 적은 양의 데이터만 다시 용청하여 처리하는 것이 가능해요

3. 적은 서버 부하:
CSR에서는 클라이언트에서 데이터를 처리하기 때문에 서버 부하가 적어요
장점
1. 최초 페이지 진입이 비교적 빨라요

2. 검색 엔진과 SNS 공유 등 메타데이터 제공에 유리해요

3. 누적 레이아웃 이동이 적어요

4. 사용자의 디바이스 성능에 비교적 자유로워요

5. 보안에 안전해요
단점
1. 초기 로딩 속도가 느린편이에요

2. SEO에 불리해요

3. 낮은 보안성을 가지고있어요
단점
1. 소스코드를 작성할 때 항상 서버를 고려해야해요.

2. 적절한 서버가 구축되어 있어야 해요.

3. 서비스 지연에 따른 문제: 렌더링 작업이 끝나기까지는 사용자에게 그 어떤 정보도 제공할 수 없어요

서버 측 렌더링에는 장점들이 많이 있지만 언제나 선택해야하는 최적의 상황은 아니에요. SSR은 SEO를 개선시키고 진입이 빨라 사용자 경험이 높지만 모든 요청마다 렌더링해야하므로 서버 부하가 올 수 있어요.
그러므로 클라이언트 측 렌더링과 더불어 각각 상황에 맞게 개발하는 것이 필요해요.