avalon-server-render-example
avalon-server-render-example copied to clipboard
RubyLouvre
服务端渲染异步取数据后渲染的问题
我定义了一个异步的render函数，从另一个服务器取来了首屏需要的数据 arr， 在渲染之前通过vm.arr = arr，让服务端成功渲染模版得到了需要的html。 然后，由于avalon.define部分的代码会在客户端再执行一遍(arr为空)，又把服务端渲染的html给覆盖掉了。 请问有什么解决方案吗？
app.js
async function render(){
let res = await axios.get('http://127.0.0.1/test.json')
vm.arr = res.data.arr;
var obj = serveRender(vm, page)
for(var i in obj.templates){
obj.templates[i] = minify(obj.templates[i],{
collapseInlineTagWhitespace: true,
collapseWhitespace:true
})
}
var files = JSON.stringify(obj.templates)
var header = '<!document html><html><head>'+
'<script src="./avalon2.2.js"><\/script>'+
'<script src="./vm.js"><\/script>'+
'<script> avalon.serverTemplates= ' + files + '<\/script>' +
'</head><body>'
var footer = '</body></html>'
return header + obj.html + footer
}
app.use(async function(ctx){
var html = await render();
ctx.body = html
})
vm.js
let vm = avalon.define({
$id: 'test',
aaa: 'test',
arr: [],
fn: function(){
avalon.log('渲染完成。')
}
});
module.exports = vm
