[NextJS - 7] Next.js - Edge?

이번 포스트에서는,
우리가 개발한 application의 코드가 network에 배포된 후, 어디에 저장되고 어디서 실행되는지.
Edge라는 것이 무엇인지에 대해 알아보고자 한다.

 

What is the Network?

쉽게 생각하자면 network는 자원을 공유할 수 있는 연결된 컴퓨터(혹은 서버)라고 할 수 있다. 
Next.js application에서 우리가 개발한 code는 origin servers, Content Delivery Networks (CDNs), and the Edge에 배포 되게 되는데, 각각이 무엇인지 알아보도록 하자. 

---

Origin Servers

Server라고 하면 application 코드의 원본을 저장하고 실행시키는 메인 컴퓨터 라고 할 수 있다. 
그리고 이러한 Server를 CDN servers나 Edge server와 구분하기 위해, origin server라고 부른다.

origin server가 request를 받게 되면, 여러 작업을 한 뒤, response를 보내게 되는데 이때 여러 작업을 한 결과는 CDN에 저장될 수 있다. 

 

 

---

Content Delivery Network

CDNs는 client와 origin server 사이에 위치하는 서버로써 세계 여러곳에 걸쳐 존재 하며 HTML파일이나, image파일과 같은
정적인 콘텐츠를 저장하게 된다.

새로운 request가 오게 되면, 가장 유저와 지리적으로 가까운 CDN location 은 캐시된 결과를 이용하여, origin server까지 갈 필요 없이 바로 응답 할 수 있다.

CDNs and origin server

CDNs 를 이용하게 되면, 크게 두가지 장점이 있다. 

1. origin server가 매 요청마다 computing을 할 필요가 없어지므로, origin server의 부하를 감소 시킬 수 있다.
2. 지리적으로 user와 가까운 CDN으로부터 응답을 받게 되므로, user도 더 빠른 응답을 받을 수 있게 된다. 

Next.js 에서는, default로 pre-rendering을 이용하게 되므로, CDNs는 generate된 HTML파일을 저장하고 빠르게 응답을 보낼 수 있는 곳으로 매우 적절하다. (Static Site Generation)

 

---

The Edge

The Edge는 유저와 가장 가까운 network의 가장자리 라는 일반화된 컨셉이다. 
CDNs 또한 network의 가장자리에 정적인 컨텐츠(HTML, images)을 저장하기 때문에, the Edge의 일종이라고 할 수 있다. 

the Edge 역시 전세계 여러 곳에 분포하고 있다는 점에서 CDNs와 더 비슷하게 다가오는데, 두 개념의 차이는 무엇일까?

CDNs는 정적인 컨텐츠를 저장하는 것에 그치지만, 
Edge의 경우, code를 저장(caching) 할 수 있을 뿐만 아니라 코드를 실행(code-execution) 할 수 도 있다는 점에서 그 차이가 있다. 

 

User와 더 가까운 the Edge에서 코드를 실행 함으로써, 
지금까지 Client-Side에서 진행되거나 Server-Side에서 진행되던 작업을 Edge로 옮길 수 있게 되었다.
(see examples with Next.js here)

이를 통해서, client쪽으로 전달되어야 하는 코드의 양을 줄일 수 있을 뿐만아니라, request가 code-execution을 위해 origin server까지 가야 했던 빈도를 줄일 수 있게 됐다. 

 

Next.js에서, 우리는 Middleware와 React Server Components를 통해서 Edge에서 코드를 실행 시킬 수 있다.

 

 

---

여기까지, 기본적으로 Next.js가 어떻게 돌아가는지 그 베이스에 대해 간략히 알아봤다. 
다음 부터는 실제로 어떻게 Next.js 프로젝트를 시작 할 수 있는지 부터 포스팅 해보겠다.