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

worktile

Worktile官方账号

服务端渲染（Server-Side Rendering，SSR）是指在服务器端将Vue组件渲染成HTML字符串，然后将渲染生成的HTML字符串发送给客户端进行展示的过程。在传统的前端开发中，通常是通过客户端渲染（Client-Side Rendering，CSR）来生成并展示页面。而服务端渲染的特点是将页面的初始渲染工作放在服务器端完成，然后将渲染好的页面发送给客户端，客户端只需要负责展示和交互。

在Vue中，可以使用Vue服务器端渲染（Vue Server Renderer）模块来实现服务端渲染。让我们来看一下服务端渲染的工作流程：

构建Vue组件：创建一个Vue实例，并编写组件的模板、样式和逻辑代码。
创建服务端渲染实例：在服务器端，使用Vue服务器端渲染模块的createRenderer方法创建一个实例，该实例用于渲染Vue组件。
调用渲染方法：调用渲染实例的renderToString方法，并将要渲染的Vue组件传入。该方法会返回一个Promise对象，用于获取渲染生成的HTML字符串。
服务端路由：在渲染之前，我们可以根据请求的URL动态调整Vue组件的数据。这可以通过在服务端路由中使用Vue路由（Vue Router）来实现。
渲染结果返回给客户端：服务端渲染完成后，将生成的HTML字符串作为响应返回给客户端。
客户端激活：将返回的HTML字符串插入到客户端的DOM中，然后再通过客户端渲染来完成后续的交互操作。

服务端渲染的优点包括：

SEO友好：由于搜索引擎爬虫可以直接获取到渲染好的HTML，对搜索引擎的爬取和收录更加友好。
更好的性能：由于服务端渲染将初始渲染工作放在服务器端完成，用户在浏览器端首次请求页面时能够更快地看到页面的内容。
更好的用户体验：服务端渲染可以提供更好的首次加载体验，用户不需要等待JavaScript下载和执行完毕才能看到页面内容。

然而，服务端渲染也有一些限制和不足之处，例如对于复杂的交互和动画效果支持相对较差，增加了服务器端的负载，并且开发和部署过程相对复杂。因此，在选择使用服务端渲染还是客户端渲染时，需要根据具体的项目需求和实际情况做权衡。

1年前 0条评论

不及物动词

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

Vue中的服务端渲染（Server-Side Rendering，SSR）是指在服务器端将Vue组件渲染成HTML字符串，然后将它发送给浏览器显示。相比于传统的客户端渲染（Client-Side Rendering，CSR），SSR有以下几点特点：

更好的SEO：由于搜索引擎的爬虫主要依赖于HTML内容进行索引，而传统的客户端渲染在初始加载时只返回一个空的HTML模板，需要通过JavaScript来生成内容。而使用SSR后，服务器端会直接将内容渲染到HTML字符串中，搜索引擎可以直接获取到完整的HTML页面，有助于提升SEO效果。
更快的首屏加载速度：传统的客户端渲染需要等待JavaScript下载和执行完成后才能显示内容，而SSR在服务器端已经将内容渲染成了HTML字符串，浏览器只需要解析和渲染HTML，无需等待JavaScript完成，因此可以提前显示内容，加快首屏加载速度。
更好的用户体验：由于首屏加载速度更快，用户可以更快地看到内容，减少等待时间，提升用户体验。
更好的性能优化：在传统的客户端渲染中，首屏内容加载后，页面需要通过JavaScript和AJAX请求来获取数据，这样会造成额外的网络请求和延迟。而使用SSR后，服务器端已经在渲染时通过API获取了数据，可以直接将数据发送给浏览器，减少了额外的请求和延迟。
更好的支持无JavaScript环境：客户端渲染依赖于浏览器的JavaScript执行环境，如果用户的浏览器不支持JavaScript或用户禁用了JavaScript，那么页面将无法正常显示。而使用SSR后，即使用户的浏览器不支持JavaScript，服务器端也可以渲染出完整的HTML页面，保证页面的正常显示。

1年前 0条评论

fiy

Worktile&PingCode市场小伙伴

服务端渲染（Server Side Rendering，简称SSR）是指在服务器端将动态生成的HTML内容发送给浏览器进行展示的一种技术。

在传统的前端开发中，通常使用客户端渲染（Client Side Rendering，简称CSR）的方式。即通过加载一个空的HTML，然后在浏览器中执行JavaScript代码，动态生成页面的内容。这种方式对于简单的页面来说是可以接受的，但当页面复杂度增加、交互逻辑较多时，客户端渲染会造成首次加载时白屏时间过长、SEO（搜索引擎优化）困难等问题。

而服务端渲染则可以解决这些问题。它的基本原理是将整个页面的内容在服务器端生成好，并直接返回给浏览器展示，而不需要依赖客户端执行JavaScript来生成页面内容。这样可以减少客户端执行的工作量，加快首屏加载速度，并且对搜索引擎友好，能够更好地提升网站的SEO。

在Vue中，通过使用Vue的服务端渲染框架（Vue Server Renderer）可以实现服务端渲染。下面将介绍Vue服务端渲染的操作流程和相关配置。

一、服务端渲染的基本流程

创建Vue实例，并在其中定义组件、路由等相关配置。
在服务器端使用Vue的服务端渲染框架进行渲染，将整个页面的内容生成为一个字符串。
将生成的字符串发送给浏览器展示。

二、配置服务端框架

安装依赖：

npm install vue vue-server-renderer express

创建服务端入口文件（例如server.js），并配置：

const Vue = require("vue");
const express = require("express");
const server = express();

const app = new Vue({
  template: `<div>Hello World</div>`
});

const renderer = require("vue-server-renderer").createRenderer();

server.get("*", (req, res) => {
  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end("Internal Server Error");
      return;
    }
    res.end(html);
  });
});

server.listen(8080);

以上代码定义了一个基本的服务端渲染配置，使用Express框架监听端口8080，并将Vue实例渲染为字符串返回给浏览器。

三、创建客户端入口文件

创建一个新的JavaScript文件（例如entry-client.js），并配置：
```
import Vue from "vue";
import App from "./App.vue";

new Vue({
  render: h => h(App)
}).$mount("#app");
```
以上代码定义了一个新的Vue实例，将App组件渲染到id为"app"的DOM元素中。

四、创建Vue组件

创建一个新的Vue组件（例如App.vue），并配置：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello World"
    };
  }
};
</script>

五、打包和运行

根据服务端和客户端的入口文件，使用Webpack等工具进行打包，生成服务端和客户端的代码。
根据需要配置相应的构建脚本和服务启动脚本。
运行服务端，访问对应的URL，即可看到服务端渲染的效果。

通过以上的步骤，就可以实现Vue的服务端渲染。当浏览器访问页面时，会先通过服务端渲染生成页面的初始内容，然后在浏览器中重新激活Vue实例，绑定事件等。

1年前 0条评论