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

2021-08-15 20:36:31 字數 1794 閱讀 9630

歷史概況:

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

好處:前端耗時少(前端只負責將html進行展示),利於seo

壞處:網路傳輸資料量大,占用(部分、少部分)伺服器運算資源,response 出的資料量會(稍)大點,模板改了前端的互動和樣式什麼的一樣得跟著聯動修改

前端渲染就是指瀏覽器會從後端得到一些資訊,這些資訊或許angularjs的模板檔案,亦或是json等各種資料交換格式所包裝的資料,甚至是直接的合法的html字串。這些形式都不重要,重要的是,將這些資訊組織排列形成最終可讀的html字串是由瀏覽器來完成的,在形成了html字串之後,再進行顯示。

好處:網路傳輸資料量小(減少了伺服器壓力)

壞處:前端耗時較多,不利於seo

近幾年,隨之前端spa框架的興起;由前後端分離帶來的seo問題,相信每個前端攻城獅都有遇到。這裡以vue為例來說說解決seo的方法;

2.1.1 vue------ssr

首先vue2.x直接提供了乙份完整的構建vue服務端渲染。

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

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

具體的使用指南--------------------------------請移步官方文件

2.1.2 vue------nuxt.js

從頭搭建乙個服務端渲染的應用是相當複雜的。幸運的是 

nuxt.js

讓這一切變得非常簡單。nuxt 是乙個基於 vue 生態的更高層的框架,為開發服務端渲染的 vue 應用提供了極其便利的開發體驗。更酷的是,你甚至可以用它來做為靜態站生成器。推薦嘗試。

ui渲染,

同時抽象出客戶端/伺服器分布。

伺服器的

開發更加愉快的

所有配置。。

它將構建乙個

靜態生成的

vue.js應用程式。

我們相信這個選擇可能是微軟服務開發web應用程式的下乙個重要步驟。

其實我建議你自己用vue-ssr介面去實現 需要實現的功能可以從nuxt裡扒

var prerenderspaplugin = require('prerender-spa-plugin')

var webpackconfig = merge(basewebpackconfig, ]),

new prerenderspaplugin(

//將渲染的檔案放到dist目錄下

path.join(__dirname, '../dist'),

//需要預渲染的路由資訊

[ '/','/introduct','/culture','/chairman','/president','/fund','/news','/honor' ],

),

另:prerender需要路由使用history模式,使用hash模式會導致失效。

前後端分離 SEO優化

首先說下seo什麼意思?其次為啥前後端分離?整個專案的開發權重往前移,實現真正的前後端解耦,動態資源和靜態資源分離,提高了效能和擴充套件性。前端有且僅有靜態內容,再明確些,只有html css js 其內容來自於完全靜態的資源而不需要任何後台技術進行動態化組裝。前端內容的執行環境和引擎完全基於瀏覽器...

VUE前後端分離系統部署

前後端分離,除非部署在同台伺服器上,否則都會遇到跨域問題,什麼是跨域問題,我理解的是ip port,只要其中乙個不一致,就會出現跨域問題,解決跨域問題的方式有很多種,我覺得最簡單的解決方案有兩種 1.就是nginx伺服器解決,2.就是直接做網域名稱對映,通過網域名稱呼叫。開發環境不用擔心,vue自己...

springboot和vue前後端分離跨域配置

1,後端配置 package org.lht.boot.security.server.common.config import org.springframework.context.annotation.bean import org.springframework.context.annota...