宜宾网站建设公司

ssr和vue的区别有哪些

这篇文章将为大家详细讲解有关ssr和vue的区别有哪些，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

成都创新互联专注于企业成都营销网站建设、网站重做改版、砀山网站定制设计、自适应品牌网站建设、H5建站、商城网站建设、集团公司官网建设、外贸营销网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为砀山等各大城市提供网站开发制作服务。

ssr和vue的区别是：ssr是在服务器将组件渲染成HTML字符串后返回，而vue是在客户端发送请求后，服务器返回空的HTML、css、js等，组件在客户端进行渲染。

本文操作环境：windows10系统、Vue2.9.6版，DELL G3电脑。

ssr和vue的区别是

ssr是vue的服务端渲染技术,nuxt是一个可以用来做ssr服务端渲染开发的框架.
ssr是技术基础,nuxt是封装

一、什么是SSR

Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。全部的操作都是在客户端运行. 在这种情况下, 生命周期 mounted 之前 ,看不到任何东西的, 或者如果我们的客户端瑞浏览器,禁用了js功能的话, 就会一片空白
然而，vuejs 也可以将同一个vue组件在服务器端直接就渲染为 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序

二、ssr与普通vue的区别

普通vue是客户端发送请求后,服务器返回空的HTML,css,js等,在客户端进行渲染
ssr是在服务器渲染成字符串后返回

ssr和vue的区别有哪些

三、渲染一个vue实例

初始化

npm init

下载安装

npm install vue vue-server-renderer --save

创建一个js

// 第 1 步：创建一个 Vue 实例
const Vue = require('vue')
const app = new Vue({
  template: `
Hello World
`
})

// 第 2 步：创建一个 renderer
const renderer = require('vue-server-renderer').createRenderer()

// 第 3 步：将 Vue 实例渲染为 HTML
renderer.renderToString(app, (err, html) => {
  if (err) throw err
  console.log(html)
  // => Hello World
}) // 在 2.5.0+，如果没有传入回调函数，则会返回 Promise： renderer.renderToString(app).then(html => {   console.log(html) }).catch(err => {   console.error(err) })

调出终端显示效果

node 文件名,显示

Hello World

ssr和vue的区别有哪些

四、与服务器集成

下载安装

npm install express --save

js

// 第 1 步：创建一个 Vue 实例
const Vue = require('vue')
const express = require('express')//创建服务器
const app = new Vue({
    template: `
Hello World
`
})

const server = express()


// 第 2 步：创建一个 renderer
const renderer = require('vue-server-renderer').createRenderer()

// 在 2.5.0+，如果没有传入回调函数，则会返回 Promise：
renderer.renderToString(app).then(html => {
    console.log(html)
}).catch(err => {
    console.error(err)
})

server.get("*", (req, res) => {

    // 第 3 步：将 Vue 实例渲染为 HTML
    renderer.renderToString(app, (err, html) => {
        if (err) throw err
        console.log(html)

        res.send(html)

        // => Hello World
    }) }) //打开服务器,监听端口等待浏览器访问 server.listen(8080, (err) => {     console.log("ok"); })

效果

输入127.0.0.1:8080

ssr和vue的区别有哪些

四、为什么/要不要使用服务器端渲染 (SSR)？

与传统 SPA (单页应用程序 (Single-Page Application)) 相比，服务器端渲染 (SSR) 的优势主要在于：

关于“ssr和vue的区别有哪些”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。


网站标题：ssr和vue的区别有哪些
本文地址：http://ybzwz.com/article/giogpe.html

其他资讯