关于SEO、SPA的简单思考和资料查询
2019-03-15 本文已影响0人
诸葛渊儿
由来
- 前提：公司接了一个门户类网站，对前端进行了技术选型。
- 问题：选择了前后端分离的SPA(单页Web应用)，该技术选型会导致SEO(搜索引擎优化)的问题。
- 问题原因：百度等搜索引擎现阶段对于SPA的爬取并不是很友好。
所以此处技术选型会对网站推广产生严重影响。 - 问题可能导致的后果：已开发好的网站为了做更好的SEO成后进行大规模重构
专业名词解释
- SPA
单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。
来源：百度百科-->百度百科：SPA
- SEO
SEO（Search Engine Optimization）：汉译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是：为网站提供生态式的自我营销解决方案，让其在行业内占据领先地位，获得品牌收益；SEO包含站外SEO和站内SEO两方面；为了从搜索引擎中获得更多的免费流量，从网站结构、内容建设方案、用户互动传播、页面等角度进行合理规划，还会使搜索引擎中显示的网站相关信息对用户来说更具有吸引力。
来源：百度百科-->百度百科：SEO(搜索引擎优化)
- 服务器端渲染 - 后端渲染
后端先调用数据库，获得数据之后，将数据和页面元素进行拼装，组合成完整的 html 页面，再直接返回给浏览器，以便用户浏览。
来源：简书--> 什么是服务器端渲染
- 预渲染（Prerendering）
无需使用 web 服务器实时动态编译 HTML，而是使用预渲染方式，在构建时 (build time) 简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单，并可以将你的前端作为一个完全静态的站点。
来源：Vue SSR 指南 -- > Vue SSR 指南 - 服务器端渲染 vs 预渲染 (SSR vs Prerendering)
- 服务器端渲染 - 同构渲染
指前后端共用 JS，首次渲染时使用 Node.js 来构建出 HTML。一般来说同构渲染是介于前后端中的共有部分。
CSDN-前后端渲染和同构渲染 --> CSDN - (转自阿里camsong)前后端渲染和同构渲染
web开发的技术历程
到了此处就不得不提网站开发的技术历程了。
- 第一阶段：静态内容网站（静态渲染）
- 采用HTML技术，主要是文本和图片（jpeg/gif）。
- 简单粗暴，只做信息展示，无用户交互。
- 第二阶段：动态网站（服务器端渲染-后端渲染）
- 早期采用用CGI/Perl脚本技术，之后诞生了PHP、ASP、JSP等技术。
- 转折：Ajax：异步JavaScript和XML
- 局部更新，响应更快，真正用WEB应用取代了WEB页面。
- 这是web开发历史上一个重要的变革。
- 第三阶段：前端渲染
- jQuery、AngularJS、React、Vue等JavaScript框架崛起。
- 开始了前后端分离实践
- SPA单页面web应用形成并流行
- 第四阶段：探索SPA缺陷的解决方案
- 前端渲染主要面临的问题有两个 SEO、首屏性能。
- 期中一种解决方案回归到服务器端渲染，但是服务器端的渲染不是之前阶段的后台渲染而是前端开发进行的同构渲染。
- 从 2014 年起又开始流行了同构渲染，号称是未来，集成了前后端渲染的优点，几年之后，很多当时壮心满满的框架（Rendlr、Lazo）已经从先驱变成了先烈。
- angular、React、Vue都对服务器端渲染（SSR）[小声叨叨：起的什么鬼名字]进行了深入探索。同时也有基于各自的框架开始应用到实际的生产环境中。
- 不得不提的是，此处坑深，慎入。
总结
- 技术会不断的进步。解决用户的痛点是技术进步的原动力。
- 技术会进步，但是每一种技术的进步都可能伴随这新的缺点需要解决。
- 前后端分离降低了前端和后端的耦合度，提高了开发效率。
- SEO对与很多网站很重要（比如门户类网站）而普通的SPA又不利于SEO
- SPA是前后端分离中前端的一种解决方案，并且在很多场景提升了网站相应速度，提高了用户体验。SEO和首屏性能是SPA后面对的痛点，下一阶段必然要解决。
- SSR是已经有趋于成熟的解决方案，虽然还没有完全成熟和流行起来，但是已经开始应用到实际生产环境中。
- SSR会对WEB开发者提出了更多的要求。
- SSR的出现一定程度上解决了SPA中首屏慢的问题，又极大减少了普通SPA对于SEO的不利影响。
后续
- 未来对SSR进行深入研究和实践
- 未来对SPA首屏性能解决方案进行研究
