[ React ] SSR ( 서버사이드렌더링 ) & CSR ( 클라이언트사이드렌더링 )

 

SSR과 CSR에 대한 개념과

React에서 어떻게 SSR 환경을 구축하고 사용할 수 있을지 궁금해서

오랜만에 포스팅 해보려고 한다.

 

 

 

 

 

SSR 이란 ? 

SSR은 Server Side Rendering 약자로 처음 클라이언트가 접속했을때 

브라우저에서 자바스크립트 코드를 다운 받아 해석 할 때 까지 기다리지 않고

서버에 보여질 HTML을 미리 준비해 클라이언트한테 응답해주는 방식이다.

사용자가 웹 페이지에 접속했을 때 서버에서는 사용자에게 렌더링될

HTML 파일을 응답하여 사용자에게 웹 페이지가 바로 렌더링 될 수 있도록 해준다.

그 후 브라우저는 자바스크립트 파일을 다운받아 해석하고 실행하는 절차를 가진다.

 

--> 사용자는 브라우저가 자바스크립트 파일을 해석하고 보여질때까지 기다리지 않고

      바로 렌더링 하기 때문에 사용자에게는 좋은 경험을 줄 수 있다.

 

 

SSR 장점 👍🏻 1. 렌더링 속도가 향상됨에 따라서 사용자가 웹 페이지에 접속했을 때 바로 볼 수 있다. 2. SEO 최적화가 쉽다.   SSR 단점 👎🏻 1. 서버 부하가 비교적 CSR보다 많다. 2. 페이지 이동할때마다 흰 화면이 보인다. (.... ? 최악의 단점이네.. )

 

 

 

CSR 이란 ? 

CSR은 Client Side Rendering 약자로 자바스크립트 파일을

브라우저에서 해석해 렌더링하는 방식이다.

클라이언트가 자바스크립트 파일을 브라우저에서 해석한 후

HTML을 렌더링한다.

 

--> 사용자가 기다려야하는 시간이 많아진다.

 

 

 

CSR 장점 👍🏻 1. 컴포넌트 정의와 재사용이 쉽다. 2. 사용자에게 부드러운 UX를 줄 수 있다. 3. 페이지 구성에 필요한 데이터만 요청하고 사용해서 서버 부하가 줄어든다.   CSR 단점 👎🏻 1. 초기에 자바스크립트 파일을 받고 실행하는 시간이 오래 걸려 유저의 페이지 이탈 가능성이 있다. 2. SEO 최적화가 쉽지 않다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

참고 )

https://velog.io/@jeff0720/Next.js-%EA%B0%9C%EB%85%90-%EC%9D%B4%ED%95%B4-%EB%B6%80%ED%84%B0-%EC%8B%A4%EC%8A%B5%EA%B9%8C%EC%A7%80-%ED%95%B4%EB%B3%B4%EB%8A%94-SSR-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%B6%95