62 :: SSR, 페이지 로드 방식, React 앱 배포

엘리스 SW 엔지니어 트랙 62일차

온라인 강의날

 

 

SSR

Server Side Rendering

 

CSR의 한계를 SSR로 함께 처리 가능

(CSR 한계: SEO, 페이지 로딩)

 

서버에서 자바스크립트 이용해서 페이지 미리 빌드

API 요청, routing, redux store 생성 등 처리

 

클라이언트는 빌드된 페이지, 자바스크립트 받아서 웹앱을 CSR처럼 동작하게 한다

이런 방법을 Universal Rendering 이라고도 한다

 

 

웹 퍼포먼스

웹 페이지 로드되고 유저와 상호작용 하는 것들 측정

성능 측정으로 사용성 개선 가능

좋은 UX만들 수 있다

 

성능 측정 키 메트릭

Time To First Byte(TTFB)

페이지 요청 후 처음 데이터 도착하기까지 걸리는 시간

 

First Contentful Paint(FCP)

브라우저가 DOM Content 만들 때까지 걸리는 시간

FCP 3초이상 걸리면 별루

 

Time To Interactive(TTI)

유저가 클릭, 인풋 등 행위 하기까지 걸리는 시간

 

 

SSR 페이지 로드 방식

1. 브라우저: HTML 요청

2. 서버: 페이지 빌드 & HTML 응답

--- TTFB, FCP ---

CSR보다 TTFB가 길겠지

3. 브라우저: JS 요청

4. 서버: JS 응답

--- Regydration ---

5. 브라우저: data 요청

6. 서버: data 응답

--- TTI ---

7. 페이지 로드 완료

 

유저가 빨리 페이지 볼 수 있도록 HTML 미리 빌드

 

 

SSR 장점 & 단점

장점

SEO 유리

Carwler에 많은 정보 줄 수 있다

 

단점

TTFB(첫 데이터 받는 시간) 불리

별도 서버 유지 비용

CSR보다 CDN 캐싱에 불리

 

 

React와 SSR

 

ReactDOMServer 활용

특정 React Component를 HTML로 빌드

 

renderToString

ReactDomServer.renderToString(<App />)

React Component를 HTML 변환해준다

클라이언트가 페이지 요청하면 변환된 HTML string 전달

 

renderToNodeStream

브라우저가 부분적으로 페이지 그린다

 

 

React 앱 배포

체크사항

• yarn.lock, package-lock.json 동시에 있지 않는지 점검
• npm run build 빌드시 에러 없는지 확인
• 로컬에서 배포에서 제대로 실행되는지 점검

 

 

Next.js

React 기반 SSR 구현 도와주는 프레임워크

 

 

참고 링크

 

7 Ways to Deploy a React App

=> https://rapidapi.com/blog/how-to-deploy-a-react-app/

 

Deployment | Create React App

=> https://create-react-app.dev/docs/deployment/

 

Next.js 설치

=> https://nextjs.org/docs/getting-started#manual-setup