[이론] CSR과 SSR🐱

CSR(Client Side Rendering)

CSR이란?

클라이언트 사이드 렌더링은 웹 애플리케이션의 렌더링을 클라이언트 측, 즉 웹 브라우저에서 처리하는 방식이다.

CSR의 장점

• 새로고침이 없어 사용자 경험이 향상된다.
• 애플리케이션의 반응성이 높아진다.
• 웹 애플리케이션의 기능을 완전히 클라이언트 측에서 관리할 수 있다.

CSR의 단점

• 초기 로딩 속도의 지연 : JavaScript 파일을 다운로드하고 해석하는 시간이 필요
• 검색 엔진 최적화 어려움 : 초기 HTML에는 콘텐츠가 포함되지 않고, 검색 엔진이 콘텐츠를 인식하기 어렵기 때문

SSR(Server Side Rendering)

SSR이란?

서버 사이드 렌더링은 웹 애플리케이션의 렌더링을 서버에서 처리하는 방식이다.

SSR의 장점

• SSR의 장점은 검색 엔진 최적화(SEO)가 용이하다
• 초기 로딩 시간이 빠르다
• JavaScript가 비활성화된 환경에서도 애플리케이션이 동작한다.

SSR의 단점

• 서버 부하 증가 : 서버에서 매번 페이지를 렌더링하고 HTML을 생성하여 클라이언트에게 제공해야하기 때문
• 클라이언트 측 상태 관리의 어려움 : 초기 상태를 서버에서 생성하므로 클라이언트 측에서 상태를 관리하기 어려울 수 있다

느낀점😸

React를 사용하면서 CSR을 많이 구현해봤다. 아직 실제 웹서비스를 운영해본 적이 없어서 SEO의 단점을 직접적으로 느껴보지는 못했다. 오히려 장점들은 직접적으로 잘 느껴졌다. 또한 한번 Next를 사용하여 SSR을 구현한적 있다. CSR -> SSR로 변환하는 식으로 코딩을 했는데 초기로딩에서 차이점을 느낄수 있었다.