NuxtJS 解决了服务端SSR(server side render)问题

1,151 阅读2分钟

SEO: 什么是SEO?

搜索引擎会对网页内容进行爬取,进行分析,然后做一个搜索排名;

SPA:

SPA的内容是从接口获取到的数据,然后返回渲染我们的页面;这个过程会导致白屏时间会比较长一些;搜索引擎不能从中获取到内容;当然,现在可以做一些购买服务;

SPA:的缺点:

  • 不利于SEO
  • 首屏渲染时间长

针对以上缺点,可以分别对应以下方式解决:

预渲染实际上做的事情:

NuxtJS: 帮我们做的事情;

  • 静态站点
  • 动态渲染
  • 简化配置

Nuxt.js 是什么?

Nuxt官网

Nuxt.js 是一个基于 Vue.js 的通用应用框架。

通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI渲染。

我们的目标是创建一个灵活的应用框架,你可以基于它初始化新项目的基础结构代码,或者在已有 Node.js 项目中使用 Nuxt.js。

Nuxt.js 预设了利用Vue.js开发服务端渲染的应用所需要的各种配置。

除此之外,我们还提供了一种命令叫:nuxt generate,为基于 Vue.js 的应用提供生成对应的静态站点的功能。

我们相信这个命令所提供的功能,是向开发集成各种微服务(microservices)的 Web 应用迈开的新一步。

作为框架,Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性,例如异步数据加载、中间件支持、布局支持等。

Issue:

Issue: 对于SPA页面动态内容,如果不使用SSR;如何做SEO???

解决方案:1.使用无头浏览器:phantomJS /headlessChrome

无头浏览器:一个咩有图形界面的浏览器;当搜索引擎抓取我么的页面的时候,我么可以抓取到我们的user Info;能够判断出哪些是真实用户,哪些是爬虫;如果是搜索引擎的爬虫则走无头浏览器;渲染出我么的数据之后,返回给搜索引擎;这种方式间接的达到了我们的SEO的方案; 缺点:可以作为同构SSR但是:效率低;占用内存多;