知乎Web页面部分不变，聊聊SPA框架优缺点及SEO概述

hwyzw

    知乎的网页界面里，有些板块是基本固定不变的，例如顶部的导航条，一旦用户点击某个具体问题进行浏览之后

    破乎的回答

    它的导航栏依旧保持原样，在常规的网页站点里，一旦进入不同页面，就会向服务器索要全部的页面内容，但在单页应用中，转换到新页面时，仅需刷新发生变动的区域即可

    目前常见的几个SPA框架SPA的优点

    前面提到的前后端分离的长处它全都具备，而且它还具备一些其他的好处

    SPA的缺点

    鉴于上述不足之处，我们进而引出后续探讨的两个议题，分别是搜索引擎优化和服务器端渲染，首先来讨论搜索引擎优化。

    SEO概述

    早先对SEO的认识很浅，直到最近才初步掌握了一些SEO知识。SEO（  ），其含义在中文里通常表述为：搜索引擎优化。SEO涉及研究搜索引擎的工作原理，包括网页抓取方式、信息索引机制以及依据特定关键词决定搜索结果排序的流程。通过分析这些原理，人们可以对网站进行优化，目的是提升该网站在搜索引擎特定关键词搜索结果中的排名情况。

    常用技术

    搜索引擎优化中的技术大致可以分两类：白帽技术与黑帽技术，

    SEO包含诸多注意事项，以下是维基百科对部分正规优化手段的说明：

    除去非开发细节，我们大该可以提炼出以下的信息：

   

    这个标签并非元标记，经常和空值连用，它的内容会作为标题显示在浏览器的顶部区域，同时也会出现在用户的工具栏里

<p style='margin-bottom:15px;color:#555555;font-size:15px;line-height:200%;text-indent:2em;'>    <pre><meta name="description" content="通常所说的META标签，是在HTML网页源代码中一个重要的html标签。META标签用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新等。..."></pre></p>
<p style='margin-bottom:15px;color:#555555;font-size:15px;line-height:200%;text-indent:2em;'>    <pre><meta name="keywords" content="META标签 META标签作用 META标签组成 META标签属性 META标签描述设计 META标签错误 META标签标签"></pre></p>
    相关资料里没有提及过应用meta ， Quora上探讨过是否还在应用meta 的问题，多数回应指出谷歌已不再应用它，不过其他搜索引擎例如百度等仍在应用meta 。

    SPA与SEO的冲突

    先前我们提及的单页应用不利于搜索引擎优化，目前来看，尽管部分搜索引擎如Bing等，它们的爬虫已能执行或通过AJAX获取数据，但对于非同步数据的处理仍显欠缺，这或许是因为搜索引擎开发者认为没有必要，Vue服务器端渲染对此有相关说明

    假如你的软件一开始呈现的是菊花图案，接着运用 Ajax 技术来获取数据，那么爬虫程序不会等到这个异步操作结束后才继续抓取页面的其他信息。

    先前提及过，SPA应用一般借助AJAX获取信息，因此难以确保网页能被搜索引擎正确索引，同时部分搜索引擎无法执行或处理AJAX数据，这更使得SEO优化变得困难。

    某些站点视SEO极为关键，比如以内容为核心的平台Quora、知乎及豆瓣等，那么怎样运用单页应用模式，同时又不损害SEO效果呢？鲁迅曾言：

    技术上的问题总有技术去解决

    此时，SSR便闪亮登场了

    SSR概述

    SSR是服务器端渲染的简称，在常规的单页应用中，通常把框架和网页代码传输给浏览器，由浏览器负责生成和处理DOM，这也是初次访问单页应用在相同带宽和网络状况下，相比传统后端生成HTML再发送到浏览器要慢的原因，其实也可以把单页应用在服务器上打包，由服务器渲染出HTML，再发送给浏览器，但这样的页面无法直接交互，因此必须与单页应用框架配合，在浏览器端“融合”成可操作的应用程序。因此，只要合理运用SSR技术，可以缓解首屏加载缓慢的状况，同时也能提升SEO表现。

    SSR的优点SSR的缺点SSR常用框架

   

    对React和Next不甚了解，因此无法对此发表意见，我的个人网站选用了Nuxt来实现服务器端渲染，不得不说Nuxt的运用方式真是令人赞叹，它既带有必要的规范，又具备良好的可塑性，其官方网站提供的资料也相当出色。

    总结

    前后端分离降低了前端和后端的耦合度，提高了开发效率；

    SPA是前后端分离中前端的一种解决方案；

    SEO对与很多网站很重要而普通的SPA又不利于SEO；

    SSR技术的应用缓解了传统单页应用首屏加载缓慢的状况，同时显著降低了常规单页应用在搜索引擎优化方面存在的弊端。

    参考资料

       -

    搜索引擎优化 - 维基百科，自由的百科全书

    How -Page  Work – Paul  –

    Meta tags that   -   Help

    使用过元数据是在二零一八年吗？这个问题可以在Quora上找到答案

    Vue SSR 指南 | Vue.js 服务器端渲染指南

    这项创作遵循知识共享署名-非商业性使用-禁止演绎 4.0 国际许可条款授权。若要再次传播，必须注明：创作者姓名，最初发布在我的个人网站，并提供原始文章的网址地址。