Plain React应用程序之所以被称为SPA,是因为它们只有一个html页面,即index.html。但next.js的情况并非如此。那么我们可以将next.js应用程序称为单页应用程序吗?
好问题。
通常,我们不会将引擎称为SPA。例如,React可以执行SPA,但它也可以执行非SPA工作。这同样适用于NextJS。
只是跟着你的字典走NextJS由于其混合性质,默认情况下不基于SPA,因为它将每个页面发布为/pages
下所有内容的单独入口点。当然,如果您只有一个页面index.js
,那么从技术上讲,它又是一个SPA。我想这取决于你的页面结构。
是的,即使您创建了许多页面,我们也可以将nextjs称为SPA,但要保持原样,您应该使用客户端转换(没有<a>
标记(。
首先,SPA=单页应用
我想问题是SPA与MPA(多页应用程序(答案是Nextjs可以同时做这两件事,这取决于你是否使用下一个链接https://nextjs.org/docs/api-reference/next/link
这将在不从服务器重新加载页面的情况下执行客户端转换,假设您的页面是静态的并且不使用getServerSideProps((。您可以通过查看Chrome调试工具中的网络来检查这一点。这是怎么回事?在第一次加载页面时,所有页面都加载到vdom内的js中,任何页面都可以从客户端js而不是从服务器注入到浏览器dom中。
为了给它一个MPA行为,你还可以用一个简单的html锚标记<a>
链接一个相对的页面,它将从服务器重新加载页面,因为a标记不使用js。这样做有什么好处?也许从下一个开始保持代码干净,如果你把react vdom搞砸了(你不应该这样做(,你肯定会再次得到一个新的页面。这样做的一个缺点是,无论如何,您都是在js中初始加载所有内容的,因此使用锚点重新加载是浪费资源和加载时间的。
注意,使用PWA(Progressive Web App(也是优化用户体验的一种选择,nextjs也支持它看见https://nextjs.org/docs/faq和https://github.com/vercel/next.js/tree/canary/examples/progressive-web-app