Vu基础及其开发6

第十章服务器端渲染技术学习目标熟悉页面渲染技术熟悉服务器端的使用服务器端渲染（Server-SideRendering，SSR）是一种将网页的渲染过程从客户端（浏览器）转移到服务器端的技术。它在服务器端生成网页的HTML，然后将它发送给浏览器，这样浏览器可以更快地加载网页并提供更好的用户体验。本章就来介绍下前端开发中常见的页面渲染技术以及服务器端渲染技术的使用。页面渲染技术12服务器渲染的使用页面渲染技术页面的渲染是指将数据和模板转换成可视化网页的过程。根据不同的情况使用到的渲染技术也有所不同，这些渲染技术有客户端页面应用渲染技术CSR、服务器端渲染SSR、预渲染和静态网站生成器SSG。下面就来介绍下这几种渲染技术的特点和区别。页面渲染技术1．客户端渲染技术—CSR客户端渲染（Client-SideRendering，CSR）是一种在浏览器端使用JavaScript来动态生成HTML和CSS的页面渲染技术。在客户端渲染中，浏览器首先加载页面的静态资源（HTML、CSS和JavaScript），然后通过异步请求（如AJAX或WebSocket）获取数据，并使用JavaScript动态生成页面内容。即使是Vue构建的SPA单页面应用，除了index.html模板页面外，其他的组件会通过webpack等方式打包成css、js等静态资源文件，然后交给浏览器进行渲染，因此传统的SPA应用也属于是CSR渲染的应用。客户端渲染的优点在于可以提供更好的交互体验和动态性，因为页面内容可以动态更新，用户可以更快地与页面进行交互。此外，客户端渲染可以充分利用浏览器的缓存机制，减少对服务器的请求，提高性能和效率。同时，客户端渲染还可以降低服务器的负担，因为大部分渲染工作都在客户端完成。然而，客户端渲染也存在一些缺点。首先，由于需要异步请求数据并生成页面内容，所以页面首次加载时间较长，影响用户体验。其次，由于页面内容是动态生成的，对搜索引擎的爬取不够友好，影响SEO（SearchEngineOptimization，搜索引擎优化，友好的SEO可以提高网站的排名）。此外，客户端渲染对浏览器的性能要求较高，低端设备可能存在卡顿和性能问题。

页面渲染技术2．服务器端渲染技术—SSR服务器端渲染（Server-SideRendering，SSR）是一种在服务器端生成HTML，然后将其发送到客户端展示的页面的渲染技术。在服务器端渲染中，浏览器首先发送网络请求到服务器，服务器处理请求并生成HTML代码，然后将其返回给客户端进行展示。因为页面的代码获取到的时候服务器已经渲染好了，所以首页面加载速度快；并且搜索引擎爬虫可以直接看到完全渲染的页面，而无需通过JavaScript解析，所以SEO友好度也高。服务器端渲染的优点如下：可以提高首次加载速度和SEO友好度，因为页面内容是在服务器端生成的，可以直接发送给浏览器展示，不需要等待JavaScript加载和解析。服务器端渲染对浏览器性能的要求较低，适用于低端设备和网络较慢的情况。另外，服务器端渲染也可以更好地控制页面的内容和安全性，因为所有渲染逻辑都在服务器端运行。

页面渲染技术然而服务器端渲染也存在如下的一些缺点：代码复杂度变高，需要使用一些SSR框架搭配客户端应用进行开发，搭建和开发的难度变大。对服务器的负载较大：因为需要在服务器端进行渲染和处理。服务器端渲染对动态内容和交互性应用的支持较弱，因为页面内容是在服务器端生成的，不能及时响应用户的操作。在实现服务器端渲染时，可以使用各种后端框架（如Express、Koa等）来生成HTML页面和处理请求。同时，需要注意渲染逻辑的复杂性和性能问题，需要对数据预取、缓存、性能优化等方面进行优化和调整，以提高性能和用户体验。是否需要使用SSR进行页面渲染，主要取决于首屏加载速度和SEO对应用的重要程度，例如如果开发的是一个公司内部的管理系统，初始页面加载的几百毫秒可以完全忽略，并且也不需要使用SEO提高网站的排名，这种情况就没有必要使用SSR。但是如果是应用页面内容展示速度极其重要，那么就需要使用SSR进行渲染应用。

页面渲染技术3．预渲染技术预渲染（Prerendering）是一种在构建时生成静态HTML文件的页面渲染技术，用于在页面部署到服务器前将其预先渲染成HTML文件。与服务器端渲染（SSR）不同的是，预渲染是在构建时进行，而不是在网络请求时进行。预渲染的优点在于可以提高页面的加载速度和SEO友好度，因为预先生成的HTML文件可以直接发送到浏览器展示，无需等待JavaScript加载和解析。同时，预渲染可以更好地支持动态内容和交互性应用，因为可以通过编写脚本来更新页面内容和状态。预渲染的缺点在于预渲染需要在构建时生成HTML文件，如果页面内容频繁变化，就需要重新构建和生成HTML文件，增加了开发成本和构建时间。其次，预渲染不能直接响应用户的操作，因为页面内容是在构建时生成的静态HTML文件，无法实现动态交互。

页面渲染技术4．静态网站生成器—SSG静态站点生成（StaticSiteGeneration，SSG），是一种在构建时生成静态HTML文件的页面渲染技术，类似于预渲染（Prerendering）。但与之不同的是，SSG是在构建时生成所有可能的页面，并将这些页面存储为静态文件。当用户访问某个页面时，服务器将直接返回相应的静态文件，无需进行任何计算和渲染。SSG保留了和SSR应用相同的性能表现。它即带来了优秀的首屏加载性能，同时它比SSR应用的花销更小，也更容易部署，因为它输出的是静态HTML和资源文件。如果网站应用对首屏页面加载有一定的要求，但是对于SEO来说主要对一些静态内容的页面，如“关于我们”、“联系我们”等，那么这种情况下SSG比SSR更适合。在实际应用中，需要根据实际需求选择适合的渲染技术。对于要求快速响应和高交互性的应用，可以选择客户端渲染；对于对首次加载时间和SEO要求较高的应用，可以选择服务器端渲染或预渲染；对于静态网站或博客等，可以选择静态网站生成器。同时，还需要考虑技术栈、性能、安全等方面的问题。页面渲染技术12服务器渲染的使用服务器渲染的使用SSR的实现需要经过搭建服务器环境（需要在服务器上安装Node.js和相关的依赖库，如Express、Koa）、定义服务器端的路由（用于匹配客户端请求的URL，并决定如何响应该请求）、定义服务器端的组件或页面（用于渲染HTM）、处理数据（使用Axios等工具获取服务器数据并传递给组件）、渲染HTML（将组件或页面渲染为HTML），加上配置静态资源策略以及部署和测试一系列的过程。在执行渲染逻辑时，还需要考虑性能和安全性等方面的问题，如缓存、代码分割、数据预取和XSS攻击等。完整的SSR的实现会非常复杂，并且取决于开发者选择使用的构建工具链。因此，Vue官方推荐开发者使用一种更通用的、更集成化的解决方案，帮开发者抽象掉那些复杂的东西。强烈推荐的就是VueSSR生态中的Nuxt框架的实现。本节中将以Nuxt为基础学习搭建一个服务器端渲染的应用。服务器渲染的使用1．Nuxt介绍Nuxt是一个构建于Vue生态系统之上的全栈框架。它不仅能为编写VueSSR应用提供丝滑的开发体验，更棒的是Nuxt同样也支持静态网站生成器SSG应用开发。Nuxt提供了前端和后端功能，Nuxt使用Vue作为前端框架，添加了组件自动导入（未使用组件打包将不包含）和基于文件的路由（VueRouter）等功能，并且在Nuxt3中集成了Vue3，可以让开发者在Vue3的基础上进行应用的开发。Nuxt3后端使用服务器引擎Nitro，不仅支持对Node.js、浏览器、服务工作者等的跨平台，还支持API路由、自动代码拆分、异步加载区块、热模块重新加载等功能。在渲染模式上，Nuxt支持客户端渲染和通用渲染（服务器端渲染和冻结），也支持完整的静态站点生成。并且在Nuxt3中，还支持可以使用路由规则对每个路由使用不同的缓存，以此来决定服务器应如何响应给定URL上的新请求的混合渲染。Nuxt使得开发者无须关注一些项目繁琐配置和优化，只需要专注于创建Web应用程序即可。服务器渲染的使用2．创建Nuxt项目在创建Nuxt项目之前，需要确保电脑上安装了Node.js最新的LTS版本或者LTS16.11+版本。然后可以使用npx命令从Github上拉取初始化的Nuxt项目模板。Npx是npm从v5.2.0新增的命令，可以用来运行包中的命令工具和可执行文件。步骤如下：①在要创建项目的目录命令终端中执行：其中nuxi是创建Nuxt3项目的一个脚手架工具，<project-name>即为要创建的项目名。项目创建成功后，会提示需要安装项目中的依赖，并告知了如何启动项目。如图所示。npxnuxiinit<project-name>服务器渲染的使用温馨提示如果创建Nuxt项目失败，可能是从GitHub仓库下载Nuxt模板时请求失败，问题的原因可能是电脑网络连接或DNS配置出现了问题，请检查网络或者使用能够正确解析域名的DNS，如114.114,114,114。安装项目依赖。可使用npm、yarn或pnpm安装，这里使用npm工具，执行如下命令：运行项目。执行“npmrundev”或“npmrundev---o”（开发模式）就可以运行Nuxt项目。如图所示。npminstall服务器渲染的使用项目运行成功后，可以看到项目浏览的地址为“http://localhost:3000/”。在浏览器中打开这个地址，可以看到Nuxt的首页面内容，如图所示。可以看到Nuxt项目的创建和我们之前创建Vue的项目大同小异，都可以使用脚手架快速访问，并且也可以使用npm或yarn进行包管理。服务器渲染的使用3．Nuxt项目结构介绍默认创建好的Nuxt项目，其实只有工程运行部署必备的一些配置文件和目录，如package.json、nuxt.config.ts、.nuxt目录等。下面我们来认识下Nuxt项目结构是怎样的，如表所示。说明.nuxtNuxt使用.nuxt目录的内容来生成的Vue应用程序，并且还提供了虚拟文件系统（VFS），可以将模板添加到此目录下无需存入磁盘，这个目录开发者也不需要修改，项目运行是会重新创建。.outputNuxt在构建用于生产的应用程序时创建的目录asset用于添加构建工具（webpack或Vite）将处理的所有网站资源，包括css和sass样式、字体等componentsVue组件存放的目录，跟Vue不同的是Nuxt会自动导入目录中的任何组件（包括使用模板注册的组件），无需开发者使用import手动导入组件composablesNuxt3使用该目录通过自动导入自动将项目中的Vue可组合物导入到应用程序中layouts布局目录，Nuxt提供了一个可自定义的布局框架，开发者可以在整个应用程序中使用，非常适合将常见的UI或代码模式提取到可重用的布局组件中。middlewareNuxt提供了一个可自定义的路由中间件框架，开发者可以在整个应用程序中使用，非常适合在导航到特定路由之前提取要运行的代码。modulesNuxt扫描目录并在开始之前加载模块内容，主要存放一些本地模块。服务器渲染的使用说明pagesNuxt提供了一个基于文件的路由，可以在Web应用程序中使用Vue路由器在后台创建路由。并且值得称赞的是，该文件将会自动映射成应用程序的路由，如：pages/user/userinfo.vue会自动生成嵌套路由“/user/userinfo”，也支持动态路由、路由导航等功能。plugins插件目录，Nuxt会自动读取目录中的文件，并在创建Vue应用程序时加载它们public该目录直接映射在服务器根目录下，并包含必须保留其名称或可能不会更改的公共文件，也被称为静态文件目录。utils实用工具目录，Nuxt3使用该目录通过自动导入整个应用程序中的帮助程序函数和其他实用程序。server服务器目录，目录中的文件主要用于编写服务器API接口或程序的，每个服务器文件都应导出一个用定义的默认函数defineEventHandler()。处理程序可以直接返回JSON数据，或用于发送响应。app.config.tsNuxt3提供了一个配置文件来公开应用程序中的反应式配置，能够在生命周期内的运行时更新它，或使用nuxt插件并使用HMR（热模块替换）对其进行编辑。app.vue该文件是Nuxt3应用程序中的主要组件,也是入口页面组件。nuxt.config.js/ts/mjsNuxt项目的配置文件，支持js、ts、mjs三种格式。tsconfig.jsonNuxt自动生成的一个文件，其中包含在Nuxt项目中使用的已解析别名以及其他合理的默认值，一般无需自定义，如果自定义了将会覆盖自动生成的路径别名。服务器渲染的使用4．Nuxt中的视图和路由Nuxt中的视图跟传统的Vue应用很像，都是默认以App.vue作为视图的入口点，并为应用程序的每个路由呈现其内容。Nuxt文件路由系统只需要在pages目录下创建对应的vue文件即可自动映射为页面路由。目录中的每个Vue文件都会创建一个相应的URL（路由）来显示文件的内容，就跟我们之前手动创建router对象一样，只不过Nuxt帮我们创建了。首先，在app.vue中使用<NuxtPage>标签用于显示路由的页面。如程序清单10-1所示。NuxtPage是VueRouter中<RouterView>组件的包装器。然后，在项目目录下创建pages目录，在pages/下分别创建index.vue和hello.vue。其中index.vue为pages目录默认访问的页面组件，当访问项目根路径“/”的时候，如果使用了app.vue中指定了路由显示，则默认显示的页面就是pages/index.vue页面。而hello.vue也被映射成了路由，可以通过路由“/hello”显示。服务器渲染的使用index.vue和hello.vue的代码如下所示。在index.vue中，路由编程式的跳转跟VueRouter的是一样的。<NuxtLink>跟VueRouter中的<router-link>是一样的，都是声明式的路由的跳转。服务器渲染的使用在Nuxt中，如果想要进行动态路由，只需要按照Nuxt规定的文件目录创建和命名即可。这里我们在pages目录下创建一个hello2目录，然后在hello2下创建一个[id].vue，如下程序所示。当在index.vue中使用<NuxtLinkto="/hello2/1">