Vue excellente pratique - implémentation du rendu SSR de 0 à 1

Dans le développement web, le rendu SSR (Server Side Rendering) est une technologie très critique. Il peut terminer le rendu initial de la page sur le serveur, puis transmettre le fichier HTML rendu au client pour affichage. Par rapport au rendu côté client (CSR) traditionnel, le rendu SSR peut améliorer la vitesse de chargement sur le premier écran des pages Web, les capacités d'optimisation des moteurs de recherche, etc. Cet article présentera comment implémenter le rendu SSR via le framework Vue.

1. Créer un projet Vue
   Tout d'abord, nous devons créer un projet Vue de base. Exécutez la commande suivante dans le terminal :

vue create my-ssr-app

Avec cette commande, nous pouvons créer rapidement un projet de base Vue, puis entrer dans le répertoire du projet via la commande :

cd my-ssr-app

2. Ajouter des dépendances SSR
   Ensuite, nous devons ajouter SSR -dépendances liées. Entrez les commandes suivantes dans le terminal :

npm install --save vue vue-server-renderer express

• vue : une dépendance du framework Vue lui-même.
• vue-server-renderer : moteur de rendu SSR pour Vue.
• express : Un framework d'application web basé sur Node.js.

La commande ci-dessus installera automatiquement les dépendances dans le fichier package.json du projet. package.json文件中。

3. 修改Vue入口文件
   在src目录下，我们可以找到main.js文件，这是Vue框架的入口文件。我们需要进行修改，以支持SSR渲染。首先，我们需要将Vue的实例转变为一个工厂函数，这样在SSR时，可以为每个请求创建一个新的实例。将原本的：

new Vue({
  render: h => h(App),
}).$mount('#app')

修改为：

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

然后，我们需要将createApp函数导出，在后面创建服务器脚本时会用到。

4. 创建服务器脚本
   在项目根目录下，我们需要创建一个服务器脚本。在项目根目录下创建一个名为server.js的文件。在该文件中，我们需要导入相关的依赖，然后创建一个简单的服务器：

const express = require('express')
const server = express()
const { createBundleRenderer } = require('vue-server-renderer')
const renderer = createBundleRenderer(require('./dist/vue-ssr-server-bundle.json'))
const template = require('fs').readFileSync('./index.html', 'utf-8')

server.use('/dist', express.static('./dist'))

server.get('*', (req, res) => {
  const context = { url: req.url }
  renderer.renderToString(context, (err, html) => {
    if (err) {
      console.error(err)
      res.status(500).end('Internal Server Error')
      return
    }
    res.end(template.replace('<div id="app"></div>', `<div id="app">${html}</div>`))
  })
})

server.listen(3000, () => {
  console.log('Server running at http://localhost:3000')
})

这段代码实现了一个简单的Express服务器，它会将./dist目录下的静态文件暴露在/dist路由下，并且对于所有路由请求（*），使用createBundleRenderer方法从vue-ssr-server-bundle.json文件中读取server bundle，并且将渲染后的HTML文本映射到一个基础的HTML模版中，将最终结果返回给客户端。

5. 进行构建并启动服务器
   在终端运行以下命令：

npm run build
npm run serve

其中，npm run build命令会将src目录下的代码构建为server bundle和client bundle，并且将构建后的结果存放在dist目录下。npm run serve命令会启动服务器并监听3000端口。在浏览器中输入http://localhost:3000

Modifier le fichier d'entrée de Vue

Dans le répertoire src, on peut trouver le fichier main.js, qui est le fichier d'entrée de le framework Vue. Nous devons apporter des modifications pour prendre en charge le rendu SSR. Tout d'abord, nous devons convertir l'instance Vue en fonction d'usine afin qu'une nouvelle instance puisse être créée pour chaque requête pendant SSR. Remplacez l'original :

🎜rrreee🎜 par : 🎜rrreee🎜 Ensuite, nous devons exporter la fonction createApp, qui sera utilisée lors de la création ultérieure du script serveur. 🎜
🎜Créer un script serveur🎜Dans le répertoire racine du projet, nous devons créer un script serveur. Créez un fichier nommé server.js dans le répertoire racine du projet. Dans ce fichier, nous devons importer les dépendances pertinentes puis créer un serveur simple : 🎜🎜rrreee🎜Ce code implémente un simple serveur Express, qui va exposer les fichiers statiques sous la route /dist, et pour toutes les requêtes de route (*), utilisez la méthode createBundleRenderer de vue-ssr- Lisez le bundle du serveur à partir du fichier server-bundle.json , mappez le texte HTML rendu à un modèle HTML de base et renvoyez le résultat final au client. 🎜
🎜Build et démarrer le serveur🎜Exécutez la commande suivante dans le terminal : 🎜🎜rrreee🎜Parmi elles, la commande npm run build remplacera le src Répertoire Le code ci-dessous est intégré au bundle serveur et au bundle client, et les résultats générés sont stockés dans le répertoire dist. La commande npm run serve démarrera le serveur et écoutera le port 3000. Saisissez http://localhost:3000 dans le navigateur pour accéder à la page rendue par SSR. 🎜🎜À ce stade, nous avons réalisé une simple pratique de rendu Vue SSR. Bien entendu, de nombreuses opérations et détails spécifiques du rendu SSR nécessitent une compréhension et une pratique approfondies. Cet article ne fournit qu'un exemple d'introduction de base. J'espère que cet article pourra aider tout le monde à maîtriser le rendu 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!