REACT-SPA 프레임워크 NextJS
NextJS 소개
- SSR 지원
*SSR = 서버 사이드 랜더링
CSR(클라이언트 사이드 랜더링) 은 React 파일을 받고, home 화면을 랜더링한다.
모든 클라이언트가 이 과정을 반복한다. 초기 로딩속도가 느림에도...
랜더링 결과를 서버가 Memoziation 하고 결과만 리턴하면 어떨까?
또한 동적으로 바뀌는 컴포넌트 외에, 항상 똑같은 모습을 보여주는
컴포넌트들도 미리 랜더링해서 제공하면 ? 어떨까?- CSR보단 SEO 이점
- 자동 코드 분할 ( 폴더+파일 컨벤션을 따라라 )
- HMR ( 핫 모듈 교체, Hotloading )
SSR은 처음이지 ?
SSR 개발 프로세스
- (1) SSR 도입 전
FE (Javascript) + BE(JSP/Servlet + Java API) - (2) SSR 도입 후
FE (Javascript + JSP/Servlet ) + BE( Java API)
SSR을 FE쪽에서 하므로 , 하는일이 늘어났다.!
SSR 이점
-
커뮤니케이션 비용 감소
SSR을 백엔드에서 개발 해서 커뮤니케이션이 필요헀었음 -
universal language인 JS사용
CSR,SSR,SERVER 로직을 재활용 -
성장한 React 생태계 이용
-
성능의 이점
SSR --- Static SSR --- SSR + CSR --- CSR+PreRedner --- CSR 에서 환경에 맞게 개발 가능
부하 테스트 후 얻어야 하는 것
- 서버 환경에서 최적의 환경을 찾자.
시스템의 가용량을 확인하는게 우선
CPU 코어 40개의 서버가 한대 있다고 가정
인스턴스의 갯수와 RPS 의 상관관계를 관찰
Node.JS 인스턴스를 30개일때 4550 = 평균 RPS(초당 요청 처리 수)
Node.JS 인스턴스를 35개일때 4780 = 평균 RPS(초당 요청 처리 수)
**Node.JS 인스턴스를 37개일때 4800 = 평균 RPS(초당 요청 처리 수)**
Node.JS 인스턴스를 40개일때 4790 = 평균 RPS(초당 요청 처리 수)- 결론
최대 수용 할 수 있는 서비스의 RPS
= 1개의 서버(prod)가 수용할 수 있는 최대 RPS * N개
참고) (서버)시간 당 처리량에 관한 4가지 용어
TPS,PPS,HPS,RPS 라는 4가지 용어
-
TPS : Transaction Per Second
서버(DB)가 초당 몇건의 트랜잭션을 수행하는지가 중요 지표 -
PPS : Page Per Second
CSS, Image등 콘텐츠를 다운로드 받는다.
그리고 서버작업(JSP/Servlet)의 수행결과를 반환한다.
이를 리턴하면 하나의 page가 나온다.
그래서 초당 몇 page가 나오는지에 대한 지표 -
HPS : Hit Per Second, RPS: Request Per Second
초당 사용자가 웹서버에 보낸 HTTP 요청 수
초당 처리 가능한 요청 수
Node.js 운영 전략
-
Exception = 인스턴스 재시작
UncatchedException는 알 수 없는 상태로의 진입이다.
error 핸들링 잘 되면 상관이 없다.
하지만 그렇지 못한 경우, 알수없는 상태에서의 운영은
더 예측하지 못하는 상황을 야기한다. -
메모리 누수 확인
메모리의 계단형 증가
CPU의 계단형 증가
크롬 브라우저의memory > Allocation instrumentationon timeline기능으로 찾기 -
SSR환경에서FE성능
(확인 필요) CSR -> SSR로 완전히 바꾸면 ?
SSR덕에 FirstPaint는 감소
DomCententLoaded는 증가
- 바로 보여야하는 화면(컴포넌트) =SSR
- 천천히 로딩은 = CSR
