從壹開始前後端分離 [ vue + .netcore 補充教程 ] 三十║ Nuxt實戰：動態路由與Vuex狀態樹
摘要：
【SSR 同構】
SSR 用通過同構的方法解決了上面問題。我們先說一下 SSR 的具體表現，比如我們現在有一個列表頁，列表中每一行對應一個詳情頁，那麼如果直接用瀏覽器訪問列表頁時，伺服器返回資料和 html 融合後的頁面，瀏覽器拿到頁面直接渲染，這就省去了先請求 js 再由 js...
【SSR 同構】
SSR 用通過同構的方法解決了上面問題。我們先說一下 SSR 的具體表現，比如我們現在有一個列表頁，列表中每一行對應一個詳情頁，那麼如果直接用瀏覽器訪問列表頁時，伺服器返回資料和 html 融合後的頁面，瀏覽器拿到頁面直接渲染，這就省去了先請求 js 再由 js 發起資料請求的過程，頁面渲染的同時請求js，js載入完成後繫結事件；從列表頁中點選某一條到詳情頁的時候，和普通的全棧 Ajax 一樣，先請求 js 再由 js 發起資料請求，然後填充資料渲染頁面。如果將詳情頁的連結複製出來，直接在新瀏覽中訪問，那麼詳情頁會直接返回資料和 html 融合後的頁面，渲染的同時請求詳情頁 js，最後再繫結事件。這個“伺服器端拼接 html 和 html 是由同樣的頁面和元件完成的，這種前後端採用同樣的結構在不同的環境中產出同樣的 html 的方案稱之為“同構”。
第二個是拼 html 層面，nuxt.config.js
代替了原來的index.html
，同時 webpack 中的一些配置也移到了這個檔案中，然後 layouts 下放全域性的導航和版權之類的資訊，<nuxt/>
作為同構的標識點，nuxt 內部是這樣處理的：
const renderer = require('vue-server-renderer').createRenderer();
// 定義一個 vue 元件
const app = new Vue({
// 讀取資料庫資料
async asyncData () {
let { data } = await axios.get('/api/users')
return { users: data }
},
data: {
url: req.url
},
template: `<div>Hello world.</div>`
});
renderer.renderToString(app, (err, html) => {
// 其中的 html 就是我們頁面需要的 html 片段
// 其中不包含公共部分，將上面的 html 片段放在頁面中是由 nuxt 來做的
});
在服務端 nuxt 會先執行 asyncData 函式，然後將拿到的資料放入 data 中，最後呼叫 renderToString 函式輸出 html 片段。
E:\my-study\VueCore\blognuxt\node_modules\nuxt\lib\core
https://www.imooc.com/article/37907