[React] 렌더링 방식 CSR, SSR, SSG & CSS-in-JS의 장점과 단점

Q. 질문 1

웹 페이지 렌더링 방식 CSR, SSR, SSG 각각의 특징과 각 방식을 어떤 상황에 사용하면 좋을지 설명해 주세요.

 (코드잇 스프린트 위클리 페이퍼 #8)

A. 렌더링 방식 - CSR, SSR, SSG

웹 페이지 렌더링 방식에는 CSR, SSR, SSG 가 있다.

 

1. CSR - 클라이언트 사이드 렌더링

1-1. 특징

먼저 CSR 은 클라이언트에서 렌더링을 하는 방식이다.

 

사용자가 웹사이트에 접속을 하면 브라우저는 서버에 요청을 하여 빈 HTML 과 연결된 JavaScript 를 브라우저에게 주게 된다.

그러면 브라우저에서는 JavaScript 를 사용하여 동적 DoM 을 생성해 사용자에게 화면을 보여준다.

 

일반적으로 React 와 같은 프레임워크를 사용하여 개발이 된다.

 

1-2. 적합한 상황

동적 DoM 을 사용하기 때문에 원하는 내용만 업데이트 할 수 있어 사용자 경험을 우선시 하는 웹사이트에 적합하다.

 

 

2. SSR - 서버 사이드 렌더링

2-1. 특징

SSR 은 서버에서 렌더링 하는 방식이다.

 

사용자가 웹사이트에 접속을 하면 브라우저는 서버에게 콘텐츠 요청을 하여 렌더링 준비를 마친 HTML 과 JavaScropt 를 브라우저에게 주게 된다.

그러면 브라우저는 리소스들을 직접 어떻게 보여질지 해석을 하고 렌더링하여 사용자에게 화면을 보여준다.

 

그래서 초기 페이지 로드 시에 완전한 콘텐츠가 표시되어 SEO에 유리하다.

 

2-2. 적합한 상황

SEO 가 중요한 경우에 적합하다.

 

 

SSG - 정적 사이트 생성

3-1. 특징

SSG 는 미리 파일을 만들어 서버에 배포하는 방식이다.

 

빌드 시점에 모든 페이지를 렌더링하여 정적 파일로 생성을 하고, 클라이언트에서 요청할 경우 이미 완성된 파일을 브라우저에게 보여준다.

 

3-2. 적합한 상황

콘텐츠가 자주 변경되지 않는 경우와 서버 비용을 줄이고 싶은 경우 적합하다.

 

Q. 질문 2

본인이 생각하는 CSS-in-JS의 장점과 단점을 설명해 주세요

 (코드잇 스프린트 위클리 페이퍼 #8)

 

A. CSS-in-JS 장단점

장점

1. JavaScript 를 사용할 수 있기 때문에 조건에 따라 동적으로 스타일을 설정할 수 있다.
2. 일반 CSS 와 다르게 변수명 짓는 것이 간편하다.

 

단점

1. 초기 로딩 시간이 길다.
2. Styled components 같은 경우, 컴포넌트와 스타일컴포넌트가 구분되지 않는다.