什么是SSR？Vue中怎么实现的_vue.js

什么是SSR?

当我们谈论服务器端渲染（Server-Side Rendering，简称SSR）时，我们通常指的是在服务器端生成完整的HTML页面，然后将其发送到客户端，而不是在客户端浏览器中使用JavaScript进行渲染。这与传统的客户端渲染（Client-Side Rendering，简称CSR）方式相对。

以下是一些关于SSR的详细介绍：

1. 「工作原理」：

「客户端渲染 (CSR)」：在客户端，浏览器下载一个最小的HTML页面，并且使用JavaScript来填充页面内容。这种方式的一个缺点是，当页面加载后，搜索引擎爬虫和社交媒体爬取工具可能无法获取到完整的页面内容，因为它们在执行JavaScript时可能会有限制。
「服务器端渲染 (SSR)」：在服务器端，应用的初始请求会触发服务器生成完整的HTML页面。这个HTML页面包含了所有的页面内容，而不需要等待客户端执行JavaScript。这样，搜索引擎爬虫和社交媒体爬取工具可以更容易地理解和索引网页内容。

2. 「优点」：

「搜索引擎优化 (SEO)」：由于搜索引擎可以看到完整的页面内容，SSR 对于搜索引擎的优化更友好。搜索引擎可以更轻松地索引网站内容，提高搜索结果的质量。
「性能优化」：由于用户在访问页面时不需要等待JavaScript的加载和执行，初始渲染时间更快，用户体验更好。

3. 「注意事项」：

服务器端渲染可能增加服务器的负担，因为服务器需要处理更多的渲染工作。
在使用SSR时，一些浏览器端特有的功能（例如window对象）可能不可用，因为渲染过程是在服务器上进行的。
SSR并不是对所有应用都是必要的，它适用于那些对SEO友好且初始渲染性能要求较高的应用。

Vue中如何实现

在Vue.js中，"SSR" 通常指的是「Server-Side Rendering」，即服务器端渲染。服务器端渲染是一种在服务器上生成页面的技术，与传统的客户端渲染（在浏览器中渲染页面）相对。

Vue.js提供了一些工具和库，可以使用vue-server-renderer库来实现服务器端渲染。用于在服务器端渲染Vue.js应用。通过使用SSR，可以在Vue组件中编写用于服务器和客户端的代码，并确保两者之间的一致性。在服务器端渲染中，需要考虑数据预取（data pre-fetching），即在渲染之前获取和填充页面所需的数据。

以下是一个简要的步骤，说明如何在Vue.js中实现SSR：

「创建Vue.js应用」：使用Vue CLI或其他方式创建Vue.js应用。
「安装相关依赖」：确保安装了服务器端渲染相关的依赖。可能需要安装vue-server-renderer等相关包。

npm install vue-server-renderer --save

「创建服务器文件」：在项目中创建一个服务器文件，通常命名为server.js。这个文件将负责处理服务器端渲染的逻辑。

// server.js
const express = require('express');
const { createRenderer } = require('vue-server-renderer');
const app = express();


const renderer = createRenderer();


app.get('*', (req, res) => {
  const app = new Vue({
    data: { message: 'Hello, Vue SSR!' },
    template: '<div>{{ message }}</div>'
  });


  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error');
      return;
    }
    res.end(`
      <!DOCTYPE html>
      <html lang="en">
        <head><title>Vue SSR Demo</title></head>
        <body>${html}</body>
      </html>
    `);
  });
});


const port = 3000;
app.listen(port, () => {
  console.log(`Server started at http://localhost:${port}`);
});

「修改入口文件」：修改Vue.js应用的入口文件，通常是main.js，以支持服务器端渲染。

// main.js
import Vue from 'vue';
import App from './App.vue';


export function createApp() {
  const app = new Vue({
    render: (h) => h(App)
  });


  return { app };
}

「创建模板文件」：在根目录下创建一个HTML模板文件，用于在服务器端渲染时使用。

<!-- index.template.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>{{ title }}</title>
  </head>
  <body>
    <!--vue-ssr-outlet-->
  </body>
</html>

「更新服务器文件」：在服务器文件中引入相关的依赖，并使用创建的模板文件。

// server.js
const express = require('express');
const { createRenderer } = require('vue-server-renderer');
const fs = require('fs');
const path = require('path');
const { createApp } = require('./main');


const app = express();
const renderer = createRenderer({
  template: fs.readFileSync(path.resolve(__dirname, 'index.template.html'), 'utf-8')
});


app.get('*', (req, res) => {
  const { app } = createApp();


  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error');
      return;
    }
    res.end(html);
  });
});


const port = 3000;
app.listen(port, () => {
  console.log(`Server started at http://localhost:${port}`);
});