前後端分離 SEO優化

首先說下seo什麼意思?

其次為啥前後端分離？

整個專案的開發權重往前移，實現真正的前後端解耦，動態資源和靜態資源分離，提高了效能和擴充套件性。

*前端有且僅有靜態內容，再明確些，只有html/css/js

*其內容來自於完全靜態的資源而不需要任何後台技術進行動態化組裝。

*前端內容的執行環境和引擎完全基於瀏覽器本身。

*後端可以用任何語言，技術和平台實現。

*遵循乙個原則：只提供資料，不提供任何和介面表現有關的內容。

*統一api介面，介面完全可以共用。

*通過一些**重構，就可以大量復用介面，提公升效率

*前端三大技術（html/css/js）本身就是平台無關的。

*後台鏈結部分的本質是實現合適的restful介面和互動json資料，就這兩者而言，任何技術和平台都可以實現。

*前後端交給不同的人來編寫，明確劃分職責，發現bug的時候可以快速定位。

*vue.js等框架編寫前端的時候，會比之前寫jquery更簡單快捷。

*前端架構完全基於html/css/js的發展和js框架的演變，由於前台是純靜態內容，大型架構方面可以考慮向cdn方向發展。

*後端架構幾乎可以基於任何語言和平台的任何解決方案，大型架構方面，restful api可以考慮負載均衡，而資料，業務實現等可以考慮資料庫優化和分布式。

*在大併發情況下，可以同時水平擴充套件前後端伺服器。

*即使後端伺服器暫時超時或者宕機，前端頁面也會正常訪問，只是資料重新整理不出來而已，當然現在一般是伺服器集群，少有出現這種現象。

*前後端流量大幅減少

*減少後端伺服器的兵法壓力，除了介面以外的其他所有http請求全部轉移到前端伺服器上

*頁面不再是全部重新整理，而是非同步載入，區域性重新整理，減輕壓力。

*表現效能的提高

*頁面效能，第一次獲取的確會有所損失

*後續使用這個頁面，效能優勢就完全體現了，頁面的絕大部分內容都是本地快取直接載入，遠端獲取的僅僅是1-2個10k的內容，其載入時間百毫秒內，這和本地頁面幾無區別，其前端載入和相應速度得到非常大的提高。

*安全性方面的集中優化

*前端靜態以後，一些注入式攻擊在分離模式下被很好的規避。

*而後端安全問題集中化了，主要考慮處理restful介面安全

*安全架設和集中優化變得更明確和便利

*前後端人員雙方約定好介面的數格式

*比如：前端需要呼叫乙個使用者資訊的介面，資料格式為.name，後端人員只需要告訴他乙個介面url（如並且將這個介面返回前端想要的資料即可，至於後端人員怎麼實現這個介面，前端人員並不關心！

*前端頁面用ajax解析url，獲取資料進行頁面端的處理，然後再按照上述位址返回給後端。

*前端人員要用這個介面來做什麼，後端人員同樣不需要關心，雙方都只專注於自己需要實現的業務邏輯。

*restful推薦每個url能操作具體的資源

*能準確描述伺服器對資源的處理動作。

*通常伺服器對資源支援get/post/put/delete等，用來實現資源的增刪改查。

*前後端分離的話，這些api-url是對接的橋梁，採用restful介面位址，含義更清晰，見名知意。

方法一：vue（ssr）

首先vue2.x直接提供了乙份完整的構建vue服務端渲染。vue.js 是構建客戶端應用程式的框架。預設情況下，可以在瀏覽器中輸出 vue 元件，進行生成 dom 和操作 dom。然而，也可以將同乙個元件渲染為伺服器端的 html 字串，將它們直接傳送到瀏覽器，最後將靜態標記"混合"為客戶端上完全互動的應用程式。

伺服器渲染的 vue.js 應用程式也可以被認為是"同構"或"通用"，因為應用程式的大部分**都可以在伺服器和客戶端上執行。

方法二：vue（nuxt.js）

*nuxt.js是使用 webpack 和 node.js 進行封裝的基於vue的ssr框架，使用它，你可以不需要自己搭建一套 ssr 程式，而是通過其約定好的檔案結構和api就可以實現乙個首屏渲染的 web 應用。

*nuxt.js 支援以generate命令將程式直接構建為靜態 html ，就像上面說的，可以作為靜態資源直接輸出。 打包

npm run generate。

*nuxt 是乙個基於 vue 生態的更高層的框架，為開發服務端渲染的 vue 應用提供了極其便利的開發體驗。更酷的是，你甚至可以用它來做為靜態站生成器。

*nuxt.js是建立universal vue.js應用程式的框架。

*它的主要範圍是ui渲染，同時抽象出客戶端/伺服器分布。

*nuxt.js預先設定了使vue.js應用伺服器的開發更加愉快的所有配置。

*另外，我們還提供另乙個名為nuxt generate的部署選項。它將構建乙個靜態生成的 vue.js應用程式。我們相信這個選擇可能是微軟服務開發web應用程式的下乙個重要步驟。

*作為乙個框架，nuxt.js提供了很多功能，可以幫助您在客戶端和伺服器端之間進行開發，如非同步資料，中介軟體，布局等。

*nuxt.js是乙個基於vue的框架，大部分都是vue的東西。總體來說是個不錯的框架，不需要去配置webpack那些繁瑣的東西。

*由於頁面內容通過js插入，對於內容性**來說，搜尋引擎無法抓取**內容，不利於seo。

nuxt.js 是乙個基於vue.js的通用應用框架，預設了利用vue.js開發服務端渲染的應用所需要的各種配置。可以將html在服務端渲   染，合成完整的html檔案再輸出到瀏覽器。

方法三：預渲染（prerender +metainfo）

*預渲染可以極大的提高網頁訪問速度。而且配合一些meat外掛程式，完全可以滿足seo需求。

*預渲染的本質就是在打包的時候通過外掛程式將js提前執行一遍，然後再將有內容的html放到伺服器上，這樣爬蟲自然可以抓到，首屏的問題也可以得到解決。

*如果您調研伺服器端渲染(ssr)只是用來改善少數營銷頁面（例如 /, /about, /contact 等）的 seo，那麼您可能需要預渲染。無需使用 web 伺服器實時動態編譯 html，而是使用預渲染方式，在構建時 (build time) 簡單地生成針對特定路由的靜態 html 檔案。優點是設定預渲染更簡單，並可以將您的前端作為乙個完全靜態的站點。

如果您使用 webpack，您可以使用 prerender-spa-plugin 輕鬆地新增預渲染。它已經被 vue 應用程式廣泛測試。

*預渲染，我們可以解決很多方面的seo的問題，但是有時候我們也會需要meta資訊的變化，比如 title 比如 meta keywords 或者是 link...

---vue-meta-info   乙個可以動態設定meta 資訊的vue外掛程式如果需要單頁面seo，可以和 prerender-spa-plugin形成更優的配合。

*弊端：

前後端分離之SEO優化 以vue為例

歷史概況 後端渲染html的情況下，瀏覽器會直接接收到經過伺服器計算之後的呈現給使用者的最終的html字串，這裡的計算就是伺服器經過解析存放在伺服器端的模板檔案來完成的，在這種情況下，瀏覽器只進行了html的解析，以及通過作業系統提供的操縱顯示器顯示內容的系統呼叫在顯示器上把html所代表的影象顯示...

前後端分離

關於前後端分離的一些好的文章推薦 前端框架 為什麼前後端分離 最直白的理解，我認為是因為在開發過程中，前端總是需要等待後端的環境搭建好之後，前端才能獲取相關資料，對於前端的開發影響很大，事實上前端並不關心後端的開發，那麼有沒有方法不讓後端影響前端的開發呢？其實後端提供的是什麼？乙個執行伺服器，乙個就...

前後端分離

在此說明 前後端分離有利於後端的快速開發，但並不利於搜尋引擎優化 seo 上圖能清晰的看到，使用前後端分離模式進行開發，瀏覽器會向伺服器傳送請求，伺服器會向瀏覽器傳送乙個類似框架的html，是固定的空殼，此時瀏覽器再使用ajax請求向後端伺服器索要資料，後端伺服器返回json字串給瀏覽器，從而使瀏覽...