SSR - VUE

什么是 SSR

SSR是服务端渲染（Server-Side Rendering）的缩写。它是一种在服务器端进行页面渲染的技术，其核心优势在于能够提高页面的加载速度和SEO效果。具体来说，SSR是指将前端页面直接在服务器端进行渲染，然后将渲染后的HTML代码发送到客户端浏览器。这样，用户在访问网站时，可以直接看到已经渲染好的页面内容，无需等待JavaScript代码的执行。因此，SSR能够显著提高页面的首屏加载速度，同时也有利于搜索引擎对页面的索引和排名。

如何实现

创建一个新文件夹 cd 进入
执行 npm init -y
在 package.json 中添加 "type": "module"
执行 npm install vue 或者 yarn add vue
创建一个服务端和客户端共享的模板文件 app.js、客户端文件 client.js、服务端文件 server.js
执行 node server.js
在浏览器打开 http://localhost:3000 地址查看

// app.js (在服务器和客户端之间共享)
import { createSSRApp } from 'vue'

export function createApp() {
  return createSSRApp({
    data: () => ({ count: 1 }),
    template: `<button @click="increase">{{ count }}</button>`,
    methods: {
      increase() {
        this.count += 2;
      }
    }
  })
}

// client.js
import { createApp } from './app.js'

createApp().mount('#app')

// server.js
import { fileURLToPath } from 'url'
import { dirname } from 'path'
import fs from 'fs'
import path from 'path'
import express from 'express'
import { renderToString } from 'vue/server-renderer'
import { createApp } from './app.js'

const server = express()
const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)

server.get(/.js$/, (req, res) => {
  const filePath = path.join(__dirname, req.url);
  fs.readFile(filePath, 'utf-8', (err, data) => {
    if (err) {
      res.status(500).send('Error reading file');
      return;
    }
    res.type('.js').send(data);
  });
});

server.get('/', (req, res) => {
  const app = createApp()
  renderToString(app).then(html => {
    res.send(`
    <!DOCTYPE html>
    <html>
      <head>
        <title>Vue SSR Example</title>
        <script type="importmap">
          {
            "imports": {
              "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
            }
          }
        </script>
        <script type="module" src="./client.js"></script>
      </head>
      <body>
        <div id="app">${html}</div>
      </body>
    </html>
    `)
  })
})

server.listen(3000, () => {
  console.log('http://localhost:3000')
})

VUE 服务端渲染小白版 SSR

SSR - VUE

什么是 SSR

如何实现