ArNext Redefines Permanent Applications

ArNext is a NextJS-based framework that allows developers to deploy the same codebase on Vercel and Arweave to achieve cloud-optimized performance for permaapps. It overcomes the limitations of traditional permaapps, such as slow dynamic content loading, support for root URLs only, and lack of social media cards. By combining NextJS's server-side rendering and Arweave's client-side routing, ArNext runs seamlessly on both platforms. Its core advantage is that it provides a way for developers to build cloud-optimized web applications while performing permanent storage and censorship-resistant backups on Arweave.

Tomo, the founder of WeaveDB, launched ArNext, which provides a new framework for building applications and is a revolutionary change for permaapps. It allows developers to deploy the same codebase on Vercel and Arweave, thereby achieving cloud-optimized performance and censorship-resistant permabackup.

ArNext is essentially an application framework based on Next.js. Next.js is a popular React framework for building modern web applications, supporting server-side rendering (SSR) and static site generation (SSG). Through a series of clever technical means, ArNext is able to build Permaapp from the same codebase, implement server-side rendering (SSR) on Vercel, and use client-side routing on Arweave, forming a unique architecture that combines the characteristics of multi-page applications and single-page applications.

Limitations of Traditional Permaapp

Permaapp refers to an application deployed on Permaweb, usually a single-page application (SPA). Although Permaapp can permanently store application content, traditional Permaapp has some limitations, mainly because it relies on static site generation (SSG) and client-side hash routing, and lacks server-side support. Let’s analyze these limitations one by one:

• Due to the lack of server-side rendering (SSR), dynamic content is slow to load, like a restaurant chef cooking for you.

• Client-side hash routing limitations. The hash routing used can cause navigation problems in some cases, and you will encounter a "404 error" when accessing some pages directly.

• Social media sharing cards cannot be generated correctly because social platform crawlers do not run JavaScript.

• Lack of server optimization (such as SSR, ISR and edge CDN), unable to enjoy the acceleration and optimization techniques commonly used by modern websites.

These limitations make traditional Permaapps weak in dynamic content, page navigation, social sharing, and performance optimization, especially in complex application scenarios that require high performance and flexibility.

ArNext's innovative solution

The ArNext framework overcomes the limitations of traditional Permaapps in the following ways:

• Dual deployment: Deploy the same application on Vercel and Arweave at the same time. Applications on Vercel can take advantage of modern server technologies (such as SSR) to bring better performance and user experience; while the version on Arweave acts as a backup for permanent storage, ensuring data anti-censorship and long-term preservation.

• Cloud performance optimization:Vercel applications can use technologies such as incremental static generation (ISR) to allow some pages to be dynamically updated when needed, without having to regenerate the entire website each time, ensuring that content is updated while maintaining efficiency. This approach significantly improves loading speed, especially for scenarios where content changes frequently, so that users can quickly obtain the latest content while ensuring page performance.

• Static multi-page website experience:Traditional Permaapps are pure single-page applications, but ArNext implements a static multi-page website experience. When the page is first loaded, it is like a statically generated multi-page website (MPA), but once the loading is completed, subsequent page switching is as smooth as SPA. This approach combines the advantages of multi-page applications and single-page applications, providing both good first-time loading speed and smooth page switching.

• Dynamic page OpenGraph tags: The social media preview problem is solved in ArNext through server-side rendering (SSR). SSR can generate appropriate OpenGraph tags for each page on the server side (including page title, description, pictures, etc.), so when users share the page, social media platforms can correctly read and display the preview card.

• No need for hash routing: Traditional Permaapp relies on hash routing (usually the # symbol) to navigate, and ArNext solves this problem through the fallback function of Arweave Manifests v0.2.0. The role of Fallback is to allow the server to automatically fall back to the root page to handle the request when the specific page cannot be found. This means that hash routing is no longer needed, and a more standard URL structure (such as example.com/about) can be used, and the user experience is closer to traditional web pages.

• Dynamically generate relative paths for resources:ArNext solves the challenge of static file linking in three ways. First, dynamically calculate and insert the correct relative path during deployment to ensure that resources are accessed normally in different environments; second, manually rewrite resource tags to make up for the shortcomings of automatic path generation; finally, generate appropriate manifest.json files to ensure that resources are correctly indexed and loaded.

Summary

ArNext introduces a dual deployment framework that combines the permanence of traditional Permaapp with modern cloud performance optimization. It combines multi-page and single-page applications through Vercel's server-side rendering (SSR) and Arweave's client-side routing. This not only solves the limitations of traditional Permaapp in dynamic content loading and page navigation, but also improves social sharing and performance optimization. For example, in a blogging application, Vercel's SSR enables dynamic content (such as the latest articles) to load quickly, while storing articles through Arweave, thereby ensuring permanent storage and censorship resistance of content.

ArNext provides a new construction paradigm that is both persistent and high-performance, improving the flexibility and efficiency of Web3 developers.