ArNext 是一個基於NextJS 的框架,允許開發者在Vercel 和Arweave 上部署相同程式碼庫,實現永久應用程式的雲端效能最佳化。它克服了傳統永久應用在動態內容加載慢、僅支援根URL、缺乏社交媒體卡片等限制。透過結合NextJS 的伺服器端渲染和Arweave 的客戶端路由,ArNext 實現了在兩個平台上的無縫運作。其核心優勢是提供了一種方法,使開發者既能建立雲端優化的Web 應用,又能在Arweave 上進行永久儲存和防審查備份。
WeaveDB 的創辦人Tomo 推出了ArNext,為建構應用提供了一個全新的框架,對永久應用(Permaapp)來說是革命性的改變。它允許開發者將相同的程式碼庫部署在Vercel 和Arweave 上,從而實現雲端效能最佳化和抗審查的永久備份。
ArNext 本質上是一個基於Next.js 的應用框架。 Next.js 是一個用於建立現代Web 應用的熱門React 框架,支援伺服器端渲染(SSR)和靜態網站生成(SSG)。透過一系列巧妙的技術手段,ArNext 能夠從相同的程式碼庫建立Permaapp,在Vercel 上實現伺服器端渲染(SSR),並在Arweave 上使用客戶端路由,形成一個結合多頁應用程式和單頁應用程式特徵的獨特架構。
傳統Permaapp 的局限性
Permaapp 是指部署在Permaweb 上的應用,通常是單頁應用(SPA)。雖然Permaapp 可以永久儲存應用內容,但傳統的Permaapp 有一些局限性,主要是因為它依賴靜態網站產生(SSG) 和客戶端雜湊路由,缺乏伺服器端的支援。讓我們逐一分析這些限制:
-
因為缺乏伺服器端渲染(SSR),動態內容載入速度慢,像是餐廳廚師現做菜給你。
-
客戶端哈希路由的限制。使用的雜湊路由在某些情況下會導致導航問題,直接存取某些頁面時會遇到「404錯誤」。
-
社群媒體分享卡片無法正確生成,因為社群平台爬蟲不會運行JavaScript。
-
缺少伺服器的最佳化(例如SSR、ISR 和邊緣CDN),無法享受現代網站常用的加速和最佳化技術。
這些限制讓傳統的Permaapp 在動態內容、頁面導航、社交分享和效能優化等方面顯得較弱,尤其是在需要高效能和靈活性的複雜應用程式場景下。
ArNext 的創新解決方案
ArNext 框架透過以下方式克服了傳統Permaapp 的限制:
-
雙重部署:將相同的應用程式同時部署在Vercel 和Arweave 上。 Vercel 上的應用程式可以利用現代伺服器技術(如SSR),帶來更好的效能和使用者體驗;而Arweave 上的版本則充當永久儲存的備份,保證資料的抗審查性和長久保存。
-
雲端效能最佳化:Vercel 應用程式可利用增量靜態產生(ISR)等技術,允許部分頁面在需要時動態更新,無需每次重生成整個網站,確保內容更新的同時保持高效。此方式顯著提升了載入速度,尤其適用於內容頻繁變化的場景,使用者能快速取得最新內容,同時確保頁面效能。
-
靜態多頁網站體驗:傳統的Permaapp 是純單頁應用,但ArNext 實現了一種靜態多頁網站的體驗。當頁面首次載入時,就像一個靜態產生的多頁網站(MPA),但一旦載入完成,後續頁面切換就像SPA 一樣流暢。這種方式結合了多頁應用程式和單頁應用程式的優點,既能提供良好的首次載入速度,也能確保頁面切換的流暢性。
-
動態頁面OpenGraph 標籤:社群媒體預覽問題在ArNext 中透過伺服器端渲染(SSR)解決。 SSR 可以在伺服器端為每個頁面產生適當的OpenGraph 標籤(包含頁面標題、描述、圖片等),因此當使用者分享頁面時,社群媒體平台能夠正確讀取並顯示預覽卡片。
-
無需哈希路由:傳統Permaapp 依賴哈希路由(通常是# 符號)來導航,而ArNext 透過Arweave Manifests v0.2.0 的fallback 功能解決了這個問題。 Fallback 的作用是讓伺服器在找不到特定頁面時,自動回退到根頁面處理請求。這意味著不再需要哈希路由,可以使用更標準的URL 結構(如example.com/about),使用者體驗更接近傳統的網頁。
-
動態產生資源的相對路徑:ArNext 使用三種方式解決了靜態檔案連結的挑戰。首先,部署時動態計算並插入正確的相對路徑,確保資源在不同環境下正常存取;其次,手動重寫資源標籤以彌補自動路徑產生的不足;最後,產生適當的manifest.json 文件,確保資源正確索引和載入。
總結
ArNext 引入雙重部署框架,將傳統Permaapp 的永久性與現代雲端效能最佳化相結合。它透過Vercel 的伺服器端渲染(SSR)和Arweave 的客戶端路由,融合多頁與單頁應用程式。這既解決了傳統Permaapp 在動態內容載入和頁面導航方面的限制,又改善了社交分享和效能最佳化的問題。例如,在一個部落格應用程式中,Vercel 的SSR 使得動態內容(如最新文章)能夠快速加載,同時透過Arweave 儲存文章,從而保障內容永久儲存與抗審查。
ArNext 提供了一種新的建置範式,既有持久性又有高效能,提升了Web3 開發者的靈活性和效率。