从壹开始前后端分离 [ vue + .netcore 补充教程 ] 三十║ Nuxt实战：动态路由与Vuex状态树
【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
版权声明：本文为laozhang-is-phi原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。