Bagaimana untuk melakukan rendering sebelah pelayan dalam Vue?

Vue ialah rangka kerja JavaScript popular yang menyediakan alatan dan komponen untuk membina antara muka pengguna dengan mudah. Apabila aplikasi web menjadi lebih kompleks, pemaparan sisi pelayan (SSR) boleh memberikan prestasi dan pengalaman pengguna yang lebih baik. Vue 2.0 memperkenalkan sokongan SSR, membolehkan kami menggunakan Vue untuk SSR. Artikel ini menerangkan cara melakukan pemaparan sebelah pelayan dalam Vue.

Apakah pemaparan sebelah pelayan?

Dalam aplikasi pemaparan sebelah pelanggan yang tipikal, penyemak imbas memuatkan halaman HTML dan fail JavaScript. Apabila pengguna berinteraksi dengan aplikasi, JavaScript menghantar permintaan kepada pelayan, mendapatkan data dan mengemas kini halaman. Pendekatan ini boleh memberikan pengalaman pengguna yang hebat, tetapi ia juga boleh membawa beberapa kelemahan. Pertama, perangkak enjin carian biasanya tidak melaksanakan JavaScript, yang bermaksud kami mungkin tidak dapat memasukkan semua halaman aplikasi anda. Kedua, masa muat awal boleh menjadi perlahan kerana penyemak imbas perlu menunggu JavaScript untuk memuat turun dan melaksanakan sebelum ia boleh mula memaparkan antara muka.

Perenderan sisi pelayan menyelesaikan masalah ini. Dalam SSR, pelayan menghantar HTML dan JavaScript bersama-sama ke penyemak imbas semasa memaparkan halaman. Ini bermakna enjin carian boleh merangkak tapak dengan mudah dan masa pemuatan halaman awal lebih cepat kerana penyemak imbas tidak perlu menunggu JavaScript untuk memuat turun sebelum memulakan pemaparan. Selain itu, SSR boleh meningkatkan prestasi aplikasi pada peranti rendah, yang sering kekurangan enjin JavaScript yang berkuasa.

Mengapa menggunakan SSR dalam Vue?

Vue ialah rangka kerja pemaparan sebelah pelanggan. Ia menggunakan DOM maya dan komponen tak segerak untuk menyediakan masa respons halaman yang sangat pantas. Walau bagaimanapun, apabila aplikasi menjadi lebih kompleks, pemaparan sisi klien memperkenalkan beberapa kelemahan. Contohnya:

• Masa Muatan Permulaan yang Panjang: Masa muat awal aplikasi anda boleh menjadi lama kerana keperluan penyemak imbas untuk memuat turun dan melaksanakan fail JavaScript.
• Sokongan SEO terhad: Enjin carian biasanya tidak melaksanakan JavaScript, yang bermaksud kami mungkin tidak dapat mengindeks semua halaman.
• Tidak bagus untuk peranti rendah: Sesetengah peranti rendah mungkin tidak dapat mengendalikan JavaScript dalam jumlah yang banyak, menyebabkan apl menjadi lembap atau ranap sistem.
• Tidak baik untuk perangkak: Memandangkan enjin carian tidak dapat melaksanakan JavaScript, kami mungkin tidak dapat mendapatkan perangkak untuk mengindeks halaman kami dengan betul.

SSR boleh menyelesaikan masalah di atas dan memberikan prestasi dan pengalaman pengguna yang lebih baik. Oleh itu, Vue menyediakan sokongan SSR, membolehkan kami membuat aplikasi Vue pada bahagian pelayan.

Langkah untuk melaksanakan SSR dalam Vue

Melaksanakan SSR dalam Vue dibahagikan kepada langkah berikut:

1. Buat contoh aplikasi Vue.
2. Buat dan konfigurasi pelayan (Node.js).
3. Konfigurasikan pelayan untuk mengendalikan aplikasi Vue kami.
4. Buat laluan yang mengendalikan laluan halaman kami.
5. Render aplikasi Vue kami dalam pelayan.

Sekarang mari kita lihat setiap langkah demi langkah untuk memahami SSR dengan lebih baik.

Langkah 1: Buat contoh aplikasi Vue

Mula-mula, kita perlu mencipta tika Vue dan menentukan templat aplikasi. Apabila memberikan bahagian klien, kami biasanya mentakrifkan templat aplikasi dalam fail index.html. Tetapi dalam SSR, kita perlu menciptanya di bahagian pelayan. Berikut ialah contoh mudah:

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

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

Kod di atas mengeksport fungsi bernama createApp yang mencipta dan mengembalikan tika Vue baharu. Contoh ini menggunakan komponen akar kami App.vue untuk memaparkan aplikasi.

Langkah 2: Buat dan konfigurasikan pelayan

Dalam langkah 1, kami mencipta tika Vue yang boleh digunakan untuk memaparkan bahagian pelayan aplikasi Vue kami. Sekarang, kita perlu mencipta pelayan untuk menjalankan contoh ini. Kami menggunakan Node.js untuk mencipta pelayan.

Berikut ialah templat pelayan asas yang boleh kita gunakan:

// 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}`);
});

Kod di atas mencipta pelayan Express yang ringkas dan memintanya mendengar pada port 3000 tempatan. Pelayan ini juga boleh menyediakan sokongan akses fail statik menggunakan perisian tengah express.static.

Langkah 3: Konfigurasikan pelayan untuk mengendalikan aplikasi Vue kami

Kami telah mencipta pelayan, kini kami perlu mengkonfigurasi pelayan untuk mengendalikan aplikasi Vue kami. Untuk ini kita perlu menggunakan vue-server-renderer kebergantungan. Berikut ialah contoh kod lengkap:

// 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}`);
});

Kod di atas mencipta pelayan Express yang lengkap, mengaitkan permintaan dengan tika Vue dan menggunakan kaedah vue-server-renderer pakej renderToString untuk menjadikan aplikasi Vue sebagai HTML.

Langkah 4: Buat laluan

Kami kini boleh memaparkan bahagian pelayan aplikasi Vue kami. Sekarang kita perlu mencipta laluan yang mengaitkan laluan halaman kita dengan laluan sebelah pelayan. Kami menggunakan Penghala Vue untuk membuat laluan.

Berikut ialah contoh mudah:

// 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 来提供更好的性能和用户体验。

Atas ialah kandungan terperinci Bagaimana untuk melakukan rendering sebelah pelayan dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!