React SSR, CSR 알아보기

SPA(Single Page Application)

서버에서 제공하는 페이지 하나(Single Page)이고, 외관상 페이지를 이동하는 것처럼 보여도 HTML 페이지 자체를 교체하는 것이 아니라 내부의 바뀐 데이터만을 교체한다. 이로써 부분적으로 업데이트하면서 훨씬 사용성이 향상된다. 

그리고 사용자들의 PC 성능이 향상되면서 클라이언트단에서 많은 데이터와 동적 화면 변화를 처리할 수 있게 된다.

이를 활용해 CSR(Client Side Rendering)로 화면을 처리할 수 있게 된다.

 

 

App.js 👉 index.html

CRA 커맨드를 통해 리액트 프로젝트를 생성하다보면 기본적으로 index.html 안에 App.js가 렌더링되는 구조를 볼 수 있다.

CSR 단점

1. 초기 렌더링이 느림

하지만 초기에 많은 양의 소스 코드를 가져와야한다는 점에서 초기 렌더링이 느리다.

2. 낮은 SEO(Search Engine Optimism)

검색 엔진들은 웹사이트의 HTML을 분석해서 타이틀 등 여러 요소들을 파악해 연관성을 파악한다.

하지만 CSR에서 사용되는 HTML body는 대부분 비어져 있기 때문에 분석하는 데 성능이 좋지는 않다.

이러한 문제를 해결하기 위해 SSR(Server Side Rendering)이 등장한다.

 

 

 

SSR 단점

1. 깜박임 이슈 존재

전체적인 웹사이트를 서버로부터 다시 받아오는 것이기 때문에 사용성이 저하된다.

2. 서버 과부하

사용자가 많을수록 서버에 부하가 심해진다.

3. TTV(Time To View) != TTI(Time To Interact)

정적인 코드는 먼저 클라이언트에 도착하나, 동적으로 데이터를 처리하는 자바스크립트 코드는 도착하기까지 약간의 지연이 발생한다.

이로 인해 보이나 반응이 없는 경우가 발생할 수 있다.

즉 SSR의 경우에는 TTV가 TTI보다 짧기 때문이다.

 

꼭 둘 중 하나만을 고집하기 보다는 SSG(STatic Site Generation)도 존재한다.

 

1. Gatsby

예를 들어 React는 CSR에 특화된 라이브러리이지만, Gatsby로 만든 라이브러리를 같이 사용할 경우 리액트로 만든 웹애플리케이션을 정적으로 웹페이지를 생성을 미리 해둔 다음 서버에 배포할 수 있다.

그리고 추가적으로 데이터를 받아오거나 동적으로 처리해야하는 로직이 있다면 자바스크립트 파일을 같이 가질 수 있다.

 

2. Next.js

Next.js는 원래 강력한 서버 사이드 렌더링을 지원하는 라이브러리이다.

요즘에는 CSR과 SSR를 잘 믹스해서 목적에 알맞게 강력하면서 유연한 웹사이트를 제공한다.

 

유용한 Naver D2 참고 자료

https://d2.naver.com/helloworld/7804182