CSR, SSR, SSG

언어 왔다 갔다하면서 공부하는데

csr, ssr관련으로 자꾸나와서 대충구분은 할 수있지만 명확하게 뭐가 다른지 궁금해서 적어두려고 한다

 

CSR

(클라이언트 사이드 렌더링) 대충 설명하면 클라이언트쪽에서 렌더링한다는것이다 자세히 설명하면

 

 

1. 유저가 파일 요청을 보낸다

2.cdn에서 파일을 준다

3. 다운로드받는다 (다운받으면 데이터 없는 껍데기가 보임)

4. js에 있는 api요청을 보낸다.

5. 서버에서 응답을 해준다.

6.이제 상호작용이 가능한 사이트가 된다.

 

 

js다운로드하고 실행이 끝나기 전까지 사용자는 페이지를 볼수없다

그리고 SPA(Single Page Application)에 주로 사용된다

핵심은 동적콘텐츠 로드, SPA라는것

 

장점 :

1.전체 페이지를 로드하지 않고 필요한 부분만 로드하기때문에 반응성이 높다

2. 필요한 데이터만 비동기로 받아오기때문에 네트워크 사용량이 효율적이다

3. 코드가 모듈화 되어 유지보수와 재사용성이 높다

4. 처음빼면 로딩이 빠름

5. 서버에 부담이 적음

 

 

단점 : 

1. SEO문제가 있다(자바스크립트가 실행돼야 데이터가 보이기때문)

2. js파일이 크면 다운시간동안 페이지가 작동이 안됨

3. 최초 로딩이 느림

 

 

SSR

이건 서버 사이드 렌더링이라고 하고 서버에서 렌더링 하는 방식이다

 

1. 클라이언트가 요청을 보낸다

2. 바로 렌더링 가능한 html먼저 보낸다

3. html은 바로 렌더링이 된다

4. js 다운받는다

5. 컨텐츠를 볼수 없지만 사용자의 조작을 기억해둔다

6. 브라우저가 js프레임워크를 실행한다

7. js까지 컴파일 됐으니 기억하고 있던 작업을 수행하고 웹페이지와 상호작용이 가능해진다

 

렌더링이 바로 됐기 때문에 js다운되는동안 화면을 보고 늦을수도있지만 상호작용도 가능하다

 

이거는 보통 MPA(Multi Page Application)이다

 

장점 : 

1. 첫페이지 로딩은 빠르다

2. SEO에 친화적이다

3. 보안이 좋다

단점 : 

1. 화면이 깜빡인다

2. 서버에 부하가 증가한다

3. js가 다 로딩돼야 상호작용이 가능해서 시간차이에 따른 불편함이 생긴다

 

SSG

 

Static Site Generation 이라고 하며 웹페이지의 콘텐츠를 미리 생성하여 정적파일로 저장한후 클라이언트에 제공하는 방식이다

서버사이드는 요청하면 만들어주지만 이건 미리 만들어둔다

장점 :

1. 로딩속도가 빠르다

2. SEO 친화적이다

3. 안정성이 좋다

4. 보안이 좋다

 

단점 : 

1. 동적컨텐츠를 처리하는데 제한이 있다

2. 콘텐츠가 자주 변경되면 빌드를 자주해야해서 안좋다

 

 

결국엔 상황보고서 알아서 잘 써야한다는것이다 

CSR의 문제점을 보완할 몇개의 방법이 있는거 같아서 큰 프로젝트 안할것같은 나는 csr으로 자주 만들지 않을까 싶다