vue如何实现服务端渲染

一、服务端渲染

1. 服务器端渲染：后端先调用数据库，获得数据以后，将数据和页面元素进行拼装，组合成完整的 html页面，再直接返回给浏览器，以用户浏览，也就是说明数据和页面是由服务器所去完成，返回浏览器展示。
2. 客户端渲染：数据由浏览器通过 ajax 动态取得，再通过 js 将数据填充到 DOM 元素上最终展示到网页中，这样的过程叫做客户端渲染。
3. 服务器端渲染与客户端渲染的区分：数据由服务器端填充就是服务器端渲染，数据由客户端填充就是客户端渲染。
4. 服务器端渲染与客户端渲染的优缺点比较：

• 服务端渲染需要消耗更多的服务器端资源(CPU，内存等)
• 客户端渲染可以将静态资源部署到 CDN 上，实现高并发
• 服务端渲染对 SEO 更友好

二、vue 的服务端渲染SSR

1. vue 服务端渲染可以使用 NUXT 框架，以下就是创建 NUXT 项目的步骤。
2. 通过 npx nuxt-create-app nuxt-hello 命令创建 nuxt项目, nuxt-hello 是项目名称。
3. 通过 cd nuxt-hello 命令切换到nuxt项目中。
4. 通过 npm run dev 命令运行 nuxt 项目。
5. 通过在浏览器输入 http://localhost:3000/ ，就可以看到项目，如下所示：