1. 程式人生 > >從壹開始前後端分離 [ vue + .netcore 補充教程 ] 三十║ Nuxt實戰:動態路由與Vuex狀態樹

從壹開始前後端分離 [ vue + .netcore 補充教程 ] 三十║ Nuxt實戰:動態路由與Vuex狀態樹

【SSR 同構】

SSR 用通過同構的方法解決了上面問題。我們先說一下 SSR 的具體表現,比如我們現在有一個列表頁,列表中每一行對應一個詳情頁,那麼如果直接用瀏覽器訪問列表頁時,伺服器返回資料和 html 融合後的頁面,瀏覽器拿到頁面直接渲染,這就省去了先請求 js 再由 js 發起資料請求的過程,頁面渲染的同時請求js,js載入完成後繫結事件;從列表頁中點選某一條到詳情頁的時候,和普通的全棧 Ajax 一樣,先請求 js 再由 js 發起資料請求,然後填充資料渲染頁面。如果將詳情頁的連結複製出來,直接在新瀏覽中訪問,那麼詳情頁會直接返回資料和 html 融合後的頁面,渲染的同時請求詳情頁 js,最後再繫結事件。這個“伺服器端拼接 html 和 html 是由同樣的頁面和元件完成的,這種前後端採用同樣的結構在不同的環境中產出同樣的 html 的方案稱之為“同構”。