前后端分離算是最近Web開發(fā)的大趨勢了祭务，目前已經(jīng)有大量的公司使用了前后端分離的開發(fā)方式内狗。那我們就來大概談?wù)勄昂蠖朔蛛x開發(fā)中必須要了解和接觸的幾個概念：SPA、SEO和SSR义锥。在談這幾個概念之前柳沙，先來聊聊我理解的前后端分離。

我理解的前后端分離

背景

最開始接觸Web前后端大概是一年多前拌倍，那個時候打算參加一個比賽赂鲤，因?yàn)闆]人寫后端和Web前端，所以就開始自己學(xué)柱恤，然后邊學(xué)邊做数初。另外當(dāng)時我們的項(xiàng)目還有移動端，所以后端除了提供數(shù)據(jù)渲染W(wǎng)eb前端的頁面以外還得給移動端提供接口梗顺，實(shí)際上兩端的數(shù)據(jù)大多都是相同的泡孩。
傳統(tǒng)的Web前后端開發(fā)大多是前端將頁面寫好，之后丟給后端寺谤，讓后端將頁面集成到項(xiàng)目中去仑鸥。這里就存在著一個前后端耦合的問題，首先對于后端來說变屁，不僅要寫后端邏輯眼俊，還得集成前端頁面（要是頁面哪里再有啥問題那就更悲催了，都是淚啊~~）敞贡，而對于前端來說泵琳，不是很輕松地就能看到頁面的真正渲染出來的樣子，顯示是不利于開發(fā)調(diào)試的誊役，這里的效率自然也成了問題获列。
也正是由于前后端的高耦合，使得任何一方的變化都可能會影響到另一方蛔垢。
針對類似于上述的一些問題击孩，前后端分離的思想便應(yīng)運(yùn)而生。

基本概念:

前后端根據(jù)AJAX接口進(jìn)行數(shù)據(jù)的交互鹏漆，目前常見的是后端直接將數(shù)據(jù)以JSON的格式返回給前端巩梢，前端根據(jù)后端服務(wù)器返回的數(shù)據(jù)创泄，操作DOM

主要優(yōu)點(diǎn)

• 分工明確，前后端各司其職括蝠，后端專注業(yè)務(wù)邏輯和功能的實(shí)現(xiàn)鞠抑，前端專注頁面設(shè)計(jì)。
• 接口明確忌警，并行開發(fā)搁拙，在后端接口沒有實(shí)現(xiàn)好之前，前端完全可以自己通過Node.js的Express和koa等的Web框架模擬接口法绵，提供測試數(shù)據(jù)箕速。
• 提高開發(fā)效率，一定程度上減少了前后端的溝通成本撕逼

在前后端分離中朋譬，后端一般提供RESTful API盐茎，常將數(shù)據(jù)以JSON格式返回；而前端一般使用什么呢徙赢，這里便是引出了我們討論的主題之一：SPA字柠。

SPA

概述

SPA全稱是 single page application (在百度百科和一些文章中使用的是 single page web application，經(jīng)過一番查詢了解犀忱，我覺得single page application才應(yīng)該是它的全稱)募谎。
SPA是一種 網(wǎng)絡(luò)應(yīng)用程序(WebApp)模型。在傳統(tǒng)的網(wǎng)站中阴汇，不同的頁面之間的切換都是直接從服務(wù)器加載一整個新的頁面，而在SPA這個模型中节槐，是通過動態(tài)地重寫頁面的部分與用戶交互搀庶，而避免了過多的數(shù)據(jù)交換，響應(yīng)速度自然相對更高铜异。
舉個栗子哥倔，請看知乎首頁

破乎首頁

破乎的回答

目前常見的幾個SPA框架

• AngularJS
• React
• Vue.js

SPA的優(yōu)點(diǎn)

基本上前面所說的前后端分離的優(yōu)點(diǎn)它都有别渔，另外還有以下的一些優(yōu)點(diǎn)

• 頁面之間的切換非掣矫裕快
• 一定程度上減少了后端服務(wù)器的壓力（不用管頁面邏輯和渲染）
• 后端程序只需要提供API惧互，完全不用管客戶端到底是Web界面還是手機(jī)等

SPA的缺點(diǎn)

• 首屏打開速度很慢，因?yàn)橛脩羰状渭虞d需要先下載SPA框架及應(yīng)用程序的代碼喇伯，然后再渲染頁面喊儡。
• 不利于SEO

根據(jù)這幾個缺點(diǎn)，我們便又引出了接下來討論的兩個主題稻据，SEO和SSR管宵，先談?wù)凷EO。

SEO

概述

之前對于SEO的了解不多攀甚，也是最近才對SEO有了一些基本的了解箩朴。SEO（Search Engine Optimization），中文一般譯作：搜索引擎優(yōu)化秋度。SEO是一種通過了解搜索引擎的運(yùn)作規(guī)則（如何抓取網(wǎng)站頁面炸庞，如何索引以及如何根據(jù)特定的關(guān)鍵字展現(xiàn)搜索結(jié)果排序等）來調(diào)整網(wǎng)站，以提高該網(wǎng)站在搜索引擎中某些關(guān)鍵詞的搜索結(jié)果排名荚斯。

常用技術(shù)

搜索引擎優(yōu)化中的技術(shù)大致可以分兩類：白帽技術(shù)與黑帽技術(shù)埠居，
SEO涉及細(xì)節(jié)也很多，以下是維基百科對于一些白帽技術(shù)的介紹：

• 在每頁使用一個短事期、獨(dú)特和相關(guān)的標(biāo)題滥壕。
• 編輯網(wǎng)頁，用與該頁的主題兽泣。有關(guān)的具體術(shù)語替換隱晦的字眼绎橘。這有助于該站訴求的觀眾群，在搜索引擎上搜索而被正確導(dǎo)引至該站唠倦。
• 在該站點(diǎn)增加相當(dāng)數(shù)量的原創(chuàng)內(nèi)容称鳞。
• 使用合理大小、準(zhǔn)確描述的匯標(biāo)稠鼻，而不過度使用關(guān)鍵字冈止、驚嘆號、或不相關(guān)標(biāo)題術(shù)語候齿。
• 注意網(wǎng)址字眼熙暴，有助于搜索引擎優(yōu)化。
• 確認(rèn)所有頁可透過正常的鏈接來訪問慌盯，而非只能透過Java 周霉、JavaScript或Adobe Flash應(yīng)用程序訪問。這可透過使用一個專屬列出該站所有內(nèi)容的網(wǎng)頁達(dá)成（網(wǎng)站地圖）
• 透過自然方式開發(fā)鏈接：Google不花功夫在這有點(diǎn)混淆不清的指南上润匙。寫封電子郵件給網(wǎng)站員诗眨，告訴他：您剛剛貼了一篇挺好的文章，并且請求鏈接孕讳，這種做法很可能為搜索引擎所認(rèn)可匠楚。
• 參與其他網(wǎng)站的網(wǎng)絡(luò)集團(tuán)（譯按：web ring 指的是有相同主題的結(jié)盟站群）──只要其它網(wǎng)站是獨(dú)立的巍膘、分享同樣題目和可比較的品質(zhì)。

除去非開發(fā)細(xì)節(jié)芋簿，我們大該可以提煉出以下的信息：

• 標(biāo)題： 即HTML的 <title></title> 標(biāo)簽峡懈，例如： <title>淺談SPA、SEO与斤、SSR | XXX 的博客</title> 肪康，在Google的相關(guān)文檔中已經(jīng)說明了不再使用<title> 標(biāo)簽作為Meta，但是經(jīng)常會配合 description出現(xiàn)在搜索的結(jié)果上

While technically not a meta tag, this tag is often used together with the "description". The contents of this tag are generally shown as the title in search results (and of course in the user's browser)

• 描述： 即HTML<meta>標(biāo)簽的description撩穿，例如百度百科的一個詞條的 description：

<meta name="description" content="通常所說的META標(biāo)簽磷支，是在HTML網(wǎng)頁源代碼中一個重要的html標(biāo)簽。META標(biāo)簽用來描述一個HTML網(wǎng)頁文檔的屬性食寡，例如作者雾狈、日期和時間、網(wǎng)頁描述抵皱、關(guān)鍵詞善榛、頁面刷新等。...">

• 關(guān)鍵字： 即HTML<meta>標(biāo)簽的keywords呻畸， 例如

<meta name="keywords" content="META標(biāo)簽 META標(biāo)簽作用 META標(biāo)簽組成 META標(biāo)簽屬性 META標(biāo)簽描述設(shè)計(jì) META標(biāo)簽錯誤 META標(biāo)簽標(biāo)簽">

Google的相關(guān)文檔中也沒有提到過使用meta keywords移盆， Quora也討論過Google是否還在使用meta keywords這個問題，大部分的回答都是谷歌已經(jīng)不再使用它了伤为，但是其它的一些搜索引擎比如百度等還在使用meta keywords咒循。

SPA與SEO的沖突

前面我們談到的SPA不利于SEO，因?yàn)榫湍壳岸耘パ剑糠炙阉饕嫒鏕oogle剑鞍、bing等，它們的爬蟲雖然已經(jīng)支持執(zhí)行JS甚至是通過AJAX獲取數(shù)據(jù)了爽醋，但是對于異步數(shù)據(jù)的支持也還不足(也可能是搜索引擎提供商覺得沒必要)，Vue SSR中是這樣說的

如果你的應(yīng)用程序初始展示 loading 菊花圖便脊，然后通過 Ajax 獲取內(nèi)容蚂四，抓取工具并不會等待異步完成后再行抓取頁面內(nèi)容。

前面也談到過SPA應(yīng)用中哪痰，通常通過AJAX獲取數(shù)據(jù)遂赠，而這里就難以保證我們的頁面能被搜索引擎正常收錄到。并且有一些搜索引擎不支持執(zhí)行JS和通過AJAX獲取數(shù)據(jù)晌杰，那就更不用提SEO了跷睦。
對于有些網(wǎng)站而言，SEO顯得至關(guān)重要肋演，例如主要以內(nèi)容輸出為主的Quora抑诸、stackoverflow烂琴、知乎和豆瓣等等，那如何才能正常使用SPA而又不影響SEO呢蜕乡？魯迅曰：

技術(shù)上的問題總有技術(shù)去解決

此時奸绷，SSR便閃亮登場了

SSR

概述

SSR是 Server-Side Rendering(服務(wù)器端渲染)的縮寫，在普通的SPA中层玲，一般是將框架及網(wǎng)站頁面代碼發(fā)送到瀏覽器号醉，然后在瀏覽器中生成和操作DOM（這里也是第一次訪問SPA網(wǎng)站在同等帶寬及網(wǎng)絡(luò)延遲下比傳統(tǒng)的在后端生成HTML發(fā)送到瀏覽器要更慢的主要原因），但其實(shí)也可以將SPA應(yīng)用打包到服務(wù)器上辛块，在服務(wù)器上渲染出HTML畔派，發(fā)送到瀏覽器，這樣的HTML頁面還不具備交互能力润绵，所以還需要與SPA框架配合线椰，在瀏覽器上“混合”成可交互的應(yīng)用程序。所以授药，只要能合理地運(yùn)用SSR技術(shù)士嚎，不僅能一定程度上解決首屏慢的問題，還能獲得更好的SEO悔叽。

SSR的優(yōu)點(diǎn)

• 更快的響應(yīng)時間莱衩，不用等待所有的JS都下載完成，瀏覽器便能顯示比較完整的頁面了娇澎。這個個人深有體會笨蚁，我的博客最開始僅僅使用了Vue.js，而沒有做服務(wù)端渲染趟庄，加之服務(wù)器不在大陸括细，第一次輸入地址到看到完整的頁面幾乎是過了4、5秒戚啥，有時候還更長奋单。
• 更好的SSR，我們可以將SEO的關(guān)鍵信息直接在后臺就渲染成HTML猫十，而保證搜索引擎的爬蟲都能爬取到關(guān)鍵數(shù)據(jù)览濒。

SSR的缺點(diǎn)

• 相對于僅僅需要提供靜態(tài)文件的服務(wù)器，SSR中使用的渲染程序自然會占用更多的CPU和內(nèi)存資源
• 一些常用的瀏覽器API可能無法正常使用拖云，比如window贷笛、docment和alert等，如果使用的話需要對運(yùn)行的環(huán)境加以判斷
• 開發(fā)調(diào)試會有一些麻煩宙项，因?yàn)樯婕傲藶g覽器及服務(wù)器乏苦，對于SPA的一些組件的生命周期的管理會變得復(fù)雜
• 可能會由于某些因素導(dǎo)致服務(wù)器端渲染的結(jié)果與瀏覽器端的結(jié)果不一致。

SSR常用框架

• React 的 Next
• Vue.js 的 Nuxt

不熟悉React及Next尤筐，不作評價汇荐，我的博客便是使用了Nuxt做服務(wù)器端渲染洞就，在此不得不說Nuxt的用法實(shí)在是太漂亮了，既有一定的約束（無規(guī)矩不成方圓）拢驾，又不失擴(kuò)展性奖磁，官網(wǎng)的文檔也非常不錯。

總結(jié)

前后端分離降低了前端和后端的耦合度繁疤，提高了開發(fā)效率咖为；
SPA是前后端分離中前端的一種解決方案；
SEO對與很多網(wǎng)站很重要而普通的SPA又不利于SEO稠腊；
SSR的出現(xiàn)一定程度上解決了SPA中首屏慢的問題躁染，又極大減少了普通SPA對于SEO的不利影響。

參考資料

1. Search engine optimization - Wikipedia
2. 搜索引擎優(yōu)化 - 維基百科架忌，自由的百科全書
3. How Single-Page Applications Work – Paul Sherman – Medium
4. Meta tags that Google understands - Search Console Help
5. Does Google use meta keywords in 2018?-Quora
6. Vue SSR 指南 | Vue.js 服務(wù)器端渲染指南