search

Molunerfinn / vue-koa-demo

:beginner:A simple full stack demo(CSR & SSR & Docker Support) written by Vue2 & Koa2(Koa1 verson also completed)
MIT License
756 stars 166 forks source link

ssr index.html的问题 #37

Closed twinkle77 closed 6 years ago

twinkle77 commented 6 years ago

模板index.html的代码

<body>
    <!--vue-ssr-outlet-->
</body>

app.vue的代码：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

entry-client.js代码

router.onReady(() => {
  app.$mount('#app')
})

由于app.vue具有id为app的元素, 所以服务端渲染的时候会返回

<div id="app" data-server-rendered="true">
   <img src="base64.xxxxx"/>
   ....
</div>

网页加载完成后，js开始执行，由于楼主写了app.$mount('#app'), 所以会把服务端渲染的<div id="app" data-server-rendered="true">替换掉，这样的服务端渲染是正确的吗？

感谢博主解答。ssr有点难呀。在踩着坑，哎。

Molunerfinn commented 6 years ago

关于服务端渲染的原理和流程，推荐你阅读一下这篇文章：https://imhjm.com/article/590710fbe3176b248999f88c

首先你要明白服务端渲染的作用是什么 以及 普通服务端渲染（基于字符串拼接）和Vue的服务端渲染区别是什么。 Vue的服务端渲染不仅要渲染出HTML吐给客户端浏览器，还需要客户端浏览器的vue接管吐过来的HTML里那些需要用上Vue的响应式的部分。所以需要在服务端标记一下，客户端Vue才知道这些是服务端渲染的需要它接管的部分。否则将会当做普通HTML对待。