[공식문서] Next.js의 작동 방식 #10

네트워크란 무엇인가?

배포된 응용 프로그램 코드가 저장되고 실행되는 위치를 알아두는 것은 도움이 됩니다. 네트워크는 자원을 공유할 수 있는 연결된 컴퓨터(또는 서버)로 생각할 수 있습니다. Next.js 애플리케이션의 경우 응용 프로그램 코드는 원본 서버, 콘텐츠 전송 네트워크(CDN), 그리고 엣지에 배포될 수 있습니다. 각각에 대해 알아보겠습니다.

 

Origin Server (원본 서버)

앞서 논의한대로 서버는 응용 프로그램 코드의 원본 버전을 저장하고 실행하는 주요 컴퓨터를 의미합니다.

 

원본 서버라는 용어를 사용하여 응용 프로그램 코드가 CDN 서버와 엣지 서버와 같은 다른 위치로 배포되는 서버와 구별합니다.

 

원본 서버가 요청을 받으면 응답을 보내기 전에 일부 계산을 수행합니다. 이 계산 작업의 결과는 콘텐츠 전송 네트워크(CDN)로 이동할 수 있습니다.

 

콘텐츠 전송 네트워크 (Contents Delivery Network)

CDN은 전 세계 여러 위치에 정적 콘텐츠(HTML 및 이미지 파일과 같은)를 저장하며 클라이언트와 원본 서버 사이에 배치됩니다. 새로운 요청이 들어오면 사용자에게 가장 가까운 CDN 위치가 캐시된 결과로 응답할 수 있습니다.

Next.js 공식문서 - 콘텐츠 전송 네트워크

 

이로 인해 각 요청마다 계산이 발생하지 않아 원본에 대한 부하가 줄어듭니다. 사용자에게는 응답이 지리적으로 가까운 위치에서 오기 때문에 빠릅니다.

 

Next.js에서 사전 렌더링이 미리 수행될 수 있기 때문에 CDN은 작업의 정적 결과를 저장하는 데 적합합니다. 이를 통해 콘텐츠 전송 속도가 향상됩니다.

 

엣지 (Edge)

엣지는 사용자에게 가장 가까운 네트워크 가장자리(또는 엣지)에 대한 일반적인 개념입니다. CDN은 네트워크의 가장자리(엣지)에 정적 콘텐츠를 저장하기 때문에 "엣지"의 일부로 간주될 수 있습니다.

CDN과 유사하게 엣지 서버는 전 세계 여러 위치로 분산되어 있습니다. 그러나 정적 콘텐츠를 저장하는 CDN과 달리 일부 엣지 서버는 작은 코드 스니펫을 실행할 수 있습니다.

이는 캐싱과 코드 실행 모두 엣지에서 가까운 위치에서 수행될 수 있다는 것을 의미합니다.

전통적으로 클라이언트 측이나 서버 측에서 수행되던 일부 작업을 엣지로 옮기면 응용 프로그램의 성능을 높일 수 있습니다. 왜냐하면 클라이언트로 보내지는 코드 양이 줄어들고 사용자의 요청 일부가 원본 서버까지 가지 않아 대기 시간이 줄어들기 때문입니다. Next.js에서 엣지에서의 예제를 보려면 여기를 참조하세요.

Next.js에서는 Middleware를 사용하여 엣지에서 코드를 실행할 수 있으며 곧 React Server Components도 사용할 수 있습니다.