用过nuxt2的都知道nuxt不仅仅是一个服务端渲染框架，它还具备纯客户端渲染和静态渲染的能力。在nuxt3上，也保留了这三种渲染模式，并增加了一种新的混合模式，即可以通过路由单独设置渲染模式。1.开箱即用的纯客户端渲染，在浏览器（或客户端）中渲染的传统Vue.js应用程序。在这种模式下，Vue.js在浏览器下载并解析所有包含创建当前界面的指令的JavaScript代码后生成HTML元素。虽然这种技术允许构建具有平滑页面转换的复杂和动态UI，但它具有不同的优点和缺点。优点快速开发：当完全在客户端工作时，我们不必担心代码的服务器端兼容性，例如，通过使用像window对象这样的仅限浏览器的API。部署成本低：**运行服务器会增加基础设施的成本，因为你需要在支持JavaScript的平台上运行。我们可以在任何带有HTML、CSS和JavaScript文件的静态服务器上托管纯客户端应用程序。可离线访问：**因为代码完全在浏览器中运行，所以在互联网不可用时也能正常运行。缺点性能：用户必须等待浏览器下载、解析和运行JavaScript文件。根据下载部分的网络和解析和执行部分的用户设备，这可能需要一些时间并影响用户体验。搜索引擎优化：通过客户端呈现服务的内容的索引和更新比服务器呈现的HTML文档需要更多的时间。这与我们讨论的性能缺陷有关，因为搜索引擎爬虫在第一次尝试索引页面时不会等待界面完全呈现。使用纯客户端呈现，您的内容将需要更多时间在搜索结果页面中显示和更新。应用场景对于不需要索引或用户频繁访问的交互性强的Web应用程序，客户端呈现是一个不错的选择。可以利用浏览器缓存，跳过下载阶段，方便后续访问，如SaaS、Admin管理系统或网络游戏等。2.服务端渲染当浏览器请求一个启用了服务端渲染的URL时，服务器端将向浏览器返回一个完全呈现的HTML页面。不管这个页面是预先生成并缓存，还是动态渲染，在某个时候，Nuxt已经在服务器环境中运行了JavaScript（Vue.js）代码来生成HTML文档。用户立即获取我们应用程序的内容，而不是客户端呈现。此步骤类似于由PHP或Ruby应用程序执行的传统服务器端呈现。为了不失去客户端渲染方式的好处，比如动态界面和页面转换，一旦下载了HTML文档，客户端就会在后台加载在服务器上运行的javascript代码。浏览器再次解释它（因此是通用渲染），Vue.js控制文档并启用交互性。使静态页面在浏览器中交互称为“Hydration”。服务器端渲染使Nuxt应用程序具有更快的页面加载时间，同时保留客户端渲染的优势。此外，由于内容已经存在于HTML文档中，搜索引擎爬虫可以在没有开销的情况下对其进行索引。优点性能：用户可以立即访问页面内容，因为浏览器可以比JavaScript生成的内容更快地显示静态内容。同时，Nuxt在客户端重新渲染期间保留了Web应用程序的交互性。SEO：通用渲染将页面的整个HTML内容作为经典服务器应用程序提供给浏览器。Web爬虫可以直接索引页面内容，使UniversalRender成为您想要快速索引任何内容的最佳选择。缺点开发限制：服务器和浏览器环境不提供相同的API，编写在两者上无缝运行的代码可能很棘手。幸运的是，Nuxt提供了指南和特定变量来帮助您确定一段代码的执行位置。成本：需要运行服务器以动态呈现页面。就像任何传统服务器一样，这会增加每月的成本。然而，由于通用渲染，浏览器接管了客户端导航，服务器调用大大减少。应用场景Universalrendering用途广泛，几乎可以适用于任何用例，尤其适用于任何面向内容的网站：博客、市场、电子商务网站等。客户端渲染和服务器端渲染是不同的策略用于在浏览器中显示界面。默认情况下，Nuxt使用UniversalRendering（服务器端渲染）来提供更好的用户体验和性能，并为搜索引擎优化索引，但您可以在一行配置中切换渲染模式。exportdefaultdefineNuxtConfig({ssr:false//...othersetting})3.预渲染使用nuxigenerate命令构建应用程序。对于每个页面，Nuxt使用爬虫生成相应的HTML和有效负载文件。构建的文件将在.output/public目录下生成。您可以在构建过程中手动指定Nitro获取和预渲染的路由。defineNuxtConfig({nitro:{prerender:{routes:['/user/1','/user/2']}}})预渲染可以解决纯静态渲染的缺点，即可以保证用户访问时页面加载速度更快，并且还允许搜索引擎爬虫对页面内容进行索引。但是，预渲染对于动态路由来说可能很棘手。4.混合渲染（??Nuxt3中的新功能）在大多数情况下，Nuxt2中执行的通用渲染提供了良好的用户和开发人员体验。然而，Nuxt3通过引入混合渲染和CDN渲染，将通用渲染更进一步。混合渲染允许使用路由规则为每个路由制定不同的渲染规则，并决定服务器应该如何响应给定URL上的新请求。以前Nuxt应用程序和服务器的每个路由/页面都必须使用相同的渲染模式，客户端或服务器。但在各种情况下，一些页面可以在构建时生成，而其他页面应该在客户端呈现。例如，考虑一个带有管理部分的内容网站。每个内容页面应该大部分是静态的并且只生成一次，但是管理部分需要注册并且表现得更像一个动态应用程序。从rc.12开始的Nuxt3带有公测路由规则和混合渲染支持。使用路由规则，你可以为一组nuxt路由定义规则，改变渲染模式，或者根据路由指定缓存策略！Nuxt服务器会自动注册相应的中间件，并使用nitro缓存层将路由与缓存处理程序进行打包。只要有可能，路由规则将自动应用到部署平台的本地规则（目前支持Netlify和Vercel）。redirect-定义服务器端重定向。ssr-禁用部分应用程序的服务器端呈现并使其成为SPA-only，使用ssr:false。cors-使用cors:true自动添加cors标头-您可以使用标头覆盖自定义输出。标头-将特定标头添加到您的站点。static-静态支持单个（按需）构建；swr-swr支持可配置TTL的静态构建。（完全增量静态构建目前可在Netlify上使用，Vercel即将推出）。示例如下：exportdefaultdefineNuxtConfig({routeRules:{//静态页面按需生成，后台revalidates'/blog/**':{swr:true},//静态页面按需生成一次'/articles/**':{static:true},//设置自定义标头匹配路径'/_nuxt/**':{headers:{'cache-control':'s-maxage=0'}},//使用SPA呈现这些路由'/admin/**':{ssr:false},//添加cors标头'/api/v1/**':{cors:true},//添加重定向标头'/old-page':{redirect:'/new-page'},'/old-page2':{redirect:{to:'/new-page',statusCode:302}}}})5.RenderonCDNEdgeWorkers（Nuxt3新增）传统模式下，服务端渲染只能使用Node.js。Nuxt3通过直接在CDNEdgeWorkers中渲染代码，将其提升到另一个层次，减少了延迟和成本。Nitro是支持Nuxt3的新服务器引擎。它为Node.js、Deno、Workers等提供跨平台支持。Nitro的设计与平台无关，允许Nuxt应用程序在边缘呈现，更接近您的用户，允许复制和进一步优化。更多信息可以在nuxt3官方文档中找到
