Quelle est la différence entre ssr et vue

La différence entre ssr et vue est la suivante : ssr est renvoyé après que le serveur a rendu le composant dans une chaîne HTML, tandis que vue est après que le client a envoyé une requête, le serveur renvoie du HTML, css, js, etc. vides, et le composant est rendu sur le client.

L'environnement d'exploitation de cet article : système Windows 10, Vue version 2.9.6, ordinateur DELL G3.

Quelle est la différence entre ssr et vue ?

ssr est la technologie de rendu côté serveur de vue, et nuxt est un outil qui peut être utilisé pour faire ssr est un cadre pour le développement de rendu côté serveur ssr是vue的服务端渲染技术,nuxt是一个可以用来做ssr服务端渲染开发的框架.
ssr是技术基础,nuxt是封装

一、什么是SSR

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

二、ssr与普通vue的区别

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

三、渲染一个vue实例

初始化

npm init

下载安装

npm install vue vue-server-renderer --save

创建一个js

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

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

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

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

调出终端显示效果

node 文件名,显示<p>Hello World</p>

四、与服务器集成

下载安装

npm install express --save

js

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

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)

        // => <div>Hello World</div>
    })

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

效果

输入127.0.0.1:8080ssr est la base technique, et nuxt est le package.

1. Qu'est-ce que SSR

Vue.js est un framework pour créer des applications côté client. Par défaut, le composant Vue peut être généré dans le navigateur pour générer du DOM et faire fonctionner le DOM. Toutes les opérations sont exécutées côté client. Dans ce cas, rien ne peut être vu avant le cycle de vie monté, ou si notre navigateur client est désactivé la fonction js, ce sera le cas. blank

Cependant, vuejs peut également restituer le même composant vue directement dans les chaînes HTML côté serveur>, les envoyer directement au navigateur, et enfin "activer" ces balises statiques dans des applications entièrement interactives sur le client

2. La différence entre ssr et vue ordinaire

Normal vue code> signifie qu'après que le client envoie une requête, le serveur revient vide <code>HTML, css, js, etc., qui sont rendus sur le client. ssr est renvoyé après que le serveur l'ait rendu dans une chaîne
• 
• 
  3. Rendre une instance de vue
• Initialisation
• npm init
• 
  
Télécharger et installer

npm install vue vue-server-renderer --saveCréer un js

rrreee🎜 Appeler l'effet d'affichage du terminal 🎜🎜 nom du fichier du nœud, afficher <p>Hello World</p>🎜🎜🎜

Quatre. Intégration avec le serveur

🎜Télécharger et installer🎜🎜npm install express -- save🎜🎜js🎜rrreee🎜Effect🎜🎜Input 127.0.0.1:8080🎜🎜🎜🎜🎜 4. Pourquoi/devriez-vous utiliser le rendu côté serveur (SSR) ? 🎜🎜Par rapport au SPA (Single-Page Application) traditionnel, les avantages du rendu côté serveur (SSR) sont principalement : 🎜🎜🎜Un meilleur référencement, car les robots des moteurs de recherche peuvent visualiser directement l'intégralité de la page rendue. 🎜🎜 Délai d'accès au contenu plus rapide, en particulier pour les conditions de réseau lentes ou les appareils lents. Au lieu d'attendre que tout le JavaScript soit téléchargé et exécuté, vos utilisateurs verront une page entièrement rendue plus rapidement. 🎜 Il existe certains compromis lors de l'utilisation du rendu côté serveur (SSR) : 🎜🎜Conditions de développement limitées. Le code spécifique au navigateur ne peut être utilisé que dans certains hooks de cycle de vie ; certaines bibliothèques externes peuvent nécessiter un traitement spécial pour s'exécuter dans les applications rendues par le serveur. 🎜🎜Plus d'exigences concernant la configuration et le déploiement de la build. Contrairement aux applications monopage (SPA) entièrement statiques, qui peuvent être déployées sur n'importe quel serveur de fichiers statiques, les applications rendues par le serveur nécessitent un environnement d'exécution de serveur Node.js. 🎜🎜Plus de charge côté serveur. Le rendu d'une application complète dans Node.js nécessitera évidemment plus de ressources CPU (consommateurs en CPU) qu'un serveur qui ne sert que des fichiers statiques, donc si vous prévoyez de l'utiliser dans un environnement à fort trafic (trafic élevé), veuillez préparer les charges du serveur en conséquence et utilisez judicieusement les stratégies de mise en cache. 🎜 Avant d'utiliser le rendu côté serveur (SSR) pour votre application, la première question que vous devez vous poser est de savoir si vous en avez vraiment besoin. Cela dépend principalement de l’importance du délai de création du contenu pour l’application. Par exemple, si vous créez un tableau de bord interne, quelques centaines de millisecondes supplémentaires lors du chargement initial n'auront pas d'importance, et l'utilisation du rendu côté serveur (SSR) serait une évidence. Cependant, les exigences de temps de mise en ligne du contenu constituent une mesure absolument critique et, dans ce cas, le rendu côté serveur (SSR) peut vous aider à obtenir des performances de chargement initiales optimales. 🎜🎜🎜【Recommandation associée : "🎜Tutoriel vue.js🎜"】🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!