ArNext 重新定义永久应用

PermaDAO10-11

ArNext 是一个基于 NextJS 的框架，允许开发者在 Vercel 和 Arweave 上部署相同代码库，实现永久应用的云端性能优化。它克服了传统永久应用在动态内容加载慢、仅支持根 URL、缺乏社交媒体卡片等限制。通过结合 NextJS 的服务器端渲染和 Arweave 的客户端路由，ArNext 实现了在两个平台上的无缝运行。其核心优势是提供了一种方法，使开发者既能构建云端优化的 Web...

网页链接

免责声明：本文观点仅代表作者个人观点，不构成本平台的投资建议，本平台不对文章信息准确性、完整性和及时性做出任何保证，亦不对因使用或信赖文章信息引发的任何损失承担责任。

精彩评论

我们需要你的真知灼见来填补这片空白

发表看法

{"i18n":{"language":"zh_CN"},"isChannel":false,"data":{"share":"https://www.laohu8.com/m/news/2474806324?lang=zh_CN&edition=full","thumbnail":"https://static.tigerbbs.com/data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAH5SURBVHgB7VXBUQJBEJxZqiykfFwGnhGIEQgZyEMt/HAbgRgBEIESwcLLAh+QgWQARCBmwAstq7h15m454Gr3OP7Mi73d6Z7p7R0ATnEgMM8hpd59AFEGCL34i1hS6kLKh9mhXHSDKk+Ii2etw4CWvuPYgiAmWq87UtYXuQn6/Y+W1roJoL0U0HeUhOLakJYTIBTtRuO+k0nAUiAWFAFXeE0kXZKj55Iilg7aBN4wn2bUcW23G9wHF59cGQHPCTjIo3E6l7slkuqGBOMDykMsTbfgPxUp5RKOCKVGhPHHJOW4k1WVMUTEgqXWIXAugioNlBrc2QikrC21PqsyOJMYTEClhrTQ03Rr6ej1Bl+wdROdXd3YC4nuccoGYTyBCK+8QQun1UzV/s4n+l10dFLnQiM3EVFLbLfQA2eElj2dcUfbPcGPJGbDlrGdJYpjiN5CEvSKn8a2k8ZRkf5aw4ugliax34FcIEZ8mekkvsAgeLyihBq1L1l/OzjnIhOzYbpsc2NTu8XgiIjBzyekBL/yxARiUyG/QCMDW2zqlssGPizvg4dJgZZRIUaQzBjsZQ0yY3EeE01znueVtI6KFFF7c1EmZqayeZSEhUszr3wDQwqsSfN6O42VMa6TQXYLGeOaSPsAv2+uO8v5h8Maa3//DyecuaQ7xVHxD4rDJjfZUTFuAAAAAElFTkSuQmCC?op=imageView2&mode=2&width=256&height=256&quality=70&format=png","is_english":false,"pubTime":"2024-10-11 17:38","share_image_url":"https://static.laohu8.com/e9f99090a1c2ed51c021029395664489","id":"2474806324","market":"hk","top_or_hot":-1,"title":"ArNext 重新定义永久应用","media":"PermaDAO","content":"<div>\n<p>ArNext 是一个基于 NextJS 的框架，允许开发者在 Vercel 和 Arweave 上部署相同代码库，实现永久应用的云端性能优化。它克服了传统永久应用在动态内容加载慢、仅支持根 URL、缺乏社交媒体卡片等限制。通过结合 NextJS 的服务器端渲染和 Arweave 的客户端路由，ArNext 实现了在两个平台上的无缝运行。其核心优势是提供了一种方法，使开发者既能构建云端优化的 Web...</p>\n\n<a href=\"https://www.jinse.cn/blockchain/3699321.html\">网页链接</a>\n\n</div>\n","source":"jinse_stock","html":"<!DOCTYPE html>\n<html>\n<head>\n<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />\n<meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no\"/>\n<meta name=\"format-detection\" content=\"telephone=no,email=no,address=no\" />\n<title>ArNext 重新定义永久应用</title>\n<style type=\"text/css\">\na,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,\nem,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,\nobject,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{ font:inherit;margin:0;padding:0;vertical-align:baseline;border:0 }\nbody{ font-size:16px; line-height:1.5; color:#999; background:transparent; }\n.wrapper{ overflow:hidden;word-break:break-all;padding:10px; }\nh1,h2{ font-weight:normal; line-height:1.35; margin-bottom:.6em; }\nh3,h4,h5,h6{ line-height:1.35; margin-bottom:1em; }\nh1{ font-size:24px; }\nh2{ font-size:20px; }\nh3{ font-size:18px; }\nh4{ font-size:16px; }\nh5{ font-size:14px; }\nh6{ font-size:12px; }\np,ul,ol,blockquote,dl,table{ margin:1.2em 0; }\nul,ol{ margin-left:2em; }\nul{ list-style:disc; }\nol{ list-style:decimal; }\nli,li p{ margin:10px 0;}\nimg{ max-width:100%;display:block;margin:0 auto 1em; }\nblockquote{ color:#B5B2B1; border-left:3px solid #aaa; padding:1em; }\nstrong,b{font-weight:bold;}\nem,i{font-style:italic;}\ntable{ width:100%;border-collapse:collapse;border-spacing:1px;margin:1em 0;font-size:.9em; }\nth,td{ padding:5px;text-align:left;border:1px solid #aaa; }\nth{ font-weight:bold;background:#5d5d5d; }\n.symbol-link{font-weight:bold;}\n/* header{ border-bottom:1px solid #494756; } */\n.title{ margin:0 0 8px;line-height:1.3;color:#ddd; }\n.meta {color:#5e5c6d;font-size:13px;margin:0 0 .5em; }\na{text-decoration:none; color:#2a4b87;}\n.meta .head { display: inline-block; overflow: hidden}\n.head .h-thumb { width: 30px; height: 30px; margin: 0; padding: 0; border-radius: 50%; float: left;}\n.head .h-content { margin: 0; padding: 0 0 0 9px; float: left;}\n.head .h-name {font-size: 13px; color: #eee; margin: 0;}\n.head .h-time {font-size: 11px; color: #7E829C; margin: 0;line-height: 11px;}\n.small {font-size: 12.5px; display: inline-block; transform: scale(0.9); -webkit-transform: scale(0.9); transform-origin: left; -webkit-transform-origin: left;}\n.smaller {font-size: 12.5px; display: inline-block; transform: scale(0.8); -webkit-transform: scale(0.8); transform-origin: left; -webkit-transform-origin: left;}\n.bt-text {font-size: 12px;margin: 1.5em 0 0 0}\n.bt-text p {margin: 0}\n</style>\n</head>\n<body>\n<div class=\"wrapper\">\n<header>\n<h2 class=\"title\">\nArNext 重新定义永久应用\n</h2>\n\n<h4 class=\"meta\">\n\n\n2024-10-11 17:38 北京时间&nbsp;&nbsp;&nbsp;<a href=https://www.jinse.cn/blockchain/3699321.html><strong>PermaDAO</strong></a>\n\n\n</h4>\n\n</header>\n<article>\n<div>\n<p>ArNext 是一个基于 NextJS 的框架，允许开发者在 Vercel 和 Arweave 上部署相同代码库，实现永久应用的云端性能优化。它克服了传统永久应用在动态内容加载慢、仅支持根 URL、缺乏社交媒体卡片等限制。通过结合 NextJS 的服务器端渲染和 Arweave 的客户端路由，ArNext 实现了在两个平台上的无缝运行。其核心优势是提供了一种方法，使开发者既能构建云端优化的 Web...</p>\n\n<a href=\"https://www.jinse.cn/blockchain/3699321.html\">网页链接</a>\n\n</div>\n\n\n</article>\n</div>\n</body>\n</html>\n","isBrief":false,"type":0,"news_type":1,"symbol":"SPA","symbol_name":"斯巴顿","start_time":0,"source_url":"https://www.jinse.cn/blockchain/3699321.html","article_id":"2474806324","we_media_id":null,"thumbnails":["https://static.tigerbbs.com/data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAH5SURBVHgB7VXBUQJBEJxZqiykfFwGnhGIEQgZyEMt/HAbgRgBEIESwcLLAh+QgWQARCBmwAstq7h15m454Gr3OP7Mi73d6Z7p7R0ATnEgMM8hpd59AFEGCL34i1hS6kLKh9mhXHSDKk+Ii2etw4CWvuPYgiAmWq87UtYXuQn6/Y+W1roJoL0U0HeUhOLakJYTIBTtRuO+k0nAUiAWFAFXeE0kXZKj55Iilg7aBN4wn2bUcW23G9wHF59cGQHPCTjIo3E6l7slkuqGBOMDykMsTbfgPxUp5RKOCKVGhPHHJOW4k1WVMUTEgqXWIXAugioNlBrc2QikrC21PqsyOJMYTEClhrTQ03Rr6ej1Bl+wdROdXd3YC4nuccoGYTyBCK+8QQun1UzV/s4n+l10dFLnQiM3EVFLbLfQA2eElj2dcUfbPcGPJGbDlrGdJYpjiN5CEvSKn8a2k8ZRkf5aw4ugliax34FcIEZ8mekkvsAgeLyihBq1L1l/OzjnIhOzYbpsc2NTu8XgiIjBzyekBL/yxARiUyG/QCMDW2zqlssGPizvg4dJgZZRIUaQzBjsZQ0yY3EeE01znueVtI6KFFF7c1EmZqayeZSEhUszr3wDQwqsSfN6O42VMa6TQXYLGeOaSPsAv2+uO8v5h8Maa3//DyecuaQ7xVHxD4rDJjfZUTFuAAAAAElFTkSuQmCC?op=imageView2&mode=2&width=256&height=256&quality=70&format=png"],"rights":{"source":"jinse_stock","url":"https://www.jinse.cn/blockchain/3699321.html","rn_cache_url":null,"directOrigin":true},"url":"https://stock-news.laohu8.com/highlight/detail?id=2474806324","pubTimestamp":1728639503,"sourceInfo":{"source_id":"jinse_stock","name":"金色财经"},"weMediaInfo":null,"summary":"ArNext 是一个基于 NextJS 的框架，允许开发者在 Vercel 和 Arweave 上部署相同代码库，实现永久应用的云端性能优化。","collect":0,"end_time":0,"defaultTopTitle":"jinse.cn","property":[],"viewcount":null,"language":"zh","relate_stocks":{"SPA":"斯巴顿","SSG":"ProShares UltraShort Consumer Services","MPA":"黑岩宾州投资"},"translate_title":"ArNext redefines permanent applications","themeId":null,"isJumpTheme":false,"ttsUrl":null,"symbols_score_info":{"MPA":1,"SPA":1,"SSG":1},"content_text":"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 开发者的灵活性和效率。","kind":null,"is_publish_news":true,"is_publish_highlight":false,"is_publish_live":false,"is_publish_wemedia":null,"editions":null,"column":"","sentiment":"0","news_tag":"","news_rank":0,"symbols":[],"gpt_button":1},"commentList":[],"isCommentEnd":true,"newsSizeData":{"likeSize":0,"commentSize":0,"repostSize":0,"favoriteSize":0,"likeStatus":false,"favoriteStatus":false},"APP":{"userAgent":"Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)","isDev":false,"isTTM":false,"deviceId":"web-server-community-laohu8-v3","version":"4.29.1","shortVersion":"4.29.1","platform":"web","vendor":"web","appName":"laohu8","isIOS":false,"isAndroid":false,"isTiger":false,"isTHS":false,"isWeiXin":false,"isWeiXinMini":false,"isWeiBo":false,"isQQ":false,"isBaiduSwan":false,"isBaiduBox":false,"isDingTalk":false,"isToutiao":false,"isOnePlus":false,"isHuaWei":false,"isXiaomi":false,"isXiaomiWebView":false,"isOppo":false,"isVivo":false,"isSamsung":false,"isMobile":false},"href":"/m/news/2474806324"}