이번 포스팅에서는 SPA기반 SSR의 개념과 동작 원리, 구현 방법을 다룹니다. 이런 개념과 동작 원리, 구현 방법을 상세히 알지 못하고 SSR프레임워크를 사용시 구현과 버그 대응에 어려움을 겪을 수 있습니다. 이를 공부함으로써 SPA기반 SSR앱을 구현 시, 자신감 있게 구현할 수 있습니다!!
SSR ( Server-side Rendering )이란?
말그대로 서버에서 렌더링을 합니다.
과정
1. 최초 요청 시, 서버에서 사용자에게 렌더링할 준비가 된 full HTML파일을 보내준다.
서버가 이미 렌더링 할 준비가 된 full HTML을 응답하기 때문에 사용자는 이때부터 아래와 같은 의미있는 (Contentful)컨텐츠를 볼 수 있습니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test-ssr</title>
<style data-styled="true" data-styled-version="5.2.1">
.gEplBc {
background-color: #aaaaaa;
border: 1px solid blue;
}
/*!sc*/
data-styled.g1[id="App__Container-atnr6o-0"] {
content: "gEplBc,"
}
/*!sc*/
</style>
</head>
<body>
<div id="root">
<div class="App__Container-atnr6o-0 gEplBc">
<button data-page="home">Home</button>
<button data-page="about">About</button>
<div>
<h3>This is about page</h3>
</div>
</div>
</div>
<script src="/dist/main.23427ea2a2813f223cb6.js"></script>
</body>
</html>2. 필요한 자원(JS, CSS...) 등을 다운로드 합니다.
3. 브라우저에서 리액트를 실행한다. 이 과정에서 최초 요청 시, 서버에서 사용자로부터 응답한 HTML파일의 요소들을 리액트가 흡수(hydration)하여 리액트의 Shadow DOM을 만들어 냅니다.
4. 위 과정이 모두 끝나면 유저는 컨텐츠를 볼 수 있을 뿐만 아니라, 인터랙티브하게 사용할 수 있습니다.
CSR ( Client-side Rendering) 이란?
과정
1. 최초 요청 시, 서버에서 사용자에게 아래와같은 빈 HTML파일을 보내줍니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="icon" href="/favicon.ico"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<meta name="theme-color" content="#000000"/>
<meta name="description" content="Creatrip admin site"/>
<link rel="apple-touch-icon" href="/logo192.png"/>
<link href="https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700&display=swap&subset=korean" rel="stylesheet"/>
<title>Admin | Creatrip</title>
<link href="/static/css/2.101d5f7a.chunk.css" rel="stylesheet">
<link href="/static/css/main.6b8af435.chunk.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!-- ... -->
<script src="/static/js/2.57f617cf.chunk.js"></script>
<script src="/static/js/main.84842dc5.chunk.js"></script>
</body>
</html>2. 필요한 자원(JS, CSS...)등을 다운로드 한다.
3. 브라우저에서 리액트를 실행한다. 이떄, 리액트는 빈 HTML문서를 채워넣을 DOM요소를 만들어내 채운다.
4. 위 과정이 모두 끝나면 유저는 컨텐츠를 볼 수 있고, 인터랙티브하게 사용할 수 있습니다.
SSR vs CSR 성능 비교
- SSR은 Contentful HTML을 최초 응답으로 보내고, CSR은 비어있는 HTML을 최초응답으로 보내기 때문에 FCP는 SSR이 우세합니다.
- SSR은 최초 응답까지 서버 사이드에서 렌더링하는 시간이 소요되고, CSR은 정적 파일(HTML, CSS, JS등)을 바로 응답하기 때문에 TTFB는 CSR이 우세합니다.
- TTI는 상황에 따라 달라집니다. SSR은 hydration과정에서 부하가 일어나 Interactive해지는 시점이 늦춰질 수 있습니다. CSR또한 컨텐츠를 위한 데이터 패칭등의 병목으로 인해 Interacitve해지는 시점이 늦춰질 수 있습니다.
'React > ReactJs' 카테고리의 다른 글
| SPA기반 SSR구현하기 - 3 (0) | 2022.02.20 |
|---|---|
| SPA기반 SSR 구현하기 - 2 (0) | 2022.02.19 |
| React - Code-spliting, Lazy Reloading (0) | 2022.02.19 |
| Webpack을 통한 React개발환경 구축하기 (0) | 2022.02.19 |
| useMemo, useCallback, ( React.memo ) (0) | 2022.02.18 |