Frontent - SSR(ServerSideRendering) vs CSR(ClientSideRendering)

CSR ( Client Side Rendering)

CSR은 React,Vue 등의 SPA(Single Page Application)에서 쓰이는 기법이다.

서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내주고 클라이언트가 그것을 받아 렌더링을 합니다.

데이터를 제외한 모든 코드들은 index.js에 들어있습니다. 때문에 첫 화면 로딩시 번들 크기에 따라 로딩시간이 오래걸릴수도 있습니다. 

(code splitting 기능으로 어느정도 해결가능)

CSR은 이미 모든 페이지 코드들을 가져와있기때문에 클라이언트가 상호작용을한다면 데이터만 바꿔주면됩니다.

CSR의 단점은 초기 html에 데이터가 없어 검색 봇이 해당페이지를 빈페이지로 착각하여 SEO 검색엔진 최적화에 취약합니다.

 

CSR 작동 방식

1. 클라이언트 가 서버에 요청을 보낸다.
2. CDN에서 HTML 과 JS를 클라이언트로 보낸다.
3. 클라이언트는 HTML 과 JS를 다운로드 받는다.
4. 브라우저가 JS를 다운로드 받는다
5. JS가 다운로드 완료되어 데이터를 위한 API가 호출이 된다.
6. 서버로부터 API 호출 응답
7. API로부터 받아온 데이터를 렌더링해주며 여기서부터 클라이언트와 페이지 상호작용이 가능하게된다.

SSR (Server Side Rendering)

SSR은 CSR과 반대로 서버에서 렌더링을 진행한다.

클라이언트 요청시 서버에서 해당 페이지를 완전히 렌더링하여 HTML을 생성한 다음 클라이언트에게 전달합니다.
이후 클라이언트는 해당HTML을 받아 렌더링된 페이지를 보여줍니다.



SSR 작동방식

1. 유저가 웹사이트에 요청을 보낸다
2. 서버는 즉시 렌더링 가능한 HTML 파일을 만든다
3. HTML은 즉시 렌더링된다, 하지만 사이트 조작은 불가능하다
4. 브라우저가 JS를 다운로드 받는다
5. 다운로드 받는동안 유저는 컨텐츠를 볼수있지만 상호작용은 불가능하다 하지만 상호작용을 기억해둔다
6. 브라우저가 JS 프레임워크를 실행한다
7. JS까지 성공적으로 컴파일 되었기 때문에 기억하고있던 상호작용을 실행하며 이제부터 상호작용이 가능해진다.

두 방식의 차이점

1. 로딩시간

CSR - HTML,CSS, 모든 스크립트 들을 한번에 불러오기 때문에 초기 로딩속도가 느리다.

SSR - 필요한 부분의 HTML과 스크립트만 불러오기 때문에 CSR보다 평균적으로 빠르다

 

2. 페이지 이동 속도

CSR - 첫 로딩때 나머지 페이지들을 구성하는 요소들을 전부 받아왔기 때문에 페이지 이동간 렌더링 속도가 빠르다

SSR - 첫 페이지 로딩할때처럼 페이지 이동시 서버로부터 다시 HTML등을 받게된다 그래서 CSR 보단 느리다.

 

3. 검색 엔진 최적화

CSR - HTML 에 데이터가 없어 검색 봇이 해당 페이지를 빈페이지로 착각하여 SEO 에 취약하다

SSR -  서버에서 다 만들어진 HTML을 응답으로 받기때문에 검색엔진 SEO에 친화적이다.

 

사용 권장 예시

SSR

• 네트워크가 느릴 때 
  (CSR은 한번에 모든 것을 불러오지만 SSR은 각 페이지마다 나눠불러오기 때문)
• SEO(serach engine optimization : 검색 엔진 최적화)가 필요할 때.
• 최초 로딩이 빨라야하는 사이트를 개발 할 때
• 메인 스크립트가 크고 로딩이 매우 느릴 때CSR은 메인스크립트가 로딩이 끝나면 API로 데이터 요청을 보낸다. 하지만 SSR은 한번의 요청에 아예 렌더가 가능한 페이지가 돌아온다.
• 웹 사이트가 상호작용이 별로 없을 때.

CSR

• 네트워크가 빠를 때
• 서버의 성능이 좋지 않을 때
• 사용자에게 보여줘야 하는 데이터의 양이 많을 때.
  (로딩창을 띄울 수 있는 장점이 있다.)
• 메인 스크립트가 가벼울 때
• SEO 따윈 관심 없을 때
• 웹 어플리케이션에 사용자와 상호작용할 것들이 많을 때. (아예 렌더링 되지 않아서 사용자의 행동을 막는 것이 경험에 오히려 유리함.)