Vue3服务端渲染

1. SSR 基础

// server.js
import { createSSRApp } from 'vue';
import { renderToString } from 'vue/server-renderer';

const app = createSSRApp({
  template: '<div>{{ message }}</div>',
  data: () => ({ message: 'Hello SSR' }),
});

renderToString(app).then((html) => {
  console.log(html); // <div data-server-rendered="true">Hello SSR</div>
});

2. 同构应用

// 共享入口 main.js
import { createSSRApp } from 'vue';
import App from './App.vue';

export function createApp() {
  const app = createSSRApp(App);
  return { app };
}

// 客户端入口 entry-client.js
const { app } = createApp();
app.mount('#app');

// 服务端入口 entry-server.js
const { app } = createApp();
return renderToString(app);

3. 数据预取

// 使用 asyncData 预取数据
export default {
  async asyncData({ params }) {
    const data = await fetch(`/api/posts/${params.id}`).then((r) => r.json());
    return { post: data };
  },
};

4. Nuxt.js

npx nuxi init my-app
cd my-app && npm install && npm run dev

5. SSR 注意事项