리믹스와 엣지 컴퓨팅[Remix and “The Edge”]

리믹스 프레임워크가 높은 퍼포먼스를 내기 위해 엣지 컴퓨팅을 사용하는 방법을 알아봅니다.

원문 주소입니다 : https://remix.run/blog/remix-and-the-edge

Remix and “The Edge”

CDN과 "엣지" 주변에는 많은 것이 있습니다.

전통적으로 엣지는 정적 에셋을 빠르게 저장하고 전달하기 위한 분산 네트워크로 인식되어 왔으며,

동적인 모든 것은 여전히 ​​클라이언트(API와 통신하는 클라이언트 측 JS의 형태) 또는 서버(애플리케이션 서버, aws lambda 등) 어딘가에서의 계산을 필요로 합니다.

 

그러나 이 개념은 변화하고 있습니다.

"엣지"는 더 이상 정적 자산에 관한 것이 아닙니다. 컴퓨팅이 필요한 동적 자산이 점점 더 많이 사용되고 있습니다.

Chris Coyier는 자신의 게시물에서 이에 대해 다음과 같이 말합니다.

“중요한 모든 사건이 단일 출처의 서버에서 발생하는 경우

Jamstack 사이트가 CDN화하는 방법은 그다지 중요하지 않습니다.

엣지 함수는 아마도 솔루션의 일부일 것입니다."

(It doesn’t much matter how CDNy your Jamstack site is if everything important happens from a single-origin server. Edge functions are probably part of the solution.)

"엣지"에 있는 정적 파일도 훌륭하지만 더 멋진 것이 무엇인지 아십니까?
엣지에서 뭔가 연산을 하는 것입니다.

Kent는 또한 Reactathon의 연설(his talk at Reactathon)에서 "엣지"와 다음에 나올 내용에 대해 이야기했습니다.

이 게시물에서는 웹에서 콘텐츠를 제공하는 다양한 방법,

"엣지"가 존재하는 이유,

엣지가 웹에서 더 나은 사용자 경험을 제공하기 위해 진화하는 방법을 설명합니다.

(물론 리믹스가 해당 장점들을 어떻게 누리는지도 설명합니다.)

시초 : 서버 사이드 렌더링 (First: Server Side Rendering (SSR))

요청 시 모든 사람에게 콘텐츠(동적 또는 정적)를 제공하는 단일 출처 서버가 있습니다.

Server Side Rendering

이 모델은 장점이 있지만

1) 모든 사람에게 서비스를 제공하는 서버가 하나뿐이고

2) 전 세계에 분산되어 있지 않기 때문에

성능 문제가 발생하기 쉽습니다.

(속도는 부분적으로 서버와 사용자의 지리적 근접성에 의해 결정됨).

만남 : 정적 사이트 생성 (Enter: Static Site Generation (SSG))

SSG는 정적 콘텐츠의 경우 원본 서버를 제거하고

전 세계 컴퓨터의 분산 네트워크(CDN이라고도 함)에 모든 것을 배치하여

SSR을 더 빠르게 만듭니다.

콘텐츠가 더 빠른 검색을 위해 전 세계에 퍼져 있기 때문에 콘텐츠를 총체적으로 더 빠르게 액세스할 수 있습니다.

Static Site Generation

하지만 SSR에서의 동적 작업은 어떻게 하나요?
사이트의 콘텐츠가 변경되면 전체 사이트를 재생성하여 CDN에 새로 푸시하는 것이 일반적입니다.

사용자별 콘텐츠는 어떻게 하나요?
이를 위해서는 이 "정적 콘텐츠 검색" 모드에서의 탈출구와
이 사용자별 콘텐츠를 생성하는 일종의 서버가 필요합니다.

만남 : 클라이언트 사이드 렌더링 (Enter: Client Side Rendering (CSR))

정적 사이트 생성과 JAMstack의 큰 부분은 "A" 부분인 API입니다.
이것은 이전 개별 사용자에게 맞춤화된 동적 콘텐츠를 생성하고 검색하는 방법의 해답입니다.

 

정적 사이트 생성 모델에서 이는 일반적으로 CDN의 콘텐츠에 대한 정적인 빈 셸을 제공하여 수행됩니다.
(CDN엔 동적 데이터가 없기 때문이죠)
처음엔 모든 사용자에게 동일한 이 셸은 일반적으로

• 로더를 표시하고
• 사용자별 콘텐츠를 검색하고
• 렌더링하는 방법에 대한 지침을 포함합니다.

Client Side Rendering

안녕 스피너!

그런 다음 각 클라이언트는 개인화된 컨텐츠 혹은 동적 콘텐츠를 위해 세계 어딘가(근처 데이터베이스에 연결될 수 있음)에 있는
원본 서버에 있을 가능성이 있는 고유한 데이터를 가져와야 합니다.

Retrieving Personalized Data from origin server

문제를 발견하셨나요?

CDN은 모든 사용자와 요청에 균일한 콘텐츠를 제공하는 데 탁월합니다.

그러나 사용자별 콘텐츠를 제공하는 데 필요한 컴퓨팅 및 데이터 검색에는

결국 어딘가의 한곳에 서버가 필요하므로 CDN의 분산화라는 장점을 무색케 합니다.

다시 말해, 콘텐츠 전송 네트워크(CDN)의 콘텐츠가 사용자에 따라 다르다면

전 세계에 분산된 컴퓨터 네트워크에서 오는 것이 아닐 가능성이 큽니다. 

세계 어딘가의 특정 오리진 서버(또는 람다 함수 등)에서 올 가능성이 큽니다.

즉, 동적 컨텐츠의 경우 CDN에서 제공하는 셸만 분산 컴퓨팅의 장점을 활용할 수 있습니다.

(적어도 빈 셸은 빠르게 렌더링되긴 하죠?)

만남 : ISR, DPR, 그리고 [다른 동의어를 여기에 적어주세요]

ISR(Incremental static regeneration), DPR(distributed persistent rendering) 및 기타 우리가 생각해낼 수 있는 모든 것은
사례별로 위에서 설명한 문제 중 일부를 해결하기 위한 것입니다.

그러나 이러한 대안적 옵션과 프레임워크의 문제는 선택을 어렵게 합니다.

또한 일반적으로 전체 사이트에 대해 여전히 SSR 또는 CSR(관련 트레이드오프 포함)을 선택한 다음

페이지별로 대안(ISR, DPR, 람다 등)을 활용합니다.

만남 : Remix

Remix는 이러한 수많은 대안의 절충점을 고려하고 선택하는 것을 요구하지 않습니다.

페이지 단위로 대안을 결정할 수 있으며 나중에 쉽게 마음을 바꿀 수 있습니다.

그리고 이것은 주어진 리소스에 대해 원하는 수준의 역동성을 당신이 선택할 수 있게 해줍니다.

경로 단위로도 역동성을 선택 가능합니다. 리액트 라우터가 그렇게 해줄 것이기 때문입니다.

(Remix is coming to a react-router near you)

 

Remix는 주어진 페이지에 대해 원하는 수준의 역동성을 구현하기 위한 개념적 레버를 제공합니다.

이 레버를 필요에 따라 밀고 당기세요

데이터, 사용자 또는 A/B 테스트에 맞게 런타임에 이 레버를 제어할 수도 있습니다!

 

• 페이지 정보? 대부분 정적입니다(모든 사용자에 대해 동일한 콘텐츠, 드물게 변경됨). 레버를 정적(Static)에 가깝게 당깁니다.
• 유저 프로필? 적당히 동적입니다(모든 사용자에 대해 다르며 드물게 변경됨). 정적과 동적 사이로, 즉 레버를 중앙으로 밉니다.
• 사용자 피드? 매우 역동적입니다(모든 사용자마다 다름, 분 단위로 변경됨). 레버를 동적(Dynamic) 쪽으로 끝까지 밀어 넣습니다.

Spectrum of Dynamic contents with Remix

어떤 똑똑한 사람이 "레버를 줘, 내가 세상을 움직일게"라고 말했습니다.

Remix는 그 아이디어를 받아 실행했습니다.

이제 당신 앱의 각 웹 페이지에서 역동성의 스펙트럼을 활용할 수 있습니다.

그리고 차세대 "엣지"를 사용하면 전 세계에서 빠르게 이를 수행할 수 있습니다.

리믹스와 차세대 엣지

Deno deploy, Cloudflare Workers 및 기타 많은 기술과 같은 차세대 "The Edge"는

정적 콘텐츠 CDN을 동적 콘텐츠 서버와 결합하여 정적 자산과 동적 콘텐츠를 제공할 수 있도록 약속합니다.

따라서 동일한 네트워크에서 컴퓨팅이 필요한 정적 자산과 동적 콘텐츠를 전달할 수 있습니다.

기존 SSR과 유사하지만, 오리진 서버와 CDN에 아기가 있는 것처럼 분산되어 있습니다.

"에지"는 요청된 콘텐츠를 갖고 있거나, 요청된 콘텐츠를 가져와 캐시하는 데 필요한 계산을 수행하기에,

전 세계 모든 사람에게 모든 것이 빠르게 렌더링됩니다. 더 이상 스피너는 없습니다!

NextGen Edge

이러한 종류의 컴퓨팅 네트워크를 Remix와 결합하면
이제 주어진 페이지에 대해 전 세계 컴퓨팅 네트워크에 걸쳐 원하는 수준의 역동성을 제공할 수 있습니다.
이 모든 것이 뛰어난 사용자 경험, 즉 빠른 개인화된 콘텐츠를 제공합니다.

그리고 하나 더...

엣지 스트리밍! 이는 다음 블로그 아티클의 주제입니다.
기다릴 수 없다면 Ryan의 연설을 시청하세요. (Ryan’s talk at Reactathon)