react http请求_网站SEO的技术选型及react后端渲染方案

网站SEO的技术选型及react后端渲染方案

简介

web网站在提供http页面访问服务时可以分为后端渲染和前端渲染两种。

支持SEO的通常是后端渲染，因为搜索引擎在爬虫访问网页时需要及时获取网页内容进行内容抓取。

如果是一个前端渲染的页面，则内容需要在加载动态js并执行完脚本(如请求后端捞取数据)才能渲染出来，这对搜索引擎很不友好。

据说google的spider已经可以识别某些前端渲染的页面，一般来讲要想支持SEO还是后端渲染比较好。

后端渲染

在后端渲染(SSR：server side render)中，html是由后端服务器使用模板+变量数据的方式，用模板引擎渲染出来，如jsp里使用velocity，spring mvc里使用thymeleaf，django里的模板变量等。

优点：

页面访问效率高，数据在请求页面时就已经渲染好，方便做token验证

缺点：

前后端耦合，不利于前端同学和后端同学独立开发。比如jsp、thymeleaf的页面都放在后端，页面变量、css、动态逻辑都写在了页面里，如果前端同学想对页面进行美化简直是灾难。

前端渲染

用户访问页面先获取一个固定的页面，然后由js访问后端数据在前端进行数据渲染。如今非常火的react、vue、angular都是前端渲染框架，运行在browser端。

优点：

前后端耦合，方便独立开发，前端框架技术选型自由

缺点：

页面展示效率低，不支持SEO。

技术选型

前端开发当然是使用react、vue等技术要好，但是不支持SEO，好纠结。

如果使用jsp、thymleaf、django等技术又太过古老，前后端耦合的非常严重。

笔者经过各种尝试最终选用的是next.js，一个基于react的后端渲染框架，可以使用react开发支持SEO的网站了。

next.js

Next.js 是一个轻量级的 React 服务端渲染应用框架，基于node可以快速创建应用，集成相关框架(koa、semantic、antd等)非常容易。

官网：https://nextjs.org

文档：https://nextjs.org/docs/

文章链接：https://www.lvbby.com/p/md/1811101117442551cd0008