SSR-服务端渲染

你当像火烈鸟
466 阅读3分钟

SSR 即服务器端渲染（Server - Side Rendering），是一种在服务器端生成 HTML 页面，然后将其发送到客户端的技术。以下从原理、优缺点以及在 Vue 中的应用等方面进行介绍：

1. 原理

传统的单页应用（SPA）是在客户端通过 JavaScript 渲染页面，即浏览器加载 HTML 文件，然后下载 JavaScript 代码，在客户端执行 JavaScript 来获取数据并渲染页面。而 SSR 的工作流程如下：

  • 服务器处理：服务器接收到客户端的请求后，根据请求的 URL ，加载相应的 Vue 应用程序。服务器会实例化 Vue 应用，并在服务器端执行 Vue 应用的代码，包括获取数据、渲染组件等操作，最终生成完整的 HTML 页面。
  • 返回给客户端：服务器将生成好的 HTML 页面发送给客户端，客户端直接展示该 HTML 页面，此时页面已经包含了数据和样式。之后，客户端会加载 Vue 应用的 JavaScript 代码，进行 “激活”（hydration）操作，使页面具备交互性。

2. 优点

  • 更好的 SEO：搜索引擎爬虫在抓取页面时，通常不会执行 JavaScript 代码。对于传统的 SPA 应用，爬虫可能只能获取到一个空白的页面，导致 SEO 效果不佳。而 SSR 生成的是包含数据的完整 HTML 页面，搜索引擎可以直接抓取到页面的内容，有利于提高网站在搜索引擎中的排名。
  • 更快的首屏加载速度：由于服务器端已经生成了包含数据的 HTML 页面，客户端在接收到页面后可以直接展示，无需等待大量的 JavaScript 代码下载和执行，从而显著提高了首屏加载速度，提升用户体验。
  • 减少客户端负载：部分数据获取和渲染工作在服务器端完成，减少了客户端的计算压力，对于一些性能较低的设备或网络环境较差的用户，能够更快地看到页面内容。

3. 缺点

  • 服务器负载增加：由于需要在服务器端进行渲染操作，服务器的负载会显著增加，需要更多的服务器资源来支持。特别是在高并发的情况下，对服务器的性能要求更高。
  • 开发和部署复杂度提高：SSR 项目的开发和部署比传统的 SPA 项目更复杂。需要处理服务器端的配置、与服务器的交互、以及可能出现的同构问题（确保代码在服务器端和客户端都能正确运行）等。
  • 调试困难：由于涉及到服务器端和客户端的代码运行，调试过程相对复杂。当出现问题时，需要同时检查服务器端和客户端的代码，定位问题的难度较大。

4. 在 Vue 中的应用

在 Vue 中使用 SSR 可以借助 vue - server - renderer 这个官方库来实现。以下是一个简单的示例：

项目结构

收起

plaintext

├── server
│   ├── app.js         // 服务器端入口文件
│   └── server.js      // 启动服务器的文件
├── src
│   ├── App.vue        // Vue 应用组件
│   └── main.js        // 通用的入口文件
├── package.json

代码实现

  • src/App.vue

收起

vue

<template>
  <div>
    <h1>Hello, SSR!</h1>
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

  • src/main.js

收起

javascript

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

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

  • server/app.js

收起

javascript

import { createRenderer } from 'vue - server - renderer';
import { createApp } from '../src/main.js';

const renderer = createRenderer();

export default async (req, res) => {
  try {
    const app = createApp();
    const html = await renderer.renderToString(app);
    const page = `
      <!DOCTYPE html>
      <html lang="zh - CN">
      <head>
        <meta charset="UTF - 8">
        <title>Vue SSR</title>
      </head>
      <body>
        <div id="app">${html}</div>
      </body>
      </html>
    `;
    res.end(page);
  } catch (e) {
    res.statusCode = 500;
    res.end('Internal Server Error');
  }
};

  • server/server.js

收起

javascript

import express from 'express';
import app from './app.js';

const server = express();
server.use(app);

const port = 3000;
server.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

在上述示例中，src/main.js 创建了一个 Vue 应用实例的工厂函数 createApp。server/app.js 使用 vue - server - renderer 来渲染 Vue 应用，并将生成的 HTML 嵌入到一个完整的 HTML 页面中，然后返回给客户端。server/server.js 启动一个 Express 服务器来处理请求。

通过这种方式，就可以实现一个简单的 Vue SSR 应用。在实际项目中，还需要考虑更多的因素，如数据预取、路由处理、状态管理等。

avatar
文章
阅读
粉丝