4.16-《手把手教您使用Nuxt3框架(Nuxt3中文开发教程)》渲染模式

《手把手教您使用Nuxt3框架(Nuxt3中文开发教程)》全文电子档将分章节陆续在“nuxt”微信订阅号原创发布，敬请关注。如果您等不及，急切提前阅读和实操，可以在订阅号中有偿获取完整电子教程和后续持续更新版本。
本教程配套示例在线预览网址：https://www.dvtop.cn

渲染是js组件转换为HTML元素，浏览器和服务端都可以解释JavaScript代码来渲染Vue。Nuxt3支持客户端和通用渲染。

用户访问或刷新网站时，此时Nuxt3服务端渲染整个网站（含api cache数据）和刷新当前面api数据返回给用户浏览，如果后期在访问某个页面时，需要请求后台数据都是属于客户端在请求和渲染，HTML代码不会改变。

process.client和process.server是静态变量，在服务端渲染时process.server一直为true，打包返回给客户端后process.client一直为true，可以明确代码段在那端执行。使用这个判断时，如果涉及当前访问或刷新页面两端在页面展示的数据不一致，会出现Hydration node mismatch之类的异常，需注意处理。

渲染流程：客户端访问-->服务端根据routeRules、ClientOnly和process等决定那些页面和内容在服务端获取数据并渲染，打包成HTML和JS-->客户端显示HTML-->客户端根据事件直接获取数据后由客户端渲染。详细流程图可以查看前面章节“渲染流程”。

4.16.1 客户端渲染

传统的Vue渲染方式。在浏览器下载并解析包含创建当前界面的指令的所有JavaScript代码后生成HTML元素。

一、渲染优缺点

对于不需要索引或用户频繁访问的高度交互式web应用程序，客户端渲染是一个很好的选择。他可以利用浏览器缓存在后续访问（如SaaS、后台应用程序或在线游戏）时跳过下载阶段。

1、优点

开发速度：当完全在客户端工作时，不必担心代码的服务端兼容性，例如，通过使用浏览器专用API（如window对象）。

更便宜：服务端渲染会增加基础设施的成本，因为需要在支持JavaScript的平台上运行。客户端渲染可以在任何带有HTML、CSS和JavaScript文件的静态服务器上托管仅限客户端的应用程序。、

离线：因为代码完全在浏览器中运行，所以当互联网不可用时，他可以很好地保持工作。

2、缺点

性能：用户必须等待浏览器下载、解析和运行JavaScript文件，这需要一些时间并影响用户的体验。

搜索引擎优化（SEO）：搜索引擎爬虫不会尝试索引页面时等待界面完全呈现，导致网站每页内容都是一样。

二、通过generate生成的完全静态网站

通过构建命令npm run generate可以把项目打包为SPA，将.output/public内容部署为静态网站（如部署到Apache、IIS、GFE、Nginx等）即可使用。

generate命令预先构建应用程序的每个路由，并将结果存储在纯HTML文件中。该命令触发nuxi build命令，prerender参数设置为true。

通过此种方法构建和部署，是纯粹的客户端渲染方式。

三、通过routeRules设置指定路由的渲染方式

通过对以下文件的配置后，将所有路由ssr关闭，即整个网站为客户端渲染。

此部分将在“nuxt”微信订阅号原创发布，csdn同步更新，敬请关注。如果您等不及，急切提前阅读和实操，可以在订阅号中有偿获取完整电子教程和后续持续更新版本。

4.16.2 服务端渲染

当浏览器请求URL时，服务端会向浏览器返回完全呈现的HTML页面。无论页面是预先生成并缓存的，还是动态呈现的，Nuxt3都会在服务器环境中运行JavaScript（Vue.js）代码，生成HTML文档。与客户端呈现相反，用户可以立即获得应用程序的内容。这一步骤类似于JSP、PHP或Ruby应用程序执行的传统服务端渲染。

此部分将在“nuxt”微信订阅号原创发布，csdn同步更新，敬请关注。如果您等不及，急切提前阅读和实操，可以在订阅号中有偿获取完整电子教程和后续持续更新版本。

4.16.3 混合渲染

混合呈现允许使用路由规则对每条路由使用不同的缓存规则，并决定服务器应如何响应给定URL上的新请求。

1、通过routeRules设置指定路由的渲染方式

2、通过代码明确为客户端渲染

此部分将在“nuxt”微信订阅号原创发布，csdn同步更新，敬请关注。如果您等不及，急切提前阅读和实操，可以在订阅号中有偿获取完整电子教程和后续持续更新版本。

4.16.4 边缘计算渲染

传统上，服务端和混合渲染只能使用Node.js。Nuxt 3通过在CDN边缘计算中直接呈现代码，降低延迟和成本，将其提升到另一个层次。例如：Akamai面向开发人员提供的边缘无服务器计算服务EdgeWorkers已正式发布。

此部分将在“nuxt”微信订阅号原创发布，csdn同步更新，敬请关注。如果您等不及，急切提前阅读和实操，可以在订阅号中有偿获取完整电子教程和后续持续更新版本。