Nuxt 框架在公司官网项目中的 SSR 原理应用及 SEO 优化处理
好久没有更新了，对关注我的朋友们表示歉意！本文的灵感来自于一个构建公司官方网站的项目。
我在做官网的时候只知道Nuxt是Vue的SSR框架。我也知道Vue的项目需要使用SSR技术进行SEO优化，所以我开发了它。在叙述之前，最好先列个提纲，方便大家选择性阅读。
SSR原理的应用 SEO优化处理 SSR原理的应用
SSR（side）服务端渲染对于前端开发者来说是熟知的，但是具体的概念以及整个配置如何实现对于很多人来说还是比较模糊的。本文主要阐述以下几点
为什么使用SSR，它与浏览器渲染的区别以及SSR做了哪些概念
在服务器端将 Vue 组件渲染成 HTML 字符串并发送给浏览器，最后将这些静态标签“激活”成交互式应用程序的过程称为服务器端渲染。
在传统的Web渲染技术如ASP、JSP等中，客户端向服务器发送请求。服务器搜索数据库等操作，拼出HTML，返回给客户端进行浏览器渲染。
在目前的SPA中，比如Vue框架，当客户端发出请求时，服务器只返回一个HTML结构：
只有执行Vue.js才能渲染出配置的数据。在执行过程中，一些代码会发出异步请求，并向服务器发送请求。然后服务器返回相应的数据继续渲染。
所以对于SPA项目来说，1.首屏渲染速度慢2.对SEO不友好
SSR是传统网页渲染技术和SPA的折衷方案：
如何构建一个可以实现SSR的项目
1.创建vue ssr项目
vue create ssr
安装依赖项
渲染器：vue--
Node.js 服务器：
npm i vue-server-renderer express -D
2.在创建的项目中添加文件夹并创建.js文件
const express = require('express');
const Vue = require('vue');
const app = express();
const renderer = require('vue-server-renderer').createRenderer();
const port = 3000;
const page = new Vue({
data(){
return{
title:'技术直男星辰'
}
},
template:`{{title}}
在该目录下执行一个简单的ssr就可以设置好了。
node ./index.js
开发中肯定会用到路由，所以需要创建一个文件夹。请注意，这与我们过去创建路由的方式不同。我们不需要直接实例化路由进行配置，而是需要编写一个工厂函数来返回实例化的路由，因为用户每次发出请求时，都必须创建一个新的路由。如果不重新创建，就会出现混乱，这就是服务器负载增加的原因。
import Router from 'vue-router' import Index form '@/components/Index'; import Detail form '@/components/Detial'; export default createRouter()=> { return new Router({ mode:'history', routes:[ {path:'/',component:Index}, {path:'/detail',component:Detail}, ]
但这还不够。我们看到ssr的构建过程需要两个入口和一个通用入口，可以理解为项目中的main.js。
src下创建app.js -.js -.js
应用程序.js
该应用程序是一个通用入口。由于是在服务器端，所以不需要在Vue实例后面添加$来挂载。
-.js
服务端入口是从app.js引入的，利用异步问题的处理，可以在用户输入URL时返回成功的Vue实例。
-.js
对于客户端入口，只需要将成功的实例挂载到#app即可。
配置 vue..js 需要安装一些依赖项
vue--/- 服务端渲染插件生成服务端包
vue--/- 客户端渲染插件生成客户端包
-env 跨平台设置和使用环境变量的脚本
const VueSSRServerPlugin = require("vue-server-renderer/server-plugin"); const VueSSRClientPlugin = require("vue-server-renderer/client-plugin"); const TARGET_NODE = process.env.WEBPACK_TAGET === 'node'; const target = TARGET_NODE ? 'server' :'client'; module.exports = { outputDir: './dist/' + target, configureWebpack: ()=>({ entry: `./src/entry-${target}.js`, devtool: 'source-map', target: TARGET_NODE ?'node' :'web', node: TARGET_NODE ?undefined : false, output: { libraryTarget: TARGET_NODE ? 'commonjs2' :undefined }, plugins: [TARGET_NODE ?new VueSSRServerPlugin() : new VueSSRClientPlugin()] }) }
配置打包.json
"scripts":{ "build:client":"vue-cli-service build", "build:server":"cross-env WEBPACH_TARGET=node vue-cli-service build --mode server", "build":"npm run build:client && npm run build:server" }
转换前文件夹中的.js
const fs = require('fs') //创建渲染器 const {createBundleRenderer} = require('vue-server-renderer'); const serverBundle = require('../dist/server/vue-ssr-server-bundle.json'); const clientManifest = require('../dist/client/vue-ssr-client-manifest.json'); const renderer = createBundleRenderer(serverBundle,{ runInNewContext:false, template:fs.readFileSync('../public/index.temp.html','utf-8'), clientManifest, }) // 中间件处理静态文件请求 app.use(express,static('../dist/client'),index:false)) app.get('*',async (req,res)=>{ try { const context = { url:req.url, title:'技术直男星辰' } const html = await renderer.renderToString(context) res.send(html) } catch(err){ res.status(500).send('服务器内部错误'); } });
刚刚在文件中引入了..//.temp.html，需要创建一个host模板文件，并在文件夹中创建.temp.html。
<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Vue ssrtitle> head> <body> <--vue-ssr-outlet--> 服务端渲染的口 body> html>
然后所有项目都构建成功。
总结一下：
SSR需要节点服务中间层发出数据请求，然后将模板编译并输出为html文件。需要两个入口文件——在不同的环境下执行不同的操作。当用户请求节点服务时，会返回新实例化的Vue和Vue，而不是只返回一个普通SPA的实例。一些配置和主机模板以及编写规则是商定的，需要像 for if 映射一样记住。
我们来聊下一个话题
SEO优化处理
由于我不是专业的SEO优化工作者，所以只能简单分享一下我在项目中遇到的一些经验：
在服务器根目录中创建.txt 文件。首次渲染时，所有接口数据必须存在于源代码中。优化路径问题。所有跳转路径均使用a标签进行跳转，不要使用事件跳转（如.push）。 TDK 中的更多页面描述以及 301 重定向 .txt 文件的使用
这个百度百科里有很详细的介绍。简单介绍一下。当爬虫想要抓取一个网站时，它会首先从服务器根目录中查找.txt文件。该文件规定了允许哪些爬虫访问网站，允许爬虫访问哪些域名进行数据采集，当然还有哪些爬虫不允许访问以及哪些爬虫不可以访问。哪些网站。可以屏蔽一些网站中比较大的文件，如图片、音乐、视频等，以节省服务器带宽；它还可以阻止网站上的一些死链接。方便搜索引擎抓取网站内容；方便建立网站地图连接，引导蜘蛛抓取页面。
书写字段含义：
user-：代表搜索引擎的类型名称。选择全部时使用*即可，例如web。
:禁止爬虫爬取的地址:/禁止爬取所有地址; ://禁止爬取该目录下的目录；:/?/禁止访问网站中所有含有问号（?）的网址；:/live/*.html 禁止访问所有带有“.htm”的网址/cgi-bin/目录下的后缀;:/.jpg$禁止抓取网页上所有.jpg格式的图片。
：允许爬取资源：.htm$ 只允许访问后缀为“.htm”的UR； ：/cgi-bin/ 这里的定义是允许爬取cgi-bin目录下的目录； : /tmp 这里的定义是允许爬行搜索tmp的整个目录
：站点地图告诉爬虫该页面是站点地图
如果你好奇的话，可以百度一下，说说一些误区：
1：网站所有内容都需要爬虫抓取，所以不需要添加文件。这个文件反正不存在，默认允许爬虫爬取所有页面。
当爬虫爬到不存在的URL时，服务器会记录404，这与正常用户访问一致。因此，为了避免出现大量日志，需要添加爬虫爬取规则。
二：将.txt文件中的所有文件设置为搜索蜘蛛抓取，这样可以提高网站的收录率。即使网站中的js和css被爬虫收录，也不会提高网站的收录率，而且还会消耗服务器性能。
首次渲染时，所有接口数据必须存在于源代码中
前面提到，由于SPA返回的页面是网页结构，只有执行框架脚本才能出现内容，所以SSR技术其实就是为了解决内容输出的问题而设计的。使用SSR，接口返回的内容会体现在源码中。这样做是为了让爬虫可以直接爬取网页内容并包含更多的关键词，从而提高网站排名。
优化路径问题
1、路径中不要携带参数，比如传递参数。路径问题对SEO也有很大的影响。路径一般分为三种：
1）。动态路径：我们常用带参数的路径，以 ? 开头。并使用 & = 拆分并传递未使用的参数。爬虫遇到这种情况，当超过三个时就会递归向下读取。抓取会导致数据丢失。而且人参不宜携带时间过长。
2）。静态路径：一般是指层次结构比较清晰，目录结构清晰，没有参数。这是爬虫爬行最节省资源的方式。当然，动态路径和静态路径爬取是一样的，但是既然你是做SEO，就必须遵守SEO的规则。
3）。伪静态路径：与路由参数类似，是利用技术将动态路径转换为静态路径的一种形式，但本质上是静态路径，如//112.html
此外，网站仅允许设置一种类型的路径，即所有动态路径或静态路径。不允许同时使用两条路径。如果有第二个连接，则必须将其阻止，也可以使用.txt 来阻止它。 2.将路径名更改为小写
3. 不能使用汉字作为域名
爬虫根本无法识别这种路径形式，基本不会被爬取。可以使用拼音或英文。
4. 使路径名和级别尽可能短。如果存在以前包含但不再需要的链接，请使用 301 重定向到新域名。这会将这个网站的权重转移到另一个网站。
所有跳转路径均使用a标签跳转，不要使用事件跳转（如.push）
当爬虫爬取一个网站时，它会沿着a标签继续访问该网站。如果写了一个事件，并使用路线来跳转，那么爬虫将无法读取脚本并收录更多相关的网站。
TDK 中的更多页面说明
T网站首页的标题是最重要的，直接影响整个网站的排名。
技术直男明星
它是我们整个网站的核心关键词或者服务领域的浓缩和提炼。在首页设置标题T时，尽量使用分词技术。百度会对标题进行组合和分解。用英文-_分隔。首页标题的总字数不能超过30个汉字，否则可能导致标题显示不完整。在
首页怎么写：一般是“网站名称-主要关键词或包含关键词的描述”。一般把主关键词放在前面，因为搜索引擎给标题前面的词比后面的词赋予更高的价值。栏目页书写方式：一般有两种方式，“栏目名称-网站名称”、“栏目名称、栏目关键词-网站名称”。比如企业招聘栏目，最好使用企业招聘，而不是不常见或难以识别的名字，比如来自公司的人、参观公司的人等，虽然个性化，但对优化并不友好。列表页书写方式：“列表页名称-栏目名称-网站名称”。文章详情页怎么写：有“文章标题-网站名称”、“内容标题-栏目名称”、“内容标题-栏目名称-网站名称”三种。最后一种是最规范的，可以给用户很好的提示。
是网站关键词集合标签
字数一般控制在150字以内。如果太长，将无法正常显示。百度移动搜索网站优化网站优化白皮书提到：百度不承诺严格按照和的内容显示标题和摘要，特别是摘要，会根据和检索到的关键词自动匹配并显示合适的摘要内容。用户，让用户了解网页的主要内容并影响用户的行为决策。 （本段内容来自百度搜索资源平台）
K关键字设置\
主页写作方法：一般将主页的标题、关键词以及一些专题栏目内容融入其中，并写上简单的介绍。栏目页写法：一般将栏目标题、关键词、类目列表名称组合成简介。列表页面写作方法：一般将列表标题和关键词组合成简介。文章详情页怎么写：一般将文章标题和文章内容组合成简介。
主要作用是告诉搜索引擎这个页面的内容是围绕哪些词展开的。因此，每个单词必须在内容中找到对应的匹配项，以利于排名。一般不超过3个，每个关键词不宜太长，单词之间用英文“,”分隔。然而，各大搜索引擎对关键词堆叠的打击却很大。目前，百度等搜索引擎不再对关键词进行检查和收录，而是主要使用第三方工具来检查和统计关键词的排名。比如我们使用站长工具查询，就需要添加它。首页写法：一般为“网站名称、主要栏目名称、主要关键词”。栏目页书写方式：一般为“栏目名称、栏目关键词、栏目分类列表”。列表页写法：‘栏目主关键词’。文章详情页怎么写：提取一些文章关键词或者经常重复的词。 ，使用
: 是html的属性值。它将存在于a标签和meta标签中。它告诉爬虫不要点击这个网页上的链接或者不要点击这个链接，比如一些重要性不高的链接或者一些不需要排名的链接。使用时，可以利用爬虫增加重要链接的权重，以利于网站权重集中，减少权重分散。
<meta name="robots" content="nofollow" /> <a href="www.XXX.com" rel="nofollow">a>
：HTML中标准化URL的属性值。例如，多个URL可以同时访问一个网页。然后我们告诉爬虫这个页面的首选URL是什么。这个指定的URL是最有价值和最标准化的页面。
<link href="canonical" href="http://www.XXX.com/newWebsite">
301重定向
301是浏览器发送http请求时服务器响应的状态码，表示该页面已被永久移动。也称为重定向。一般来说，新旧网站的更换需要将.php更改为.html。这种情况下，如果不做重定向，用户收藏夹或搜索引擎数据库中的旧地址只会让访问的客户得到404页面错误信息，访问流量就会白白流失。使用301重定向不仅可以自动重定向页面，还可以告诉用户您已更改为新的URL。同时也告诉搜索引擎这是真实的URL。搜索引擎只会对重定向后的新URL进行索引，同时将旧地址的权重转移到新地址上，这样网站的排名就不会受到URL的影响。受变化影响。
同时，当网站注册多个内容重复的域名时，需要使用301让用户跳转到其中一个主域名，以避免搜索引擎的处罚。当然，301是服务器语言，由IIS实现，无法通过纯前端技术实现，但使用Nuxt作为中间层。在Nuxt执行环节的开始，即服务器端，也可以实现301跳转。
如果这篇文章对您有帮助或启发，我将非常高兴