大前端搜索技术之Nuxt.js

举报
tea_year 发表于 2025/09/30 16:09:28 2025/09/30
【摘要】 Nuxt.js 是 Vue.js 生态下专注解决 SEO 问题的服务端渲染(SSR)框架,专为需搜索引擎优化的前端场景设计,可兼顾 Vue 开发体验与服务端渲染优势。 其核心价值在于破解 Vue 客户端渲染的 SEO 短板 —— 客户端渲染中搜索引擎爬虫难以解析 JS 生成的内容,而 Nuxt.js 部署于 Node.js,接收请求后先从服务端获取数据,完成 HTML 渲染再响应给浏览器,生成的完

一、搜索前端技术需求

Nuxt.js 是 Vue.js 生态下专注解决 SEO 问题的服务端渲染(SSR)框架,专为需搜索引擎优化的前端场景设计,可兼顾 Vue 开发体验与服务端渲染优势。
其核心价值在于破解 Vue 客户端渲染的 SEO 短板 —— 客户端渲染中搜索引擎爬虫难以解析 JS 生成的内容,而 Nuxt.js 部署于 Node.js,接收请求后先从服务端获取数据,完成 HTML 渲染再响应给浏览器,生成的完整 DOM 能被爬虫高效抓取。

1.1 需求描述

采用vue.js开发搜索界面则SEO不友好,需要解决SEO的问题

image-20210114164040777.png


1.2 了解SEO

SEO,也就是搜索引擎优化的逻辑,其实是非常简单的。这就像是在大学里的学生会主席,你要让投票者给你更多的选票。那么,你需要先「自我优化」,无论是外表还是能力;此外,你还需获得更多意见领袖的推荐,才可以让更多普通选民支持你。

同样的,你要让搜索引擎在无数的文章,把你的文章排到前面。你首先需要先做:
1. 内部优化:也就是提高文章本身的质量
2. 外部优化:也就是让你的文章曝光在更多权威网站上

总结:seo是网站为了提高自已的网站排名,获得更多的流量,对网站的结构及内容进行调整优化,以便搜索引擎 (百度,google等)更好抓取到更优质的网站的内容。

下图是搜索引擎爬取网站页面的大概流程图:(搜索引擎的工作流程很复杂,下图只是简单概括)

image-20210114164119658.png


从上图可以看到SEO是网站自己为了方便spider抓取网页而作出的网页内容优化,常见的SEO方法比如:

  1. 对url链接的规范化,多用restful风格的url,多用静态资源url;

  2. 注意title、keywords的设置。

  3. 由于spider对javascript支持不好,对于网页跳转用href标签。 。。。

1.3 服务端渲染和客户端渲染

采用什么技术有利于SEO?要解答这个问题需要理解服务端渲染和客户端渲染。

什么是服务端渲染?

我们用传统的servlet开发来举例:浏览器请求servlet,servlet在服务端生成html响应给浏览器,浏览器展示html

的内容,这个过程就是服务端渲染,如下图:

image-20210114164219232.png

服务端渲染的特点:

  1. 在服务端生成 html 网页的dom元素。

  2. 客户端(浏览器)只负责显示dom元素内容。


当初随着web2.0的到来,AJAX技术兴起,出现了客户端渲染:客户端(浏览器) 使用AJAX向服务端发起http请 求,获取到了想要的数据,客户端拿着数据开始渲染html网页,生成Dom元素,并最终将网页内容展示给用户, 如下图:

image-20210114164254720.png


客户端渲染的特点:

  1. 在服务端只是给客户端响应的了数据,而不是html网页

  2. 客户端(浏览器)负责获取服务端的数据生成Dom元素。

两种方式各有什么优缺点?


客户端渲染:

  1. 缺点 不利于网站进行SEO,因为网站大量使用javascript技术,不利于spider抓取网页。

  2. 优点 客户端负责渲染,用户体验性好,服务端只提供数据不用关心用户界面的内容,有利于提高服务端的开发效率。

  3. 适用场景 对SEO没有要求的系统,比如后台管理类的系统,如电商后台管理,用户管理等。

服务端渲染:

  1. 优点

    有利于SEO,网站通过href的url将spider直接引到服务端,服务端提供优质的网页内容给spider。


  2. 缺点

    服务端完成一部分客户端的工作,通常完成一个需求需要修改客户端和服务端的代码,开发效率低,不利于系统的稳定性。

  3. 适用场景 对SEO有要求的系统,比如:门户首页、商品详情页面等


二、 Nuxt.js介绍

2.1 Nuxt.js介绍

移动互联网的兴起促进了web前后端分离开发模式的发展,服务端只专注业务,前端只专注用户体验,前端大量运 用的前端渲染技术,比如流行的vue.js、react框架都实现了功能强大的前端渲染。

但是,对于有SEO需求的网页如果使用前端渲染技术去开发就不利于SEO了,有没有一种即使用vue.js、react的前 端技术也实现服务端渲染的技术呢?其实,对于服务端渲染的需求,vue.js、react这样流行的前端框架提供了服务 端渲染的解决方案。

image-20210114164507438.png

从上图可以看到: react框架提供next.js实现服务端渲染。 vue.js框架提供Nuxt.js实现服务端渲染


2.2 Nuxt.js工作原理

下图展示了从客户端请求到Nuxt.js进行服务端渲染的整体的工作流程

image-20210114164538136.png

  1. 用户打开浏览器,输入网址请求到Node.js

  2. 部署在Node.js的应用Nuxt.js接收浏览器请求,并请求服务端获取数据

  3. Nuxt.js获取到数据后进行服务端渲染

  4. Nuxt.js将html网页响应给浏览器


Nuxt.js使用了哪些技术?

Nuxt.js使用Vue.js+webpack+Babel三大技术框架/组件,如下图:

image-20210114164638565.png

Babel 是一个js的转码器,负责将ES6的代码转成浏览器识别的ES5代码。 Webpack是一个前端工程打包工具。 Vue.js是一个优秀的前端框架。


Nuxt.js的特性有哪些?

  • 基于 Vue.js

  • 自动代码分层

  • 服务端渲染

  • 强大的路由功能,支持异步数据

  • 静态文件服务

  • ES6/ES7 语法支持

  • 打包和压缩 JS 和 CSS

  • HTML头部标签管理

  • 本地开发支持热加载

  • 集成ESLint

  • 支持各种样式预处理器: SASS、LESS、 Stylus等等

总结

Nuxt.js 是 Vue.js 生态下专注解决 SEO 问题的服务端渲染(SSR)框架,专为需搜索引擎优化的前端场景设计,可兼顾 Vue 开发体验与服务端渲染优势。
其核心价值在于破解 Vue 客户端渲染的 SEO 短板 —— 客户端渲染中搜索引擎爬虫难以解析 JS 生成的内容,而 Nuxt.js 部署于 Node.js,接收请求后先从服务端获取数据,完成 HTML 渲染再响应给浏览器,生成的完整 DOM 能被爬虫高效抓取。
架构上以 “约定优于配置” 为核心,基于 Vue.js、Webpack、Babel 构建,具备自动路由生成、代码分层等特性,无需手动配置路由,支持异步数据加载与 HTML 头部标签管理。同时内置 SEO 优化能力,可自动生成 meta 标签、XML 站点地图,规范 URL 处理,比手动配置更高效。
适用场景聚焦内容密集型网站(如博客、商品详情页)及 SEO 关键项目,能平衡开发效率与性能,既保留前端开发灵活性,又通过服务端渲染提升页面收录与排名表现。
【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。