Comment faire un rendu côté serveur dans Vue ?

Vue est un framework JavaScript populaire qui fournit des outils et des composants pour créer facilement des interfaces utilisateur. À mesure que les applications Web deviennent plus complexes, le rendu côté serveur (SSR) peut offrir de meilleures performances et une meilleure expérience utilisateur. Vue 2.0 introduit le support SSR, nous permettant d'utiliser Vue pour SSR. Cet article explique comment effectuer un rendu côté serveur dans Vue.

Qu'est-ce que le rendu côté serveur ?

Dans une application de rendu côté client typique, le navigateur charge des pages HTML et des fichiers JavaScript. Lorsqu'un utilisateur interagit avec une application, JavaScript envoie des requêtes au serveur, obtient des données et met à jour la page. Cette approche peut offrir une excellente expérience utilisateur, mais elle peut également présenter certains inconvénients. Premièrement, les robots des moteurs de recherche n’exécutent généralement pas JavaScript, ce qui signifie que nous ne pourrons peut-être pas inclure toutes les pages de votre application. Deuxièmement, le temps de chargement initial peut être lent car le navigateur doit attendre que le JavaScript soit téléchargé et exécuté avant de pouvoir commencer à restituer l'interface.

Le rendu côté serveur résout ces problèmes. En SSR, le serveur envoie simultanément HTML et JavaScript au navigateur lors du rendu de la page. Cela signifie que les moteurs de recherche peuvent facilement explorer le site et que les temps de chargement initiaux des pages sont plus rapides car le navigateur n'a pas besoin d'attendre le téléchargement de JavaScript avant de commencer le rendu. De plus, SSR peut améliorer les performances des applications sur les appareils bas de gamme, qui manquent souvent de moteurs JavaScript puissants.

Pourquoi utiliser SSR dans Vue ?

Vue est un framework de rendu côté client. Il utilise le DOM virtuel et des composants asynchrones pour fournir des temps de réponse de page incroyablement rapides. Cependant, à mesure que les applications deviennent plus complexes, le rendu côté client présente certains inconvénients. Par exemple :

• Temps de chargement initial long : étant donné que le navigateur doit télécharger et exécuter des fichiers JavaScript, le temps de chargement initial de votre application peut être long.
• Support SEO limité : les moteurs de recherche n'exécutent généralement pas JavaScript, ce qui signifie que nous ne pourrons peut-être pas indexer toutes les pages.
• Pas adapté aux appareils bas de gamme : certains appareils bas de gamme peuvent ne pas être en mesure de gérer de grandes quantités de JavaScript, ce qui entraîne une lenteur ou un crash de l'application.
• Pas bon pour les robots d'exploration : étant donné que les moteurs de recherche ne peuvent pas exécuter JavaScript, nous ne pourrons peut-être pas amener les robots d'exploration à indexer correctement nos pages.

SSR peut résoudre les problèmes ci-dessus et offrir de meilleures performances et une meilleure expérience utilisateur. Par conséquent, Vue fournit le support SSR, nous permettant de restituer les applications Vue côté serveur.

Étapes pour effectuer SSR dans Vue

L'exécution de SSR dans Vue est divisée en les étapes suivantes :

1. Créer une instance d'application Vue.
2. Créer et configurer un serveur (Node.js).
3. Configuration du serveur pour gérer notre application Vue.
4. Créez un itinéraire pour gérer le chemin de notre page.
5. Rendu de notre application Vue dans le serveur.

Examinons maintenant chaque étape, étape par étape, pour mieux comprendre la RSS.

Étape 1 : Créer une instance d'application Vue

Tout d'abord, nous devons créer une instance Vue et définir le modèle de l'application. Lors du rendu côté client, nous définissons généralement le modèle de l'application dans le fichier index.html. Mais en SSR, nous devons le créer côté serveur. Voici un exemple simple :

// app.js
import Vue from 'vue';
import App from './App.vue';

export function createApp() {
  return new Vue({
    render: h => h(App)
  });
}

Le code ci-dessus exporte une fonction appelée createApp qui crée et renvoie une nouvelle instance de Vue. Cet exemple utilise notre composant racine App.vue pour restituer l'application. createApp 的函数，该函数创建并返回一个新的 Vue 实例。这个实例使用我们的根组件 App.vue 来渲染应用程序。

步骤2：创建和配置一个服务器

在步骤1中，我们创建了一个可以用于在服务器端渲染我们的 Vue 应用程序的 Vue 实例。现在，我们需要创建一个服务器来运行这个实例。我们使用 Node.js 来创建服务器。

以下是我们可以使用的基本服务器模板：

// server.js
const express = require('express');
const app = express();

// The port number to use.
const PORT = process.env.PORT || 3000;

// Serve static assets.
app.use(express.static('public'));

// Start the server.
app.listen(PORT, () => {
  console.log(`Server listening on port ${PORT}`);
});

上面的代码创建了一个简单的 Express 服务器，并让它监听本地端口 3000。这个服务器还可以使用 express.static 中间件来提供静态文件访问支持。

步骤3：配置服务器以处理我们的 Vue 应用程序

我们已经创建了服务器，现在需要配置服务器以处理我们的 Vue 应用程序。为此，我们需要使用 vue-server-renderer 依赖项。下面是完整的代码示例：

// server.js
const express = require('express');
const app = express();

// Include the Vue SSR renderer.
const renderer = require('vue-server-renderer').createRenderer();

// Import the createApp function from app.js.
const { createApp } = require('./app');

// The port number to use.
const PORT = process.env.PORT || 3000;

// Serve static assets.
app.use(express.static('public'));

// Handle all GET requests.
app.get('*', (req, res) => {
  // Create a new Vue app instance.
  const app = createApp();

  // Render the Vue app to a string.
  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error');
      return;
    }

    // Send the HTML response to the client.
    res.end(`
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <title>Vue SSR App</title>
        </head>
        <body>
          ${html}
        </body>
      </html>
    `);
  });
});

// Start the server.
app.listen(PORT, () => {
  console.log(`Server listening on port ${PORT}`);
});

上面的代码创建了一个完整的 Express 服务器，将请求和 Vue 实例关联起来，并使用 vue-server-renderer 包的 renderToString

Étape 2 : Créer et configurer un serveur

À l'étape 1, nous avons créé une instance Vue qui peut être utilisée pour restituer notre application Vue côté serveur. Maintenant, nous devons créer un serveur pour exécuter cette instance. Nous utilisons Node.js pour créer le serveur.

Voici un modèle de serveur de base que nous pouvons utiliser :

// app.js
import Vue from 'vue';
import App from './App.vue';
import { createRouter } from './router';

export function createApp() {
  const router = createRouter();

  return new Vue({
    router,
    render: h => h(App)
  });
}

Le code ci-dessus crée un simple serveur Express et le fait écouter sur le port local 3000. Ce serveur peut également fournir une prise en charge de l'accès aux fichiers statiques à l'aide du middleware express.static. 🎜🎜Étape 3 : Configurer le serveur pour gérer notre application Vue 🎜🎜Nous avons créé le serveur, nous devons maintenant configurer le serveur pour gérer notre application Vue. Pour cela, nous devons utiliser la dépendance vue-server-renderer. Voici l'exemple de code complet : 🎜

// router.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.use(Router);

export function createRouter() {
  return new Router({
    mode: 'history',
    routes: [
      { path: '/', component: Home },
      { path: '/about', component: About }
    ]
  });
}

🎜Le code ci-dessus crée un serveur Express complet, associe la requête à l'instance Vue et utilise le renderToStringvue-server-renderer. code> rend l'application Vue au format HTML. 🎜🎜Étape 4 : Créer un itinéraire 🎜🎜Nous sommes désormais en mesure de restituer notre application Vue côté serveur. Nous devons maintenant créer une route qui associe le chemin de notre page à la route côté serveur. Nous utilisons Vue Router pour créer des routes. 🎜🎜Voici un exemple simple :🎜

// app.js
import Vue from 'vue';
import App from './App.vue';
import { createRouter } from './router';

export function createApp() {
  const router = createRouter();

  return new Vue({
    router,
    render: h => h(App)
  });
}

// router.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.use(Router);

export function createRouter() {
  return new Router({
    mode: 'history',
    routes: [
      { path: '/', component: Home },
      { path: '/about', component: About }
    ]
  });
}

上面的代码分别在 app.js 和 router.js 文件中定义了我们的路由。在 app.js 文件中，我们创建了一个新的 Vue 实例并将路由器与其关联。在 router.js 文件中，我们使用 createRouter 函数来导出一个新的路由实例。

步骤5：在服务器中渲染我们的 Vue 应用程序

我们已经准备好工作了，现在需要在服务器中渲染我们的 Vue 应用程序。我们将使用步骤3中的代码，其中渲染器将 Vue 应用程序渲染为 HTML，最后将其发送回客户端。

现在让我们建立应用程序本身的代码。以下是我们简单的应用程序：

<!-- App.vue -->
<template>
  <div>
    <h1>{{ message }}</h1>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      message: 'Hello, Vue!'
    };
  }
};
</script>

在上面的组件中，我们定义了一个带有文本消息的标题。我们还使用 Vue Router 将组件关联到应用程序路径。

最后，在服务器上启动我们的应用程序。使用以下命令：

node server.js

现在，在浏览器中导航到 http://localhost:3000 应该显示我们的 Vue 应用程序。客户端和服务器端路由都应该正常工作。

结论

在本文中，我们了解了服务器端渲染 (SSR) 的概念。我们还了解了在 Vue 中执行服务器端渲染的步骤。我们了解了为什么在 Vue 中使用 SSR 很重要，以及如何使用 Node.js 和 vue-server-renderer 执行服务器端渲染。现在，你应该能够为你的下一个 Vue 应用程序使用 SSR 来提供更好的性能和用户体验。

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!