| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 | 31 |
- 레이아웃쪼개기
- 리액트
- React.js
- 개발콘텐츠
- JS console
- TSDoc
- react
- 커스텀
- javascript
- 반복줄이기
- 타입스크립트
- reactjs
- 누구나 자료구조와 알고리즘
- 티스토리꾸미기
- utilty type
- typescript
- 제네릭
- 공통컴포넌트
- NonNullable
- const 단언문
- 성능최적화
- returnType
- CSS
- React Native
- 2022
- 타입좁히기
- Chart.js
- vue.js
- click and drag
- 폰트적용하기
- Today
- Total
몽땅뚝딱 개발자
SSR vs CSR vs SSG vs ISR 본문
◽️ 렌더링이란?
서버로부터 요청해서 받은 내용을 브라우저 화면에 표시해주는 것이다.
SSR과 CSR의 차이점은 표시해 줄 화면을 어디서, 어떻게 그리냐의 차이이다.
◽️ 클라이언트 사이드 렌더링(CSR, Client Side Rendering)
페이지의 내용을 브라우저에서 표현한다.
SPA 트렌드와 CPU의 성능 상승과 함께 본격적으로 시작되었다. CSR은 클라이언트에서 모두 처리하는 것으로, 서버에서 전체 페이지를 한번 렌더링하여 보여주고 사용자가 요청할때 마다 리소스를 서버에서 제공받아 클라이언트가 해석하고 렌더링 하는 방식이다.
<body>
<div id="root"></div>
<script src="app.js"></script>
</body>이렇게 body 안이 텅텅비어있어 처음 접속하게되면 빈 화면만 보이게되고 링크된 자바스크립트를 다운로드 받아서 동적으로 화면을 구성하여 최종적인 화면을 보여준다. 그래서 SEO에 불리하다/
◽️ 서버 사이드 렌더링(SSR, Server Side Rendering)
서버에서 페이지의 내용을 다 그려 브라우저로 던져준다.
웹 사이트를 접속하면 서버에서 필요한 데이터를 모두 가져와 HTML 파일을 만들며, 만들어진 HTML과 HTML 파일을 동적으로 제어할 수 있는 소스코드와 함께 클라이언트에게 보낸다.
[장점]
그래서 페이지 로딩이 빨라지며 CSR과 달리 모든 컨텐츠가 HTML에 담겨있기때문에 효율적인 SEO가 가능하다.
[단점]
1) Blinking Issue: 새로고침 시 전체 웹사이트를 다시 서버에서 받아와야하기떄문에 화면이 없어졌다가 나타난다. UX관점에서 좋지않다.
2) 서버 과부하: 사용자가 많은 제품일수록 서버에 데이터를 요청하는 횟수가 많아져 과부하가 걸리기 쉽다.
3) TTV(Time To View)와 TVI(Time To Interact)의 공백시간 이슈
처음에는 서버에서 만든 HTML만 가져오기때문에 자바스크립트를 다운로드 받은 후에야 사용자가 원하는 것을 처리할 수 있는 인터렉션이 가능해져 사용자가 사이트를 볼 수 있는 시간과 실제 인터렉션이 가능한 시간의 공백이 꽤 길다는 단점이 존재한다.
◽️ 정적 사이트 생성(SSG, Static-Site-Generation 또는 Server-Side-Generation)
정적 문서로 충분한 화면이면서 빠른 HTML 문서 반환이 필요할 때 사용한다.
빌드 타임에 pages 폴더에서 작성한 각 페이지들에 대해 각각의 문서를 생성하여 static한 파일로 생성하는 방식이다.
◽️ ISR, Incremental Static Regeneration
revalidate 옵션을 사용하여 해당 페이지로 어느 사용자가 진입한 이후 N초 후에 해당 페이지에 대해서 정적생성을 진행한다는 의미이다.
처음엔 어느 사용자가 들어오더라도 미리 생성해두었던 페이지를 제공하지만 일정 시간이 지나면 NextJS 백그라운드에서 해당 페이지의 업데이트가 이루어지고 이 업데이트가 완료되면 앞으로 새롭게 만들어진 페이지를 사용자에게 제공해준다.
◽️ SSR와 SSG는 언제 사용하면 좋을까?
[SSG]
1) 퍼포먼스에 집중해야 할 때 (CDN을 통해 더 빠른 응답이 가능)
2) 마케딩 페이지, 블로그 게시물, 제품의 목록 등과 같이 정적으로 생성하여 각 요청에 동일한 문제를 반환할 수 있는 경우
[SSR]
1) 각 요청에 응답해야 할 내용이 시시각각 변하여 항상 최신 상태를 유지해야하는 경우
2) 제품의 상세 페이지, 분석 차트 등 요청 마다 다른 내용 또는 다른 형식의 HTML 문서가 반환되는 경우
◽️ 그럼 CSR은 안쓰나요?
SSG가 SCR을 대체하는 개념이 아니며, CSR 방식은 SPA의 기본 전제이다.
◽️ 클라이언트에서 SSR을 할 수 있을까?
1) Gatsby
React는 CSR에 최적화되어있는 라이브러리이지만 Gatsby라는 라이브러리와 함께 사용하면 리액트로 만든 웹어플리케이션을 정적으로 웹페이지를 미리 생성해두고 서버에 배포할 수 있다. 정적으로 보이지만 자바스크립트 파일을 함께 가지고있을 수 있어 동적인 요소도 충분히 추가할 수 있다.
2) Next.JS
SSR을 지원하는 라이브러리였는데 요즘에는 SSG도 지원하고 CSR+SSR을 섞어 더 강력하게 사용할 수 있다.
프리렌더링(pre-rendering) 기능을 제공한다. 사전에 미리 HTML을 렌더링 하는 것이다.
SSR: getServerSideProps
SSG: getStaticProps, getStaticPaths
을 사용하여 간단하게 구현할 수 있다.
출처
[React] 서버 사이드 렌더링(SSR) / 클라이언트 사이드 렌더링(CSR)이란?
[FE] SSR(Server-Side-Rendering) 그리고 SSG(Static-Site-Generation) (feat. NEXT를 중심으로)
'Development > 성능최적화' 카테고리의 다른 글
| @font-face와 성능최적화 (0) | 2023.12.15 |
|---|---|
| [성능최적화] 블록 차단 리소스 / media 속성 / defer & async (0) | 2023.05.02 |
| 성능 최적화하기 - (16) memoization 적용 (0) | 2022.06.21 |
| 성능 최적화하기 - (14) 이미지 Preload (0) | 2022.06.14 |
| 성능 최적화하기 - (13) Layout Shift (0) | 2022.06.13 |