렌더링?
React에서 작성하는 코드를 UI의 HTML 표현으로 변환할 때에 피할 수 없는 작업
렌더링은 서버나 클라이언트에서 발생할 수 있고
빌드시나 런타임 시 모든 요청에 대해서도 발생함
Next를 활용하면 SSR, CSR, SSG의 세 가지 유형의 렌더링 방법을 사용할 수 있음
Pre-Rendering
SSR (서버 사이드 렌더링)과 SSG (스태틱 사이트 제네레이션)는 Pre-Rendering이라고 불리는데
그 이유로는 결과가 클라이언트로 전송되기 전에 외부 데이터를 가져오고 리액트 컴포넌트를 HTML로 변환하기 때문이다.
CSR vs Pre-Rendering
일반적인 React 어플리케이션에서, 브라우저는 서버로부터 빈 HTML과 함께 UI를 구성하기 위한 JS를 받음
그렇기 때문에 초기 렌더링 작업이 사용자 장치(클라이언트)에서 발생하므로 이것을 CSR (클라이언트 사이드 렌더링)이라고 함
참고
리액트의 useEffect() 또는 useSWR과 같은 데이터 패칭 훅을 사용하여 데이터를 가져오도록 선택해서 Next.js 애플리케이션의 컴포넌트에 대해 CSR을 사용하도록 할 수 있음
반면, Next.JS는 기본적으로 모든 페이지를 Pre-Rendering 함
Pre-Rendering은 HTML이 사용자 장치에서 JS로 모든 것을 수행하는 것이 아닌 서버에서 미리 생성되는 것을 의미
실제로 CSR이라면 사용자가 렌더링 작업이 될 때까지 빈 페이지를 보게 되지만 Pre-Rendering (SSR, SSG)이라면 완성된 HTML을 볼 수 있음
상세한 Pre-Rendering
1. SSR (서버 사이드 렌더링)
SSR에서는 HTML이 각 요청에 대해 서버에서 만들어짐
그런 다음 생성된 HTML, JSON 데이터 및 페이지를 동적으로 만들기 위한 JS 명령이 클라이언트로 전송됨 (서버 -> 클라이언트)
클라이언트에서 HTML은 빠르고 정적인 페이지를 표시하는 데 사용하는 반면, 리액트는 JSON 데이터와 JS 명령을 사용하여 컴포넌트를 동적으로 만듦 (ex. 버튼에 이벹느 핸들러 연결), 이러한 과정을 하이드레이션 (hydration)이라고 함
Next에서는 getServerSideProps를 사용하여 서버 사이드 렌더링 페이지를 선택할 수 있음
참고
리액트 18 및 Next 12에서 리액트 서버 컴포넌트의 알파 버전이 도입됨 서버 컴포넌트는 서버에서 완전히 렌더링 되고 렌더링 하기 위한 클라이언트 측 JS가 필요하지 않음.
또한, 서버 컴포넌트를 통해 개발자는 서버에 일부 로직을 유지하고 해당 로직의 결과만 클라이언트에 전송할 수 있음. 이렇게하면 클라이언트로 전송되는 번들 크기가 줄어들고 CSR의 성능이 향상됨
2. SSG (스태틱 사이트 제네레이션)
SSG에서도 HTML이 서버에서 생성되지만, 서버 사이드 렌더링과 달리 런타임에 서버가 없다는 것이 특징
대신, 콘텐츠는 애플리케이션이 배포될 때 빌드 시간에 한 번만 생성되며 HTML은 CDN (콘텐츠 딜리버리 네트워크)에 저장되어 각 요청에 대해 재사용
Next는 getStaticProps를 사용하여 페이지를 정적으로 생성하도록 선택할 수 있음
참고
Incremental Static Regeneration을 사용하여 사이트를 구축한 후 정적 페이지를 생성하거나 업데이트 할 수 있음
즉, 데이터가 변경되더라도 전체 사이트를 재구축할 필요가 없음
Next의 가장 큰 장점은 SSR, CSR, SSG 등에서 페이지 별로 사용 사레에 가장 적합한 렌더링 방법을 선택할 수 있다는 것
네트워크?
애플리케이션 코드가 저장되고 네트워크에 배포된 후 실행되는 위치를 아는 것이 도움이 됨
네트워크 리소스를 공유할 수 있는 연결된 컴퓨터(또는 서버)락 생각할 수도 있지만
Next.js의 경우 애플리케이션 코드를 원본 서버, 콘텐츠 전송 네트워크 (CDN), 및 Edge에 배포 할 수 있음
1. 원본 서버
서버는 애플리케이션의 코드의 원본을 저장하고 실행하는 메인 컴퓨터
이 서버를 CDN과 Edge 서버와 같이 애플리케이션 코드가 배포될 수 있는 다른 장소와 구별하기 위해 원본 서버라는 용어를 사용
원본 서버는 요청을 받으면 응답을 보내기 전에 일부 계산을 수행하고
이 계산 작업의 결과는 CDN (콘텐츠 전송 네트워크)로 이동할 수 있음
2. CDN (Content Delivery Network)
CDN은 HTML 및 이미지 파일과 같은 정적 콘텐츠를 전 세계 여러 위치에 저장하고 클라이언트와 원본 서버 사이에 배치됨
새로운 요청이 들어오면 사용자와 가장 가까운 CDN 위치에서 캐시된 결과로 응답할 수 있음
계산이 각 요청에서 발생할 필요가 없기 때문에 이렇게하면 원본 서버의 부하가 줄어들고 사용자는 지리적 위치와 가까운 곳으로 부터 응답이 오기 때문에 사용자가 더 빠르게 작업할 수 있음
Next에서는 Pre-Rendering을 미리 수행할 수 있고 CDN는 작업의 정적 결과는 저장하는데 적합하여 콘텐츠 전송 속도가 들어남
3. Edge
Edge는 사용자에게 가장 가까운 네트워크 주변부 또는 엣지에 대한 일반화된 개념
CDN는 네트워크 주변부에 정적 콘텐츠, 동적 컨텐츠를 저장하기 때문에 Edge의 일부로 간주될 수 있음
CDN과 유사하게 Edge 서버는 전 세계 여러 위치에 배포되지만
정적 컨텐츠를 저장하는 CDN과는 달리
Edge는 서버 코드를 실행할 수 있음
이는 캐싱과 코드실행 모두 사용자에게 더 가까운 Edge에서 수행할 수 있음을 나타냄
Edge에서 코드를 실행하면 기존에 클라이언트 사이드, 서버 사이드에서 수행되었던 작업 중 일부를 Edge로 이동할 수 있게 됨
이렇게하면 클라이언트로 전송되는 코드의 양이 줄어들고
사용자 요청의 일부가 원본 서버로 다시 돌아갈 필요가 없으므로 대기 시간이 줄어들기 때문에 애플리케이션의 성능이 향상 될 수 있음
Next에서는 미들웨어를 사용하여 Edge에서 코드를 실행할 수 있으며, 곧 리액트 컴포넌트에서도 코드를 실행할 수 있음
