文章目录
服务端渲染和客户端渲染
客户端渲染和服务端渲染是页面渲染的两种方式。
客户端渲染CSR
客户端渲染则是在浏览器端使用js、html、css 以及前端框架（vue、React）等前端技术动态地生成和更新页面内容。
优点：
- 提供更好的用户体验和交互性，由于页面内容的生成和更新是在浏览器端进行的，可以更快地响应用户的操作，减少页面刷新的延迟
- 前后端分离的开发方式，可以提高开发效率。
缺点：
- 性能较低的设备或网络较差的环境可能会导致加载和渲染速度变慢
- 需要考虑搜索引擎优化（SEO）等问题
- 客户端渲染的页面数据不易被爬虫获取
- 非前后端分离的开发方式
适用
- 一般适用于前后端分离的开发项目
服务端渲染SSR
服务器端渲染是在服务器上生成完整的HTML页面，然后将其发送到浏览器进行展示。
优点：
- 数据容易被抓取
- 对seo优化友好
缺点： - 对服务器的要求比较高
为什么说服务端渲染比客户端渲染seo更友好
seo的本质
seo 本质是一个服务器（搜索引擎）向另一个服务器（我们的网站）发起请求，获取内容（这个过程就是爬虫），并解析请求内容。但一般来说搜索引擎是不会去执行请求到的JS的（只获取html内容）。（爬虫为seo服务）
即seo只解析html，不解析JS
原因
seo更友好说明容易被爬虫到，而爬虫爬取的是html的内容 .如果我们希望我们的网站被抓取和索引，我们必须为他们提供HTML。
-
为什么说客户端渲染不友好？
客户端渲染是指在前端进行页面的渲染，其中包含js内容进行页面的渲染（如循环遍历添加图片），但是搜索引擎大多数不识别js渲染出来的内容，所以seo不友好。 -
为什么说服务端渲染友好呢？
服务器端渲染是在服务器上生成完整的HTML页面，然后将其发送到浏览器进行展示，所以他的内容就是通过html渲染的，搜索引擎很容易抓取到，所以说seo友好。
Vue的客户端渲染和服务端渲染
客户端渲染
客户端vue seo不友好的原因
vue的客户端渲染一般就是前后端分离的开发方式，就是前端使用vue脚手架搭建的前端项目,seo不友好的原因：
- 搭建起来的是一个单页应用（SPA），SPA通过JS动态渲染，流程一般是用过JS获取数据然后在模板展示，但是搜索引擎获取页面时不解析JS，所以获取到的模板信息也是没有数据的html，只是个变量名，所以seo不友好。
- SPA需要加载大量的JS脚本和资源，而搜索引擎会认为该页面的加载速度过慢，从而降低了收录和排名的权重
- 注意：搜索引擎抓取的内容不等于检查中元素的内容，检查中的内容是浏览器最终渲染的内容，搜索引擎抓取的是没有js解析的内容。
案例
<template>
<div>
<h1>{
{ count }}</h1>
<button @click="increment">Increment</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0,
};
},
methods: {
increment() {
this.count++;
},
},
};
</script>
服务端渲染
vue的服务端渲染需要依赖于 vue-server-renderer
案例
上面客户端渲染例子对应的服务端渲染的代码：
const express = require('express');
const app = express();
const Vue = require('vue');
const renderer = require('vue-server-renderer').createRenderer();
app.get('/', (req, res) => {
const vm = new Vue({
template: `
<div>
<h1>{
{ count }}</h1>
<button @click="increment">Increment</button>
</div>
`,
data() {
return {
count: 0,
};
},
methods: {
increment() {
this.count++;
},
},
});
renderer.renderToString(vm, (err, html) => {
if (err) {
res.status(500).send('Internal Server Error');
} else {
res.send(`
<html>
<head>
<titleVue.js 服务端渲染和客户端渲染的区别</title>
</head>
<body>
${
html}
</body>
</html>
`);
}
});
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
vue-server-renderer的其他用法：
在vue-server-renderer2.5.0+中，如果renderToString没有传入回调函数就会返回Promise对象:
const Vue = require('vue')
// 创建vue实例
const app = new Vue({
template: '<div>Hello</div>'
})
// 创建渲染函数
const renderer = require('vue-server-renderer').createRenderer()
// 将vue实例渲染为HTML页面
// renderer.renderToString(vue实例, (错误, 渲染后的html) => { })
renderer.renderToString(app, (err, html) => {
if (err) throw err
console.log(html);
})
// 在vue-server-renderer2.5.0+中，如果没有传入回调函数就会返回Promise对象
// Promise对象的成功的结果就是渲染后的html代码
renderer.renderToString(app).then(html => {
console.log(html);
}).catch(err => {
console.log(err);
})
nuxt是什么
Nuxt.js 是一个基于 Vue.js 的通用应用框架，它可以帮助我们快速开发服务器渲染的 Vue.js 应用程序（seo友好）。它提供了一些默认配置和约定，使得我们可以轻松地构建和部署应用程序。
nuxt的特点
Nuxt.js 具有以下特点：
服务器端渲染（SSR）：Nuxt.js 可以在服务器端进行渲染，生成静态的 HTML 文件，并在客户端进行交互。这有助于提高应用程序的性能和搜索引擎优化，seo友好。自动路由配置：Nuxt.js 根据文件结构自动生成路由配置，无需手动配置每个页面的路由。预处理器支持：Nuxt.js 内置了对流行的 CSS 预处理器（如 Sass、Less、Stylus）的支持，使得样式的编写更加灵活和高效。插件系统：Nuxt.js 提供了一个插件系统，可以轻松地集成第三方模块和库，扩展应用程序的功能。静态文件服务：Nuxt.js 可以将静态文件（如图片、样式、脚本）直接提供给客户端，无需额外的配置。
nuxt服务搭建
安装
- 法一：
vue init nuxt-conmuunity/starter-template 项目名：使用vue创建一个nuxt模板的矿建 - 法二（推荐）：
npx create-nuxt-app 项目名运行该命令设置一些项目的基本配置。 - 法三（npm）：若你的 npm 的版本是 6.1 及以上，你可以选择使用 npm 运行
先安装：npm i -g create-nuxt-app
再使用：npm init nuxt-app@latest 项目名
项目目录
- editorconfig:代码的高亮配置
- nuxt.config.js:nuxt的配置文件