为什么要用vue的服务端渲染 • Worktile社区

不及物动词

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

使用Vue的服务端渲染（Server Side Rendering，SSR）有以下几个原因：

首先，提高首次加载速度。传统的客户端渲染（Client Side Rendering，CSR）会先将HTML下载到浏览器，然后通过JavaScript动态渲染页面。这意味着用户在加载页面时需要等待一段时间才能看到内容。而使用SSR后，服务器会在返回HTML之前将页面渲染完成，用户可以更快地看到页面内容。这对于提升用户体验和SEO（搜索引擎优化）非常重要。

其次，提高搜索引擎的可索引性。由于传统的CSR在页面加载时需要通过JavaScript才能生成内容，搜索引擎爬虫无法抓取到完整的HTML，从而降低了页面的可索引性。而SSR在服务器端渲染页面后，能够提供完整的HTML给搜索引擎爬虫，让搜索引擎更好地理解和索引页面内容，提升网站的搜索排名。

此外，提高移动端的性能和用户体验。移动设备的资源相对有限，通过SSR可以减轻客户端的计算负担，降低页面加载时间和功耗，提升移动端用户的浏览体验。

另外，便于SEO优化。SEO（Search Engine Optimization）即搜索引擎优化，是提高网站在搜索引擎中排名的一种方式。搜索引擎主要通过抓取网页内容来判断网站的质量和相关性，而传统的CSR对于搜索引擎爬虫来说，页面内容是动态生成的，很难进行有效的分析和抓取。而SSR可以提供静态的HTML给搜索引擎爬虫，让搜索引擎更好地理解和收录网页内容，从而提升网站在搜索结果中的排名。

综上所述，使用Vue的服务端渲染可以提高网页的加载速度，提升用户体验和SEO优化，特别适用于需要快速加载和提高搜索可索引性的场景。

2年前 0条评论

fiy

Worktile&PingCode市场小伙伴

Vue.js是一种用于构建用户界面的JavaScript框架。它的主要目标是通过提供数据驱动的组件方式，简化Web应用程序开发。Vue.js的服务端渲染（SSR）是一种将Vue组件在服务器上预先渲染，并将渲染结果直接返回给浏览器的技术。使用Vue的服务端渲染有以下几个优点：

更好的SEO：因为搜索引擎爬虫在抓取网页时只会获取到静态的HTML内容，无法执行JavaScript代码。而使用Vue的服务端渲染可以在服务器上将Vue组件渲染成HTML，并返回给搜索引擎，从而实现更好的SEO效果。
更快的首次加载时间：使用服务端渲染可以提供更快的首次加载时间。当用户访问一个使用Vue的应用时，如果应用只是作为一个静态的HTML文件提供，用户可以立即看到渲染的内容，而不需要等待整个JavaScript文件下载和执行完成。这减少了用户等待的时间，提高了用户体验。
更好的性能：由于服务器可以预先渲染Vue组件，减少了客户端的工作量。这可以提高页面的加载速度和响应速度，并减少了客户端的资源占用。这尤其对于移动设备和慢速网络连接的用户来说非常重要。
更好的可维护性：使用服务端渲染可以将前后端分离，提高系统的可维护性。前端开发人员只需要关注UI界面的开发，而后端开发人员负责处理数据的获取和处理。这样可以大大减少开发人员之间的耦合性，提高开发效率。
更好的可访问性：使用服务端渲染可以为不支持JavaScript的用户提供一个更好的访问体验。因为服务端渲染可以在服务器上生成静态HTML页面，不需要依赖于客户端的JavaScript执行。这就使得那些无法或不愿意使用JavaScript的用户也能正常浏览网页。

2年前 0条评论

worktile

Worktile官方账号

Vue.js是一个非常流行的JavaScript框架，它通过响应式的数据绑定和组件化的开发模式，使得构建交互性的Web应用变得更加容易和高效。在Vue.js中，我们可以使用客户端渲染（Client-side Rendering，CSR）来构建具有动态交互效果的单页应用（SPA）。然而，当SPA需要支持搜索引擎优化（SEO）或提供更好的首次加载性能时，服务端渲染（Server-side Rendering，SSR）就显得非常有用。

支持SEO：传统的SPA在首次加载页面时，HTML文档中往往只包含一个空的容器元素（如<div id="app"></div>），页面的内容通过JavaScript动态渲染生成。这种情况下，搜索引擎无法获得页面的完整内容，对SEO不友好。而使用SSR，服务器端会将Vue组件渲染成完整的HTML字符串，搜索引擎可以直接获取到页面的完整内容，提高了页面的搜索可见性。
提高首次加载性能：客户端渲染的SPA在首次加载页面时，需要先下载HTML文档，再下载并执行JavaScript，最后才能渲染页面内容。这个过程需要一定的时间，影响了页面的首次加载性能。而使用SSR，服务器端已经将页面渲染为完整的HTML文档，用户不需要等待JavaScript加载和渲染，页面内容会更快地呈现给用户，提高了首次加载性能。
更好的用户体验：由于SSR能够在服务器端生成页面内容，服务器可以根据请求的路径和参数进行数据预加载，减少客户端请求和渲染的时间。这样可以提供更快的加载速度和更好的用户体验。

下面是使用Vue的服务端渲染的方法和操作流程：

安装Vue的SSR插件：

npm install vue vue-server-renderer express

创建服务端渲染的代码文件：

创建一个文件，例如app-server.js，添加以下代码：

const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer()

// 创建Vue实例
const app = new Vue({
  template: `<div>Hello World</div>`
})

// 处理http请求
server.get('*', (req, res) => {
  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error')
      return
    }
    res.end(`<html><body>${html}</body></html>`)
  })
})

// 监听端口
server.listen(8080)

编译和打包客户端代码：

在项目的根目录下创建一个文件，例如app-client.js，将以下代码添加到文件中：

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

// 创建Vue实例
new Vue({
  render: h => h(App)
}).$mount('#app')

然后，在命令行中运行以下命令：

npm install babel-loader vue-loader vue-template-compiler webpack webpack-cli webpack-node-externals -D

创建一个webpack.config.js文件，并添加以下配置：

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  target: 'node',
  entry: './app-client.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

然后，在命令行中运行以下命令来编译和打包客户端代码：

npx webpack --config webpack.config.js

运行服务端渲染的代码：

在命令行中运行以下命令来运行服务端渲染的代码：

node app-server.js

现在，您可以在浏览器中访问localhost:8080来查看服务端渲染的页面效果。

需要注意的是，服务端渲染需要在一个Node.js环境中运行，所以需要在服务器上设置相应的环境。

2年前 0条评论