네트워크가 뭔가요?(What is the Network?)
애플리케이션이 네트워크에 배포된 후에는 애플리케이션 코드가 어디에 저장되고 실행되는지 알아두는 것이 도움이 됩니다. 네트워크는 리소스를 공유할 수 있는 연결된 컴퓨터(또는 서버)로 생각할 수 있습니다. Next.js 애플리케이션의 경우, 애플리케이션 코드는 오리진 서버, 콘텐츠 전송 네트워크(CDNs), 엣지(edge)로 분산될 수 있습니다. 각각이 무엇인지 알아보겠습니다:
오리진 서버(Origin Servers)
앞서 설명한 대로, 서버는 애플리케이션 코드의 원본 버전을 저장하고 실행하는 주요 컴퓨터를 의미합니다.
우리는 다른 장소인 CDN 서버와 엣지 서버와 같은 다른 위치로 애플리케이션 코드를 분산시킬 때를 가리키기 위해 "오리진(origin)"이라는 용어를 사용합니다.
오리진 서버는 요청을 받으면 응답을 보내기 전에 일부 계산 작업을 수행합니다. 이 계산 작업의 결과는 콘텐츠 전송 네트워크(CDN)로 이동할 수 있습니다.
콘텐츠 전송 네트워크(Content Delivery Network)
CDN(Content Delivery Network)은 전 세계 여러 위치에 정적 콘텐츠(예: HTML 및 이미지 파일)를 저장하며, 클라이언트와 오리진 서버 사이에 배치됩니다. 새로운 요청이 들어오면 사용자에게 가장 가까운 CDN 위치가 캐시된 결과로 응답할 수 있습니다.
이렇게 함으로써 각 요청마다 계산 작업을 수행할 필요가 없으므로 오리진의 부하를 줄일 수 있습니다. 또한, 응답이 지리적으로 더 가까운 위치에서 온다는 점으로 인해 사용자에게 빠르게 전달됩니다.
Next.js에서는 미리 렌더링이 가능하기 때문에 CDN은 작업의 정적 결과를 저장하기에 적합합니다. 이를 통해 콘텐츠 전달 속도를 높일 수 있습니다.
엣지(The Edge)
엣지(Edge)는 사용자에게 가장 가까운 네트워크의 가장자리를 일반적으로 나타내는 개념입니다. CDNs는 네트워크의 가장자리(엣지)에 정적 콘텐츠를 저장하기 때문에 "엣지"의 일부로 간주될 수 있습니다.
CDN과 마찬가지로 엣지 서버는 전 세계 여러 위치에 분산되어 있습니다. 하지만 정적 콘텐츠를 저장하는 CDN과 달리 일부 엣지 서버는 작은 코드 조각을 실행할 수 있습니다.
이는 캐싱과 코드 실행이 사용자에게 가까운 엣지에서 수행될 수 있음을 의미합니다.
전통적으로 클라이언트 측이나 서버 측에서 수행되던 일부 작업을 엣지로 이동함으로써, 클라이언트로 전송되는 코드의 양을 줄이고 사용자의 요청의 일부가 오리진 서버로 완전히 돌아갈 필요가 없어지므로 응답 지연 시간을 줄일 수 있습니다. Next.js에서 엣지 예제를 보려면 여기를 참조하세요.
Next.js에서는 미들웨어(Middleware)를 사용하여 엣지에서 코드를 실행하거나 곧 React 서버 컴포넌트를 사용할 수 있습니다.
추가 자료:
출처: https://nextjs.org/learn/foundations/how-nextjs-works/cdns-and-edge
