Edge Computing (FeConf 2022)

최근 FeConf 2022 내용을 보면서
발표 챕터 중에 당근마켓 김혜성님이 발표하실 엣지 컴퓨팅에 관한 내용을 보게 되었다.

 

최근에 올린 Next.js 12 버전의 Edge Functions를 소개하면서 살펴봤던 개념이라

어떤 내용으로 발표하게 될지 자연스럽게 관심이 갔다.

Edge Computing?

 

쉽게 말하면 서비스를 사용하는 사용자와 최대한 가까운 곳에 서버가 있는 것이다.

대한민국에 있는 사용자라면 대한민국에 있는 서버에서, 미국에 있다면 미국 서버에서

이런 식이다.

 

여기까지 생각하면 자연스럽게 기존 람다 같은 서버리스와 무슨 차이가 있을까 생각할 수 있다.

차이가 없다. 엄밀히 말하면 약간 다른 개념이지만 같은 개념으로 이해해도 된다.

 

다만 Next.js의 행보에서 유추해보자면 프론트엔드만을 위해 더 가벼운 서버리스를 만드는 것 같다.

왜냐하면 서버리스는 기본적으로 요청당 컨테이너를 새로 만들기 때문에 요청을 처리하기 위한 스택을 만들어내기 위해 콜드 부트라는 지연 시간이 존재한다.

이 지연 시간은 프론트엔드만을 위한 엣지 컴퓨팅을 구현한다면 상당 부분 줄일 수 있다. (가볍게 만들 수 있다는 뜻)

 

프론트엔드에서 Edge Computing을 얘기하기 위해선 기존 서버 방식과 CDN 방식에서 문제점을 이야기할 필요가 있다.

Edge Computing은 그 두가지 방식을 개선한 것이기 때문이다.

 

기존 서버의 문제점

 

 

 

보통 Vercel 유튜브를 보면 기존 서버를 오리진 서버로 표현하는 것 같다.

이 오리진 서버는 Next.js로 HTML을 만드는 서버다.

그리고 사용자는 이 서버에 요청을 하여 HTML을 받아오는 방식이다.

 

이 방식에 문제점이 무엇일까?

바로 사용자와 멀 수 있다는 것이다.

한국 사용자가 미국 동부에 있는 서버에서 받아온다고 생각하면 된다.

멀면 느리다.

 

 

기존 CDN의 문제점

 

 

 

오리진 서버 방식의 문제점을 개선하기 위해 CDN이 등장했다.

CDN은 컨텐트 전송 네트워크라는 뜻이다.

 

오리진 서버가 사용자와 멀리 떨어져 있을 수 있기 때문에

CDN은 여러 국가에 서버가 있는 방식이라 사용자와 가깝다.

 

오리진 서버에서 HTML 같은 정적 리소스를 만들어내고

아마존 S3 Bucket 같은 서비스에 올리면 각 CDN 서버에 배포되는 방식이다.

 

이 방식에 문제점이 있을까?

 

있다. 그래서 엣지 컴퓨팅이 트렌드인 것이다.

 

바로, CDN은 가까워서 빠르지만 그냥 단순히 리소스만 요청할 수 있다는 것이다.

단순한 코드도 실행하지 못한다. 요청에 응답으로만 반응한다.

 

로그인 한 사용자에게 A 페이지를 보여주고

로그인 하지 않은 사용자에겐 B페이지를 보여준다면

CDN으로는 이런 처리가 어렵다.

 

요청하는 사용자가 결정해야 되기 때문이다.

 

A/B 테스트를 위해 특정 집단의 사용자에겐 새로운 기능을 가진 페이지를 보여주고

그렇지 않은 사용자에겐 기존 페이지를 보여줘야 한다면

이런 기능도 CDN으로는 어렵다.

 

그럼 어떻게 해야할까?

cdn에서 받아오지 못하고 오리진 서버에서 다시 처리해야 한다.

오리진 서버에서 다시 받아오면 뭐가 문제였나? 바로 느리다는 것이다.

 

Next.js의 12 버전을 살펴보면서 프론트엔드에 이런 문제점이 있다는 것을 알게 되었다.

 

 

엣지 컴퓨팅이 프론트엔드에 미칠 미래?

사실 나도 엣지 컴퓨팅이 어떤 개념인지 알게 된지 오래되지 않았다.

다만 SSR 방식을 많이 개선할 수 있는 개념으로 보여서 관심이 많이 가고 있다.

발표 내용을 보면서 내 생각과 같은지 무엇이 다른지 살펴보고 또 포스팅을 할 예정이지만

 

지금까지 살펴봤던 개념을 돌아보면

 

SSR은 서버에서 미리 html을 만들어내어 제공하기에 사용자에게 화면을 빠르게 보일 수 있지만

사용자 디바이스와 서버 간의 거리가 멀게 되면 그만큼 느리게 보일테니 SSR은 장점을 잃게 된다. 

 

그 단점을 보완하기 위해 CDN 방식을 널리 사용하고 있지만

CDN 방식은 수동적이고, 정적인 컨텐츠만 빠르게 제공할 수 있다.

 

하지만 많은 페이지들은 개인화된 데이터를 포함하기에 동적 컨텐츠들이 포함되는 경우가 많은데

이 경우는 CDN에서 제공할 수가 없다. 결국 오리진 서버에서 한 번 더 동적 컨텐츠를 만들어내고 그것을 또 받아와야 한다.

Next.js가 그래서 정적 컨텐츠는 SSR, 동적 컨텐츠는 CSR 방식으로 처리하고 있다.

 

하지만 결국 이렇게 되면 해결되지 않는 문제가 있다.

바로 동적 컨텐츠를 가져오는 시간이 길다는 것이다.

 

Edge Computing이 이런 문제를 해결할 수 있지 않을까?

 

사용자가 직접 서버에 동적 컨텐츠를 요청하는 것과

엣지가 서버에 동적 컨텐츠를 요청하고 다시 사용자에게 주는 것 사이에 Edge Computing이 어떤 일을 할지 생각하면 미래가 보이는 듯 하다.

 

일단 내가 추측하기론 사용자 브라우저에서 서버와 통신하는 것보다 엣지와 서버 간의 통신이 훨씬 성능 최적화 포인트가 많을 것이다. 데이터를 더 빨리 가져올 수 있는 방법이 있지 않을까?

 

또 오리진 서버와 브라우저 사이에 엣지라는 노드가 띄워져 있는 것이니 뭔가 기존에는 브라우저에서만 프론트엔드가 역할을 할 수 있었다면 이제 무대를 엣지라는 곳으로 옮길 수 있지 않을까?

 

오리진 서버의 응답을 가로채 재가공을 하여 사용자에게 줄 수도 있을 것이고, 보안 처리도 엣지에서 한 번 해서 줄 수 있을 것이고 상태 저장 같은 것도 엣지에서 띄울 수 있지 않을까? 여기까진 내 망상이다 ㅎㅎ..

 

마지막으로 next.js의 12에서 도입된 Edge api routes 기능을 보면 streaming response를 지원한다고 소개되어 있다. 

이 기능이 처음 edge에서 static html을 브라우저에 제공한 후 동적 컨텐츠를 가져오기 위해 서버로 요청할 때 요청을 가져오면서 스트리밍으로 응답을 브라우저에 제공하여 실시간으로 렌더링하는 기능을 제공하는 것으로 추정된다.

(이에 대한 자세한 내용은 또 공부하여 포스팅하겠습니다.)

 

확실하지 않으니 여기까지 추측하겠다.

발표 내용에서 가장 기대하는 부분이 이 부분에 대한 설명이다.

 

 

여담

 

feconf에 흥미로운 발표 주제들이 많지만

김혜성님 발표가 특히 많이 기대된다.

 

Edge Computing에 대해 궁금하다면

Vercel의 Edge Function에 대해 설명하는 유튜브 영상을 추천한다.

(Vercel 누나가 친절하게 잘 설명해준다.)

 

https://www.youtube.com/watch?v=xsx0TnpHxfM

 

https://www.youtube.com/watch?v=Bsysbx0woAg 

https://2022.feconf.kr/

FECONF 2022

 

 

이미지 출처

https://www.sosnowski.dev/post/static-serverless-site-with-nextjs