Vue 同构

2024-01-09 13:29:10

## Vue同构（一）：快速上手

欢迎关注我的GitHub博客，这是对我莫大的鼓励。毕竟，写东西并不能变现，靠的是热情和大家的支持。我们收到服务器的模板中其实并没有我们所期待界面对应的html结构，而仅有一个用于挂载应用的根元素，在客户端浏览器执行加载的JavaScript代码会负责将模板转换成一个带有数据的完整DOM树。

同构的优势

同构有几个优点：

更好的SEO： 搜索引擎可以抓取和索引单页面应用程序（SPA），即使它们使用JavaScript进行呈现。
更快的加载时间： 对于初始加载，服务器可以预先呈现应用程序，从而减少加载时间。
更好的用户体验： 在客户端呈现应用程序时，闪烁的内容更少，这使得用户体验更流畅。

Vue.js中的同构

Vue.js提供了几种方法来实现同构：

服务端渲染（SSR）： 服务器预先渲染应用程序，并在客户端呈现。
客户端渲染（CSR）： 应用程序在客户端使用JavaScript进行渲染。
渐进式同构： 应用程序从SSR开始，然后逐步过渡到CSR。

快速上手SSR

让我们使用Vue.js快速上手SSR：

安装依赖项：

npm install --save-dev @vue/server-renderer

创建服务器入口点：

// server-entry.js
import { createApp } from './app'

export default context => {
  const { app, router } = createApp()

  router.push(context.url)

  return app
}

在服务器端渲染应用程序：

// server.js
import express from 'express'
import { renderToString } from '@vue/server-renderer'
import serverEntry from './server-entry.js'

const app = express()

app.get('*', async (req, res) => {
  const context = { url: req.url }
  const appHtml = await renderToString(serverEntry(context))

  res.send(`
    <!DOCTYPE html>
    <html>
      <head>

      </head>
      <body>
        <div id="app">${appHtml}</div>
        <script src="/dist/client-bundle.js"></script>
      </body>
    </html>
  `)
})

app.listen(3000)