티스토리 뷰
1️⃣ Server Side Rendering 소개
▶ Server Rendering , Client Side Rendering, Server Side Rendering
Server Rendering
- React, Vue, Angular 등 자바스크립트 프레임워크가 나오기 이전 초기 웹 환경에서는 모든 페이지를 서버에서 빌드했다.
- 클라이언트는 별도의 처리 없이 웹페이지 노출한다.
Client Side Rendering
- Ajax 등의 기술, 자바스크립트 프레임워크를 활용하여 데이터를 받아 자바스크립트로 페이지를 동적으로 만들 수 있게 되었다.
- 데이터는 XML, JSON 형태로 클라이언트에 전송된다.
장점
- CSR은 자바스크립트만으로 완전히 페이지를 만들 수 있다.
- 자바스크립트를 최대한도로 활용하여 HTML, CSS를 동적으로 생성한다.
- 컴포넌트 단위로 코드를 나누고, 다양한 디자인 패턴을 적용하는 등 클라이언트 개발의 수준을 한 단계 끌어올린다.
- Full page load 없이 라우팅이 가능하다.
단점
- 자바스크립트 코드가 많으면 앱 로딩이 느려진다.
- SEO가 좋지 않다.
Server Side Rendering
- 서버에서 자바스크립트를 이용해 페이지를 미리 빌드한다.
- 컴포넌트 생성에 필요한 API 요청, routing, redux store 생성 등을 처리한다.
- 클라이언트는 빌드된 페이지와 자바스크립트를 받아 웹앱을 CSR처럼 동작하게 한다. (hydration)
- 이런 특징으로 Universal Rendering이라고도 한다.
장점
- Crawler는 페이지를 Indexing 하기 위해 페이지에 관한 많은 정보가 필요하다. SSR을 활용하여 미리 페이지를 빌드하면 Crawler에게 많은 정보를 줄 수 있다. 즉, SEO(Search Engine Optimization)에 유리하다.
단점
- CSR에 비해 TTFB에 불리하다.
- 별도의 서버를 유지하는 비용이 든다.
- Static rendering보다 CDN Caching에 불리하다.
2️⃣ 성능 측정 키 메트릭
웹 퍼포먼스
- 웹 페이지가 로드되고 유저와 상호작용하는 모든 것들을 측정한다.
- 성능을 측정하여 웹앱의 사용성을 개선할 수 있다.
- 열악한 네트워크 환경에서도 사용 가능한 앱을 만드는 등 좋은 유저 경험으로 유저의 만족을 얻을 수 있다.
▶ Time To First Byte (TTFB)
: 페이지 요청 후 처음 데이터가 도착하기까지 걸리는 시간
- 요청을 받았을 때, 서버에서 처리하는 시간이 오래 걸리거나 네트워크가 딜레이되는 등의 상황 발생 시 지표가 악화된다.
▶ First Contentful Paint (FCP)
: 페이지에 진입하고부터 브라우저가 어떤 DOM Content를 만들 때까지 걸리는 시간 (어떤 요소 하나라도 보이는데 걸리는 시간)
- 페이지 진입 후 FCP까지 평균 3초 이상 걸리면 성능 개선이 필요하다.
▶ Time to Interactive (TTI)
: 웹페이지 진입 후 유저가 클릭, 스크릭, 인풋 등의 행위를 하기까지 걸리는 시간
- 즉, 자바스크립트가 로드되고 나서 이벤트 핸들러 등이 부착되어 입력을 처리할 수 있기까지의 시간이다.
3️⃣ Server Side Rendering 이해
▶ CSR의 페이지 로드 방식
▶ SSR의 페이지 로드 방식
- 유저가 빠르게 페이지의 내용을 볼 수 있도록 HTML을 미리 빌드하여 FCP 등의 키 메트릭을 개선한다.
- 서버 자원을 활용하여 초기 큰 성능이 필요한 페이지 등을 빌드하는데 활용된다.
4️⃣ React를 활용한 Server Side Rendering
▶ ReactDOMServer
- ReactDOMServer를 활용하여 특정 React Component를 가상의 DOM에서 HTML로 빌드한다.
- Node.js 서버에서 JSX를 사용하여 페이지 빌드할 수 있다.
▶ ReactDOMServer.renderToString()
: React Component를 HTML로 변환한다.
- 클라이언트의 페이지 요청 시 변환된 HTML string을 전달할 수 있다.
- 한꺼번에 모든 페이지를 만들어서 리턴한다.
💡 ReactDomServer.renderToNodeStream()
- readable stream을 생성한다.
- 브라우저가 받아서 점진적으로 페이지를 그린다.
▶ ReactDOM.hydrate()
: renderToString으로 생성한 HTML의 root을 기준으로 받아온 React code를 통해 markup에 이벤트 핸들러를 등록하는 등 컴포넌트화한다.
(ReatDOM은 브라우저(client side)에서 동작하는 객체)
💡 Hydration 시 주의할 점
1) 서버에서 생성한 컴포넌트와 브라우저에서 Hydration을 거친 후의 마크업이 다르면, React runtime은 경고를 보낸다.
ex) 현재 시간을 보여주는 컴포넌트
→ 경고 발생 시, 어느 부분에서 차이점이 생기는지 반드시 파악해야 한다.
2) componentDidMount 역할을 하는 useEffect의 경우, SSR 시 서버에서 동작하지 않는다.
→ data loading 등의 처리를 별도로 해주어야 할 필요가 있다.
이 글은 엘리스의 AI트랙 5기 강의를 들으며 정리한 내용입니다.
'개발공부 > 🟦 React.js' 카테고리의 다른 글
| [React] JSX 작동 원리 (0) | 2023.02.17 |
|---|---|
| [React] React 앱 빌드와 배포 (0) | 2023.02.16 |
| [React] React 테스팅 (0) | 2023.02.15 |
| [React] class와 hooks 비교하기 (0) | 2023.02.14 |
| [React] 상태 관리에 사용되는 Hooks (0) | 2022.08.19 |
프론트엔드 개발자 삐롱히의 개발 & 공부 기록 블로그