vue 服务器渲染是什么 • Worktile社区

fiy

Worktile&PingCode市场小伙伴

Vue服务器渲染（Server-side rendering，简称SSR）是指在服务器端将Vue组件渲染为HTML字符串，然后再将这些字符串发送到客户端，并激活为完全可交互的页面的过程。

传统的前端渲染方式是在浏览器中通过JavaScript动态生成DOM，然后插入到页面中。虽然这种方式实现了动态交互，但是由于需要在浏览器中执行JavaScript，一些搜索引擎爬取工具无法正确解析页面内容，导致页面的搜索引擎优化（SEO）效果较差。

Vue服务器渲染解决了这个问题，它将Vue组件在服务器端直接渲染成HTML字符串，并将其作为响应内容发送给客户端。这样搜索引擎爬取工具就能够正确解析页面内容，并且大大提高了首屏加载速度和用户体验。

Vue服务器渲染的实现原理是将Vue组件转换为可在服务器上运行的渲染函数，这个渲染函数负责将组件渲染为HTML字符串。在请求到达服务器时，服务器会根据请求的URL匹配相应的组件，执行渲染函数得到HTML字符串，然后将其发送给客户端。

Vue服务器渲染的优势在于提供了更好的SEO效果和更快的首屏加载速度。但是由于服务器渲染需要在服务器上执行渲染函数，会增加服务器的负载，因此在选择是否使用服务器渲染时需要权衡考虑项目的实际需求和服务器资源。

1年前 0条评论

worktile

Worktile官方账号

Vue服务器渲染（Vue Server-Side Rendering，SSR）是一种在服务器端动态生成完整的HTML页面的方法。在传统的Vue应用中，Vue会在浏览器中通过JavaScript生成并动态更新DOM，这个过程被称为客户端渲染（Client-Side Rendering，CSR）。而服务器渲染则是在服务器端将Vue组件渲染为HTML字符串，然后将这个HTML字符串发送给浏览器进行展示。

服务器渲染的工作流程如下：

客户端发送请求到服务器。
服务器接收到请求，并根据请求的URL确定要渲染的Vue组件。
服务器创建一个新的Vue实例，并将请求的数据传入组件。
服务器调用Vue实例的渲染函数，将组件渲染为HTML字符串。
服务器将HTML字符串发送给客户端。
客户端收到HTML字符串后，浏览器会将其解析为DOM，并且执行JavaScript代码。
客户端的Vue实例接管之前服务器端渲染的实例，并且将其复用，继续处理后续的交互和更新。

服务器渲染的优点包括：

更好的SEO：由于搜索引擎爬虫无法执行JavaScript代码，传统的客户端渲染对于SEO不友好。而服务器渲染可以在服务器端生成完整的HTML页面，可以被搜索引擎爬虫直接抓取，有利于提升网站的排名。
更快的首次加载时间：客户端渲染需要在浏览器中下载和执行JavaScript代码，然后才能渲染页面，导致首次加载时间较长。而服务器渲染将页面内容在服务器端生成并直接返回给浏览器，减少了页面渲染时间，提升了用户体验。
更好的性能表现：服务器渲染可以在服务器端执行高效的数据处理和模板渲染，减轻了客户端的工作负载，提升了应用的性能表现。
更好的用户体验：服务器渲染可以在首次加载时直接展示完整的页面内容，而不需要等待JavaScript代码的下载和执行。这样可以提供更好的用户体验，特别是对于低网速或者弱网络环境的用户。
更好的可维护性：服务器渲染把页面的渲染逻辑从前端代码中转移至后端服务器，使前端开发人员更专注于页面的交互和用户体验，简化了前端开发的复杂性，提高了代码的可维护性。

1年前 0条评论

不及物动词

这个人很懒，什么都没有留下～

Vue 服务器渲染（Vue Server-side Rendering，SSR）是指将 Vue 应用在服务器上进行渲染，并将渲染好的 HTML 页面传递给浏览器，然后在浏览器端重新激活为可交互的应用。与传统的客户端渲染（Client-side Rendering，CSR）相比，服务器渲染具有更好的性能和更好的 SEO。

在传统的客户端渲染中，浏览器会请求一个入口 HTML 文件，然后加载 JavaScript 文件，执行 JavaScript 代码来生成 DOM，并在浏览器中渲染页面。这种方式的缺点是用户首次访问时加载时间较长，会有白屏等劣化体验，并且对于 SEO 不友好。

而服务器渲染的 Vue 应用，是在服务器上进行渲染的，服务器可以处理请求，并生成已经渲染好的 HTML 页面。当浏览器请求这个 HTML 页面时，会直接得到一个已经包含所有内容的页面，无需等待 JavaScript 的加载和执行，因此能够更快地展示页面内容，提升用户体验。

下面是服务器渲染的操作流程：

首先，需要安装 Vue CLI 脚手架工具：

npm install -g @vue/cli

创建一个新的 Vue 项目：

vue create my-project

在创建项目的过程中，选择服务器渲染模式：

选择 "Manually select features"
然后选择 "Customize configurations"
再选择 "Choose rendering mode", 然后选中 "Server" 并回车

安装依赖：

cd my-project
npm install

构建项目：

npm run build

配置服务器端入口：

打开 src/entry-server.js 文件
编写服务器端入口代码，如下所示：

import { createApp } from './main';

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

    router.push(context.url);

    router.onReady(() => {
      const matchedComponents = router.getMatchedComponents();

      if (!matchedComponents.length) {
        return reject({ code: 404 });
      }

      resolve(app);
    }, reject);
  });
};

创建服务器：

安装 Express 或者 Koa 等服务器框架
在服务器代码中使用 vue-server-renderer 来渲染应用，示例代码如下：

const express = require('express');
const server = express();
const { createBundleRenderer } = require('vue-server-renderer');
const renderer = createBundleRenderer(require('./dist/vue-ssr-server-bundle.json'), {
  template: require('fs').readFileSync('./index.html', 'utf-8'),
  runInNewContext: false
});

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');
      }
    } else {
      res.end(html);
    }
  });
});

server.listen(3000, () => {
  console.log('Server is running at http://localhost:3000/');
});

这样，一个基本的 Vue 服务器渲染就完成了。当浏览器请求服务器时，服务器会根据请求的 URL 来渲染对应的页面，并返回给浏览器显示，从而实现了服务器端渲染的效果。这种方式不仅可以提高首次加载的速度，还可以改善 SEO 的效果。

1年前 0条评论