애플리케이션의 SEO 효과를 향상시키기 위한 Vue 3의 SSR 기술 적용 실습

npm install -g @vue/cli@4

vue create vue-ssr-demo

cd vue-ssr-demo
npm install vuex vue-router express

const express = require('express')
const { createBundleRenderer } = require('vue-server-renderer')
const server = express()

// 读取生成的bundle文件
const bundle = require('./dist/vue-ssr-server-bundle.json')
const renderer = createBundleRenderer(bundle, {
  runInNewContext: false,
  template: require('fs').readFileSync('./public/index.html', 'utf-8'),
  clientManifest: require('./dist/vue-ssr-client-manifest.json')
})

// 静态资源的路径
server.use(express.static('./dist'))

// 所有路由都交给Vue处理
server.get('*', (req, res) => {
  const context = { url: req.url }

  renderer.renderToString(context, (err, html) => {
    if (err) {
      console.error(err)
      if (err.code === 404) {
        res.status(404).end('Page not found')
      } else {
        res.status(500).end('Internal Server Error')
      }
    }

    res.end(html)
  })
})

// 启动服务器
server.listen(8080)
console.log('Server is running on http://localhost:8080')

"scripts": {
  "build:ssr": "vue-cli-service build --target node --ssr"
}

npm run build:ssr
node server.js

import { createSSRApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

export function createApp() {
  const app = createSSRApp(App)
  app.use(router)
  app.use(store)

  return { app, router, store }
}

import { createApp } from './main'

export default context => {
  return new Promise((resolve, reject) => {
    const { app, router, store } = createApp()

    router.push(context.url)

    router.isReady().then(() => {
      context.rendered = () => {
        context.state = store.state
      }
      resolve(app)
    }, reject)
  })
}