揭秘Vue.js SSR：从入门到精通，构建高性能Vue应用

2024-02-04 01:13:31

Vue.js SSR：服务器端渲染的利器

服务器端渲染 (SSR) 的介绍

Vue.js 服务器端渲染 (SSR) 是一种技术，可将 Vue 组件渲染为 HTML 并将其发送给客户端。这种方法显著提高了页面的首次加载速度，尤其是在处理大量数据或复杂组件时。此外，SSR 还可以改善搜索引擎优化 (SEO)，因为搜索引擎可以抓取和索引页面内容。

SSR 的步骤与配置

1. 安装必要的依赖包

npm install vue-server-renderer

2. 创建服务器端入口文件

// entry-server.js
import Vue from 'vue'
import App from './App.vue'

export default new Vue({
  render: h => h(App)
})

3. 创建客户端入口文件

// entry-client.js
import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App)
}).$mount('#app')

4. 配置 webpack

// webpack.config.js
module.exports = {
  // ...
  target: 'node',
  // ...
  entry: {
    server: './entry-server.js',
    client: './entry-client.js'
  },
  // ...
}

5. 运行 webpack

npm run build

6. 启动服务器

node dist/server.bundle.js

优化 SSR 性能的技巧

1. 启用代码拆分

// webpack.config.js
module.exports = {
  // ...
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  },
  // ...
}

2. 使用服务端缓存

// entry-server.js
import { createServerRenderer } from 'vue-server-renderer'

const renderer = createServerRenderer()

app.get('*', (req, res) => {
  const cacheKey = req.url

  // 尝试从缓存中获取渲染结果
  const htmlCache = cache.get(cacheKey)
  if (htmlCache) {
    res.send(htmlCache)
    return
  }

  // 渲染Vue组件
  const context = { url: req.url }
  renderer.renderToString(App, context, (err, html) => {
    if (err) {
      res.status(500).send('服务器端渲染出错')
      return
    }

    // 将渲染结果缓存起来
    cache.set(cacheKey, html)

    // 发送渲染结果
    res.send(html)
  })
})

3. 使用预渲染

// entry-server.js
import { createServerRenderer } from 'vue-server-renderer'

const renderer = createServerRenderer()

app.get('*', (req, res) => {
  const context = { url: req.url }
  renderer.renderToString(App, context, (err, html) => {
    if (err) {
      res.status(500).send('服务器端渲染出错')
      return
    }

    res.send(`
      <!DOCTYPE html>
      <html>
        <head>
          
        </head>
        <body>
          <div id="app">${html}</div>
          <script src="/dist/client.bundle.js"></script>
        </body>
      </html>
    `)
  })
})