영구 애플리케이션을 재정의하는 ArNext

ArNext는 개발자가 퍼머링크 애플리케이션의 클라우드 성능 최적화를 위해 동일한 코드베이스를 Vercel과 Arweave에 배포할 수 있는 NextJS 기반 프레임워크입니다. 이 프레임워크는 동적 콘텐츠의 느린 로딩, 루트 URL만 지원, 소셜 미디어 카드 부족 등 기존 퍼머링크 애플리케이션의 한계를 극복합니다. NextJS의 서버 측 렌더링과 Arweave의 클라이언트 측 라우팅을 결합하여 두 플랫폼 모두에서 원활하게 실행되는 ArNext. 이 솔루션의 핵심 이점은 개발자가 클라우드에 최적화된 웹 앱을 구축할 수 있는 방법을 제공하며, 검열에 대비해 영구적으로 저장하고 백업할 수 있다는 점입니다.

위브DB의 창립자인 토모는 퍼머 앱을 위한 혁신적인 새로운 앱 구축 프레임워크를 제공하기 위해 ArNext를 출시했습니다. 이 프레임워크를 통해 개발자는 Vercel과 Arweave에 동일한 코드베이스를 배포하여 클라우드 성능을 최적화하고 검열에 저항하는 퍼머링크를 구현할 수 있습니다.

ArNext는 기본적으로 서버 측 렌더링(SSR) 및 정적 사이트 생성(SSG)을 지원하는 최신 웹 앱 구축에 널리 사용되는 React 프레임워크인 Next.js에 기반한 앱 프레임워크입니다. 일련의 영리한 기술적 트릭을 통해 ArNext는 동일한 코드베이스로 퍼마앱을 구축하고, Vercel에서 서버 측 렌더링(SSR)을 구현하며, Arweave에서 클라이언트 측 라우팅을 사용하여 다중 페이지 앱과 단일 페이지 앱의 특성을 모두 결합한 독특한 아키텍처를 구현할 수 있습니다.

기존 퍼마앱의 한계

퍼마앱은 일반적으로 단일 페이지 앱(SPA( ). 퍼마앱은 애플리케이션 콘텐츠를 영구적으로 저장할 수 있지만, 기존 퍼마앱은 주로 정적 사이트 생성(SSG)과 클라이언트 측 해시 라우팅에 의존하고 서버 측 지원이 부족하기 때문에 몇 가지 한계가 있습니다. 이러한 한계를 하나씩 분석해 보겠습니다.

• 서버사이드 렌더링(SSR)이 없기 때문에 동적 콘텐츠는 마치 레스토랑 요리사가 즉석에서 음식을 조리하는 것처럼 로딩 속도가 느립니다.

• 클라이언트 측 해시 라우팅의 한계. 사용된 해시 경로는 경우에 따라 탐색 문제를 일으킬 수 있으며 일부 페이지에 직접 액세스하면 "404 오류"가 발생할 수 있습니다.

• 소셜 플랫폼 크롤러가 JavaScript를 실행하지 않기 때문에 소셜 미디어 공유 카드가 올바르게 생성되지 않습니다.

• 최신 웹사이트에서 일반적으로 사용되는 가속 및 최적화 기술을 활용하기 위한 서버 최적화(예: SSR, ISR 및 엣지 CDN)가 부족합니다.

이러한 한계로 인해 기존 퍼마앱은 동적 콘텐츠, 페이지 탐색, 소셜 공유, 성능 최적화 등의 영역, 특히 고성능과 유연성이 요구되는 복잡한 애플리케이션 시나리오에서 취약합니다.

ArNext의 혁신적인 솔루션

ArNext 프레임워크는 다음과 같은 방식으로 기존 Permaapps의 한계를 극복합니다. ul class=" list-paddingleft-2">

• 클라우드 성능 최적화: Vercel 앱은 증분 정적 결과(ISR) 등의 기술을 활용할 수 있습니다. 페이지의 일부를 필요에 따라 동적으로 업데이트할 수 있으므로 매번 전체 사이트를 다시 생성할 필요가 없으며 콘텐츠가 효율적으로 업데이트되도록 보장합니다. 이 접근 방식은 특히 콘텐츠가 자주 변경되고 사용자가 페이지 성능을 유지하면서 최신 콘텐츠에 빠르게 액세스할 수 있는 시나리오에서 로드 속도를 획기적으로 개선합니다.

• 정적 다중 페이지 웹사이트 경험: 기존에는 PermaApp이 단일 페이지 앱이었지만, ArNext는 다음을 구현합니다. 정적 다중 페이지 웹 사이트 경험을 구현합니다. 페이지가 처음 로드될 때는 정적으로 생성된 MPA처럼 보이지만, 페이지가 로드되면 이후 페이지 전환은 SPA처럼 원활하게 이루어집니다. 이 접근 방식은 다중 페이지 앱과 단일 페이지 앱의 장점을 결합하여 우수한 첫 로딩 속도와 부드러운 페이지 전환을 모두 제공합니다.

• 동적 페이지 OpenGraph Tags: 소셜 미디어 미리보기 문제는 서버 측에서 ArNext로 해결됩니다. 렌더링(SSR)으로 해결되며, 사용자가 페이지를 공유할 때 소셜 미디어 플랫폼이 미리보기 카드를 올바르게 읽고 표시할 수 있도록 서버 측에서 각 페이지에 적합한 OpenGraph 태그(페이지 제목, 설명, 이미지 등)를 생성합니다.

• 해시 라우팅이 필요 없음: 기존 퍼마앱은 탐색을 위해 해시 라우팅(보통 # 기호)에 의존하지만 ArNext는 탐색을 위해 해시 경로(보통 # 기호)를 사용합니다. ArNext는 Arweave 매니페스트 v0.2.0의 폴백 기능으로 이 문제를 해결합니다. 폴백은 서버가 특정 페이지를 찾을 수 없는 경우 자동으로 루트 페이지로 돌아가 요청을 처리하도록 하는 방식으로 작동합니다. 즉, 해시 라우팅이 더 이상 필요하지 않고, 더 많은 표준 URL 구조(예: example.com/about)를 사용할 수 있으며, 사용자 경험이 기존 웹 페이지에 더 가깝다는 것을 의미합니다.

• 동적으로 리소스에 대한 상대 경로 생성: ArNext는 세 가지 방식으로 정적 파일 링크의 문제를 해결합니다. 첫째, 올바른 상대 경로를 동적으로 계산하여 배포 시점에 삽입하여 다양한 환경에서 리소스에 올바르게 액세스할 수 있도록 하고, 둘째, 리소스 태그를 수동으로 다시 작성하여 자동화된 경로 생성의 부족함을 보완하며, 마지막으로 적절한 매니페스트.json 파일을 생성하여 리소스가 올바르게 색인되고 로드되도록 보장합니다.

요약

ArNext는 기존 PermaApp의 영구성과 최신 클라우드의 성능 최적화를 결합한 이중 배포 프레임워크를 도입합니다. 기존 퍼마앱의 영구성과 최신 클라우드 성능 최적화를 결합합니다. Vercel의 서버 측 렌더링(SSR)과 Arweave의 클라이언트 측 라우팅을 통해 다중 페이지 및 단일 페이지 애플리케이션을 혼합합니다. 이를 통해 동적 콘텐츠 로딩 및 페이지 탐색 측면에서 기존 퍼마앱의 한계를 해결하고 소셜 공유 및 성능 최적화를 개선합니다. 예를 들어, 블로그 애플리케이션에서 Vercel의 SSR을 사용하면 최신 게시물과 같은 동적 콘텐츠를 빠르게 로드하는 동시에 Arweave를 통해 게시물을 저장하여 콘텐츠가 영구적으로 저장되고 검열에 저항하도록 보장할 수 있습니다.

ArNext는 지속성과 고성능을 모두 갖춘 새로운 빌드 패러다임을 제공하여 웹3 개발자의 유연성과 효율성을 높입니다.