컴파일
브라우저가 이해하기 위해서 javascript로 컴파일해야한다.
컴파일이란 한 언어로 된 코드를 다른 언어나 해당 언어의 다른 버전으로 출력하는 프로세스
축소
주석, 공백, 들여쓰기 등 코드 실행에 필요하지 않은 정보를 제거하는 프로세스
번들링
사용자가 웹을 방문할 때 파일 요청 수를 줄이는 것을 목표로 브라우저에 최적화된
번들로 병합하는 프로세스
(컴파일은 코들르 브라우저에서 구문 분석할 수 있는 것으로 변환
번들링은 앱 종속성 그래프를 해결하고 파일 수를 줄이는 것)
코드 분할
앱의 다른 URL에 따른 각 페이지는 고유한 진입점이 되는데
이 진입점에 필요한 더 작은 것으로 분할하는 프로세스
해당 페이지를 실행하는 데 필요한 코드만 로드하여 초기 로드 시간을 개선
build time, runtime
build time: production용 앱 코드를 준비하는 단계나 시간
- 정적 html 파일
- 서버사이드 렌더링을 위한 javascript 코드
- 클라이언트사이드 렌더링을 위한 javascript 코드
- CSS 파일
runtime: 앱 빌드 및 배포 후 요청에 대한 응답으로 앱이 실행되는 시간
클라이언트 및 서버
클라이언트: 코드 요청을 서버에 보내는 브라우저
서버: 앱 코드를 저장하고 클라이언트로부터 요청받고 연산 후 데이터를 보내는 컴퓨터
렌더링
React에서 작성한 코드를 html로 변환하는 프로세스
렌더링은 서버나 클라이언트 모두에서 할 수 있다
종류: 서버 사이드 렌더링, 정적 사이트 생성, 클라이언트 사이드 렌더링
pre-rendering
서버 사이드 렌더링 및 정적 사이트 생성 결과가 클라이언트로 전송되기 전에 외부 데이터와 React 코드를 html로 변환하는 프로세스
클라이언트 사이드 렌더링: React에서 javascript 코드와 함께 빈 html를 받는 경우
pre-rendering: Next는 모든 페이지에서 사전-렌더링되고 서버에서 html이 미리 생성됨
서버 사이드 렌더링: 요청에 의해 응답을 받은 데이터를 가지고 html를 만들고 전송한다.
이를 하면 서버에서 완전히 렌더링 되었으니 클라이언트에서 렌더링을 위한 javascript는 필요가 없다, 즉 클라이언트에서 렌더링할 필요 없음
hydration: 생성된 각 HTML은 해당 페이지에 필요한 최소한의 JavaScript 코드를 가지고 있다. 브라우저에서 페이지를 로드하면 해당 JavaScript 코드가 실행되어 페이지를 완전히 interactive으로 만듭니다.
정적 사이트 생성(getStaticProps): html이 서버에서 생성되지만 서버 사이드 렌더링과 달리 런타임에 서버가 없다
앱이 빌드 및 배포 시 한번 생성되고 html이 CDN에 저장되고 요청할 때 재사용된다
서버 사이드 렌더링, 정적 사이트 생성, 클라이언트 사이드 렌더링을 골라서 쓸 수 있다는 것이 Next 장점이다
네트워크
Next 앱은 코드를 원본 서버, CDN(콘텐츠 전송 네트워크), Edge에 배포할 수 있다
서버는 코드 원본 버전을 저장하고 실행하는 주 컴퓨터를 말하는데
origin에는 CDN 서버와 Edge 서버가 있다
원본 서버는 요청에 대한 응답을 위해 연산을 한다. 이 결과를 CDN으로 보낸다.
CDN: html 및 이미지 파일을 저장하고 클라이언트와 원본 서버 사이에 있다
요청이 오면 유저가 가장 가까운 CDN이 캐시된 결과를 응답해준다
그래서 각 요청에 대해 계산을 안해도 되고 더 가까운 곳에서 줄 수 있으니 더 빠르다
결론, 원본 서버에서 pre-rendering을 하고 그 결과를 CDN에 저장하니 더 빠르게 전달할 수 있다
Edge: CDN은 네트워크의 가장 edge에 저장하기 때문에 edge의 일부분이다
정적 파일을 저장하는 CDN과 달리 일부 edge는 코드를 실행할 수 있다
즉, 유저와 더 가까운 edge에서 캐싱과 코드 실행을 할 수 있다
edge에서 코드 실행을 하면 클라이언트나 서버에서 했던 작업 중 일부를 edge로 이동할 수 있다
그러면 클라이언트로 보내지는 코드 양이 줄고 요청 일부가 다시 원본 서버로 돌아갈 필요가 없어 성능향상이 되고 대기 시간이 줄어든다
이는 미들웨어를 통해 실행할 수 있다
