前后端分离时代的SEO实践经验

theme: condensed-night-purple

highlight: atelier-cave-light

prerender

如果我们项目是前后端分离并且内容是AJAX动态获取想要进行网站排名优化（SEO）的话，可以使用prerender

Prerender 是一种服务或中间层应用，用于在将页面内容返回给搜索引擎爬虫之前，对单页应用或使用JavaScript动态渲染的页面进行预渲染，然后返回HTML。

prerender的工作原理：

当搜索引擎爬虫请求一个单页应用或使用JavaScript渲染的页面时，Prerender 捕获这个请求。

然后判断这个请求是否来自搜索引擎的爬虫，如果不是，则直接返回单页项目的HTML，按照普通单页项目的工作模式（客户端渲染）。

如果是，则把请求转发给prerender服务Prerender 服务器会使用一个头less浏览器（通常是谷歌Chrome）来打开并渲染请求的页面，就像一个真实的浏览器会做的一样。

一旦页面渲染完毕，Prerender 将完整的HTML内容返回给搜索引擎爬虫，就像是一个静态HTML页面。

搜索引擎爬虫可以轻松地索引和理解这个静态HTML内容，而无需执行JavaScript或等待异步加载。prerender中间件就是用来判断请求是否来自搜索引擎爬虫和转发请求的。

Prerender 的优点：

• 可以提高网站排名（SEO）：对于使用JavaScript渲染的单页网站，爬虫通常难以处理异步加载和内容动态生成。Prerender 可以将完整的HTML内容提供给搜索引擎，提高网站排名。
• 提高页面加载速度：由于Prerender返回静态HTML，而不需要浏览器执行JavaScript和异步加载，因此页面加载速度会更快，从而让用户拥有更好体验。
• 兼容性：Prerender 可以与各种前端框架和库（如React、Angular和Vue.js）一起使用，非常灵活兼容性很强。
• 减轻服务器负担：Prerender可以在我们的中间层处理渲染，不需要服务器执行JavaScript渲染，减轻了我们后端服务器的负担。

Prerender 的缺点：

• 成本高：Prerender 需要额外的服务器资源和成本，不适合于大型网站。
• 缓存管理：需要我们经常更新Prerender的缓存，以确保搜索引擎获取到最新的内容。

预渲染prerender-spa-plugin

如果我们已经采用了前后分离的单页项目，而且我们的网站内容不需要AJAX去获取内容和展示内容，那么我们可以试试 prerender-spa-plugin 这个插件，这个插件是一个webpack插件，可以帮助我们在打包过程中通过无头浏览器去渲染我们的页面，并生成对应的HTML。当然这个方案适合你的路由是静态的，并且路由数量是有限的。

prerender-spa-plugin 是一个用于将单页应用（SPA）的路由生成预渲染静态HTML的插件。这个插件可以与Webpack一起使用，它主要用于优化SPA应用的SEO和性能。

prerender-spa-plugin的工作原理：

• 配置插件：首先我们需要配置 prerender-spa-plugin 插件。配置要预渲染的路由、设置输出目录等。
• Webpack构建：我们运行Webpack打包命令时，Webpack会开始构建我们网站。Webpack自动会解析和编译我们的代码，并准备在预渲染过程中将要使用的数据。
• 生成无头浏览器实例：在打包期间，prerender-spa-plugin 会创建一个无头浏览器实例，它用于执行页面的加载和渲染。
• 逐个路由预渲染：对于每个在配置中指定的路由，我们的插件都会执行下面的步骤：
  • 使用无头浏览器打开路由：插件会将路由加载到无头浏览器中，就像一个真实的浏览器会加载页面一样。
  • 等待页面加载和渲染：无头浏览器会等待页面完全加载和渲染。包括等待异步JavaScript加载完成，确保页面是最终状态。
  • 获取渲染后的HTML：一旦页面渲染完成，插件就会获取页面的DOM结构和渲染结果，这里包括页面的HTML、CSS和JavaScript生成的内容。
  • 生成静态HTML：插件会将获取到的页面内容生成对应的静态HTML文件。这个静态HTML文件包含了完整的页面内容，包括由JavaScript渲染的部分。
  • 保存静态HTML文件：生成的静态HTML文件会被保存到指定的输出目录中，通常是我们的构建目录或特定的目录。
• Webpack完成构建：一旦所有路由都被预渲染为静态HTML并保存，Webpack打包就完成了。
• 部署预渲染的静态HTML：我们生成的静态HTML文件可以被部署到任何静态文件托管服务上，以供爬虫爬取。

优点：

• 改动小部署简单：引入个插件即可，生成的静态HTML可以部署到任何静态文件托管服务上。
• SEO优化：预渲染生成的静态HTML可以被搜索引擎爬虫轻松索引，提高网站排名（SEO）。
• 性能更好：预渲染生成的静态HTML不需要浏览器执行JavaScript，加载速度会更快。
• 兼容性强：插件与多个流行的SPA框架（如Vue.js、React、Angular等）兼容。

缺点：

• 不适用动态路由：对于动态内容或需要用户登录后才能访问的页面，预渲染可能会受到限制。
• 只适用于小项目：预渲染需要在构建时执行，对于大型应用打包时间会很长。

Phantomjs 针对爬虫做处理

Phantomjs是 是一个无界面的、可编程的浏览器引擎，它可以用于模拟浏览器行为，加载和渲染网页。

虽然目前“PhantomJS已经宣布终止开发”，但是已经能够满足我们对Vue的SEO处理。

工作原理

1. 启动浏览器引擎：PhantomJS会启动一个无界面的浏览器引擎，基于WebKit引擎（类似于Chrome和Safari浏览器的渲染引擎）。
2. 加载网页：它会加载指定的网页，就像一个真实的浏览器一样，发送HTTP请求并接收响应。
3. 渲染网页：PhantomJS会将网页的HTML、CSS和JavaScript进行解析和渲染，最终生成一个完整的DOM树和渲染结果。
4. 执行JavaScript：它可以执行网页中的JavaScript代码，从而模拟用户与网页的交互。
5. 生成截图或PDF：PhantomJS可以用于生成网页的截图或PDF文件，这在测试和网页截图等应用中非常有用。
6. 数据提取：它可以从网页中提取数据，用于爬虫、数据分析等任务。

这种解决方案其实是一种旁路机制，原理就是通过Nginx配置， 判断访问的来源UA是否是爬虫访问，如果是则将搜索引擎的爬虫请求转发到一个node server，再通过PhantomJS来解析完整的HTML，返回给爬虫。

优点：

1. 无需更改：完全不用改动项目代码，按原本的SPA开发即可有用，大大提高了效率。
2. 多平台支持：PhantomJS可以在多个操作系统上运行，包括Windows、Linux和macOS。
3. 快速加载：它可以快速加载和渲染网页，对于性能要求高的任务非常适用。

缺点：

• 部署要求固定：部署需要node服务器支持
• 不再维护：PhantomJS的维护已经停止，不再推荐在新项目中使用
• 资源占用：PhantomJS在内存和CPU方面可能会占用较多资源，尤其是在大规模爬取或测试任务中。
• 渲染引擎陈旧：PhantomJS使用的渲染引擎基于WebKit，而现代浏览器已经使用了更先进的渲染引擎。这可能导致一些网页在PhantomJS中显示不正常。

Nuxt/Next 服务端渲染应用部署 (SSR服务器渲染)

• React 的 Next
• Vue.js 的 Nuxt

Nuxt

Nuxt.js 是一个基于Vue.js的通用应用程序框架，它可以帮助我们构建服务器渲染的Vue.js应用程序。

注意： 在Nuxt.js执行 generate静态化打包时，动态路由会被忽略。

工作原理：

Nuxt.js通过使用Vue.js的渲染函数将Vue组件渲染为HTML字符串，然后将这些字符串传递给服务器以响应HTTP请求。这允许搜索引擎爬虫能够看到渲染后的HTML内容，从而提高了SEO。

优点：

• 服务器渲染：Nuxt.js支持服务器渲染，因此可以生成静态HTML，爬虫可以准确的获取网站内容。
• 自动生成路由：Nuxt.js可以自动生成路由表，减少了手动配置路由的工作，有助于更好地管理SEO友好的URL。
• 异步数据获取：Nuxt.js提供了asyncData和fetch方法，使您可以在服务器端获取数据，以便将数据包含在初始渲染中，有助于提高网站排名

缺点：

对初学者不友好：Nuxt.js的配置和使用可能相对复杂，尤其是对于初学者来说。

性能开销：服务器渲染通常会导致更高的服务器负载和性能开销，需要考虑缓存等性能优化策略。

Next.js:

Next.js 是一个React框架，用于构建服务器渲染的React应用程序。

工作原理：

Next.js通过在服务器上预渲染页面并使用React的虚拟DOM来实现服务器渲染。它将React组件渲染为HTML字符串，然后将这些字符串发送给客户端。

优点：

1. 服务器渲染：Next.js支持服务器渲染，有助于生成静态HTML，爬虫可以更准确的获取网站内容。
2. 自动静态导出：Next.js支持自动生成静态HTML文件，爬虫可以更好获取网站内容。
3. 代码分割：Next.js支持自动代码分割，以减小初始加载时间，提高性能和有助于提高网站排名。

缺点：

1. 对初学者不友好：Next.js是基于React的，如果不熟悉React，学习曲线可能会较陡峭。
2. 服务器负载：服务器渲染通常会导致更高的服务器负载和性能开销，需要缓存等性能优化。

总结

🔸构建大型网站，如商城类，可以直接选择SSR服务端渲染。

🔸如果只是个人博客、公司官网这类，其余三种都可以。比如Nuxt静态化就挺好的。

🔸如果对已用SPA开发完成的项目进行SEO优化，而且支持node服务器，可以使用Phantomjs。

我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！