Adakah vue3.0 menyokong pemaparan sebelah pelayan?

vue3.0 menyokong pemaparan sebelah pelayan. Vue menyokong pemaparan komponen terus ke dalam rentetan HTML pada bahagian pelayan, mengembalikannya ke penyemak imbas sebagai tindak balas sebelah pelayan, dan akhirnya "mengaktifkan" (menghidrat) HTML statik pada bahagian penyemak imbas ke dalam aplikasi klien interaktif. Aplikasi Vue yang diberikan pelayan boleh dianggap "isomorphic" atau "universal" kerana kebanyakan kod aplikasi berjalan pada kedua-dua pelayan dan klien Kelebihan Vue menggunakan pemaparan sebelah pelayan: Pemuatan skrin pertama yang lebih pantas, model mental bersatu, lebih baik SEO. >

vue menyokong pemaparan bahagian pelayan (SSR). dalam penyemak imbas. dan mengendalikan DOM Walau bagaimanapun, Vue juga menyokong pemaparan komponen terus ke dalam rentetan HTML pada bahagian pelayan, mengembalikannya ke penyemak imbas sebagai tindak balas sebelah pelayan, dan akhirnya "menghidratkan" HTML statik pada bahagian pelayar untuk interaktif. pelanggan.

Aplikasi Vue.js yang diberikan pelayan juga boleh dianggap sebagai "Isomorphic" atau "Universal" kerana kebanyakan kod aplikasi berjalan serentak

Mengapa menggunakan pemaparan sebelah pelayan (SSR)?

Berbanding dengan aplikasi halaman tunggal sebelah pelanggan (SPA) Berbanding dengan SSR, kelebihan utama ialah:

Pemuatan skrin pertama yang pantas: Ini penting terutamanya pada kelajuan rangkaian yang perlahan atau pelayan yang berjalan perlahan, HTML yang diberikan tidak perlu menunggu sehingga semua JavaScript telah dimuat turun dan dilaksanakan, jadi pengguna anda akan melihat halaman yang diberikan sepenuhnya dengan lebih cepat Di samping itu, proses pengambilan data selesai pada bahagian pelayan pada lawatan pertama Berbanding dengan mendapatkannya daripada klien, mungkin terdapat sambungan pangkalan data yang lebih pantas, yang biasanya membawa kepada teras yang lebih tinggi skor metrik web, pengalaman pengguna yang lebih baik, dan bagi "kelajuan pemuatan skrin pertama secara langsung berkaitan dengan kadar penukaran". pembangunan bahagian hadapan]

Model mental bersatu

: Anda boleh membangunkan keseluruhan aplikasi anda menggunakan bahasa yang sama dan model mental berorientasikan komponen deklaratif yang sama tanpa perlu bertukar-tukar antara sistem templat bahagian belakang dan rangka kerja bahagian hadapan

• SEO yang lebih baik: Perangkak enjin carian boleh melihat halaman yang dipaparkan sepenuhnya secara langsung.

Terdapat beberapa pertukaran apabila menggunakan SSR Perkara yang perlu dipertimbangkan:

• Sekatan dalam pembangunan: kod khusus bahagian pelayar hanya boleh. digunakan dalam cangkuk kitaran hayat tertentu; sesetengah pustaka luaran mungkin memerlukan pemprosesan khas untuk digunakan pada bahagian pelayan. Aplikasi pemaparan sebelah pelayan memerlukan persekitaran yang membolehkan pelayan Node.js dijalankan Tidak seperti SPA statik sepenuhnya, yang boleh digunakan pada mana-mana pelayan fail statik.

• Muatan pelayan yang lebih tinggi. Memaparkan apl lengkap dalam Node.js adalah lebih intensif CPU daripada hanya mengehos fail statik, jadi jika anda menjangkakan trafik tinggi, sediakan untuk memuatkan pelayan yang sepadan dan gunakan strategi caching yang wajar.

Penyebaran Sisi Pelayan (SSR) lwn. Penjanaan Tapak Statik (SSG)

• Penjanaan Tapak Statik
(Penjanaan Tapak Statik, disingkatkan sebagai SSG), juga dikenali sebagai
• Praperenderan

  , ialah satu lagi teknik popular untuk membina tapak web pantas. Jika data yang diperlukan untuk memaparkan bahagian pelayan halaman adalah sama untuk setiap pengguna, maka kami boleh memberikannya sekali sahaja dan melakukannya lebih awal semasa proses binaan, bukannya memaparkan semula halaman setiap kali permintaan masuk. Halaman pra-dihasilkan dijana dan dihoskan pada pelayan sebagai fail HTML statik.

SSG mengekalkan prestasi yang sama seperti aplikasi SSR: ia membawa prestasi pemuatan skrin pertama yang sangat baik. Pada masa yang sama, ia lebih murah dan lebih mudah untuk digunakan berbanding aplikasi SSR kerana ia mengeluarkan HTML statik dan fail sumber. Kata kunci di sini adalah statik: SSG hanya boleh digunakan untuk halaman yang menggunakan data statik, iaitu data diketahui semasa masa binaan dan tidak berubah merentas berbilang penempatan. Setiap kali data berubah, ia perlu diatur semula.

• Jika anda menyiasat SSR hanya untuk mengoptimumkan SEO beberapa halaman pemasaran (seperti /, /about, /contact, dll.), maka anda mungkin mahukan SSG dan bukannya SSR. SSG juga bagus untuk membina tapak web berasaskan kandungan, seperti tapak dokumentasi atau blog. Malah, tapak web yang anda baca sekarang telah dijana secara statik menggunakan VitePress, penjana tapak statik yang dikuasakan oleh Vue.

Hello Dunia

Bersedia untuk mengalami pemaparan sebelah pelayan dalam tindakan. Perenderan sisi pelayan (iaitu SSR) kedengaran rumit, tetapi skrip Node ringkas hanya memerlukan 3 langkah untuk mencapai fungsi ini:

// 步骤 1:创建一个Vue实例
var Vue = require('vue')
var app = new Vue({
  render: function (h) {
    return h('p', 'hello world')
  }
})

// 步骤 2: 创建一个渲染器
var renderer = require('vue-server-renderer').createRenderer()

// 步骤 3: 将 Vue实例 渲染成 HTML

renderer.renderToString(app, function (error, html) {
  if (error) throw error
  console.log(html)
  // => <p server-rendered="true">hello world</p>
})

Ia tidak sukar. Sudah tentu, contoh ini lebih mudah daripada kebanyakan aplikasi untuk meneroka cara fungsi ini berfungsi

melaksanakan pemaparan bahagian pelayan yang mudah melalui pelayan Web Ekspres

Sukar untuk mengatakan pemaparan sebelah pelayan tanpa pelayan web, jadi mari kita tambahkannya. Kami akan membina aplikasi pemaparan sebelah pelayan yang sangat mudah menggunakan hanya ES5 dan tiada langkah binaan lain atau pemalam Vue.

Lancarkan apl yang memberitahu pengguna berapa banyak masa yang mereka habiskan pada halaman.

new Vue({
  template: &#39;<div>你已经在这花了 {{ counter }} 秒。</div>&#39;,
  data: {
    counter: 0
  },
  created: function () {
    var vm = this
    setInterval(function () {
      vm.counter += 1
    }, 1000)
  }
})

Untuk menyesuaikan diri dengan pemaparan sebelah pelayan, kami perlu membuat beberapa pengubahsuaian supaya ia boleh dipaparkan dalam penyemak imbas dan Nod:

• Dalam penyemak imbas, tukar Contoh aplikasi kami ditambahkan pada konteks global (tetingkap) dan kami boleh memasangnya.

• Dalam Node, mengeksport fungsi kilang membolehkan kami membuat contoh aplikasi untuk setiap permintaan.

Templat kecil diperlukan untuk melaksanakan ini:

// assets/app.js
(function () { 'use strict'
  var createApp = function () {
    // ---------------------
    // 开始常用的应用代码
    // ---------------------

    // 主要的Vue实例必须返回，并且有一个根节点在id "app"上，这样客户端可以加载它。

    return new Vue({
      template: &#39;<div id="app">你已经在这花了 {{ counter }} 秒。</div>&#39;,
      data: {
        counter: 0
      },
      created: function () {
        var vm = this
        setInterval(function () {
          vm.counter += 1
        }, 1000)
      }
    })

    // -------------------
    // 结束常用的应用代码
    // -------------------
  }
  if (typeof module !== &#39;undefined&#39; && module.exports) {
    module.exports = createApp
  } else {
    this.app = createApp()
  }
}).call(this)

Sekarang anda mempunyai kod aplikasi, tambah fail html.

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>My Vue App</title>
  <script src="/assets/vue.js"></script>
</head>
<body>
  <div id="app"></div>
  <script src="/assets/app.js"></script>
  <script>app.$mount(&#39;#app&#39;)</script>
</body>
</html>

Terutamanya rujuk pada app.js yang kami buat sebelum ini dalam folder aset dan fail vue.js Kami mempunyai aplikasi satu halaman yang boleh dijalankan

Kemudian mengikut urutan untuk melaksanakan perkhidmatan Perenderan sisi memerlukan langkah tambahan pada bahagian pelayan.

// server.js
'use strict'

var fs = require('fs')
var path = require('path')

// 定义全局的Vue为了服务端的app.js
global.Vue = require('vue')

// 获取HTML布局
var layout = fs.readFileSync('./index.html', 'utf8')

// 创建一个渲染器
var renderer = require('vue-server-renderer').createRenderer()

// 创建一个Express服务器
var express = require('express')
var server = express()

// 部署静态文件夹为 "assets"文件夹
server.use('/assets', express.static(
  path.resolve(__dirname, 'assets')
))

// 处理所有的Get请求
server.get('*', function (request, response) {
  // 渲染我们的Vue应用为一个字符串
  renderer.renderToString(
    // 创建一个应用实例
    require('./assets/app')(),
    // 处理渲染结果
    function (error, html) {
      // 如果渲染时发生了错误
      if (error) {
        // 打印错误到控制台
        console.error(error)
        // 告诉客户端错误
        return response
          .status(500)
          .send('Server Error')
      }
      // 发送布局和HTML文件
      response.send(layout.replace(&#39;<div id="app"></div>&#39;, html))
    }
  )
})

// 监听5000端口
server.listen(5000, function (error) {
  if (error) throw error
  console.log(&#39;Server is running at localhost:5000&#39;)
})

Itu sahaja. Keseluruhan contoh, klon untuk percubaan yang mendalam. Setelah ia berjalan secara setempat, anda boleh mengesahkan bahawa perkhidmatan yang dipilih oleh Renderer sebenarnya berjalan dengan mengklik kanan pada halaman dan memilih Sumber Halaman (atau serupa). Boleh dilihat pada badan:

<div id="app" server-rendered="true">You have been here for 0 seconds&period;</div>

dan bukannya:

<div id="app"></div>

Tindak balas penstriman

Vue juga Menyokong pemaparan penstriman, sebaik-baiknya untuk pelayan web yang menyokong penstriman. Membenarkan HTML dijana dan ditulis secara am kepada strim yang sepadan, bukannya ditulis sekaligus. Hasilnya ialah permintaan disampaikan dengan lebih cepat, tanpa kelemahan!

Untuk menjadikan kod aplikasi dalam bahagian sebelumnya sesuai untuk pemaparan penstriman, anda boleh menggantikan server.get('*',...) dengan kod berikut:

// 拆分布局成两段HTML
var layoutSections = layout.split('<div id="app"></div>')
var preAppHTML = layoutSections[0]
var postAppHTML = layoutSections[1]

// 处理所有的Get请求
server.get('*', function (request, response) {
  // 渲染我们的Vue实例作为流
  var stream = renderer.renderToStream(require('./assets/app')())

  // 将预先的HTML写入响应
  response.write(preAppHTML)

  // 每当新的块被渲染
  stream.on('data', function (chunk) {
    // 将块写入响应
    response.write(chunk)
  })

  // 当所有的块被渲染完成
  stream.on('end', function () {
    // 将post-app HTML写入响应
    response.end(postAppHTML)
  })

  // 当渲染时发生错误
  stream.on('error', function (error) {
    // 打印错误到控制台
    console.error(error)
    // 告诉客服端发生了错误
    return response
      .status(500)
      .send('Server Error')
  })
})

Ini tidak lebih baik daripada versi sebelumnya yang rumit, malah ini bukan konsep baharu kepada anda. Kami melakukan:

• Bina aliran

• Tulis HTML sebelum menggunakan respons

• Dalam Apply HTML kepada respons apabila tersedia

• Tulis HTML hingga akhir respons

• Kendalikan sebarang ralat

Caching Komponen

Reparan bahagian pelayan Vue sangat pantas secara lalai, tetapi anda boleh meningkatkan lagi prestasi dengan menyimpan komponen yang diberikan. Ini dianggap sebagai ciri lanjutan, walau bagaimanapun, jika komponen yang salah dicache (atau komponen yang betul mempunyai kandungan yang salah) ia akan menyebabkan apl menjadi tidak betul. Nota khas:

Komponen yang mengandungi sub-komponen yang bergantung pada keadaan global (seperti keadaan dari vuex) tidak seharusnya dicache. Jika anda melakukan ini, subkomponen (sebenarnya keseluruhan subpokok) juga akan dicache. Jadi beri perhatian khusus kepada situasi dengan serpihan atau subkomponen slot.

Tetapan

Daripada situasi amaran, kita boleh cache komponen menggunakan kaedah berikut.

Pertama, anda perlu menyediakan objek cache kepada pemapar. Berikut ialah contoh mudah menggunakan lru-cache

var createRenderer = require('vue-server-renderer').createRenderer
var lru = require('lru-cache')

var renderer = createRenderer({
  cache: lru(1000)
})

yang akan menyimpan cache sehingga 1000 paparan individu. Untuk konfigurasi lanjut caching ke dalam kandungan, lihat tetapan lru-cache

Kemudian untuk komponen yang anda ingin cache, anda boleh menyediakannya:

• Nama unik

• Fungsi serverCacheKey yang mengembalikan skop komponen unik

Contohnya:

Vue.component({
  name: 'list-item',
  template: &#39;<li>{{ item.name }}</li>&#39;,
  props: [&#39;item&#39;],
  serverCacheKey: function (props) {
    return props.item.type + &#39;::&#39; + props.item.id
  }
})

Komponen yang sesuai untuk caching

Sebarang komponen tulen boleh dicache dengan selamat - ini dijamin menghasilkan HTML yang sama apabila menghantar data yang sama kepada mana-mana komponen. Contoh senario ini termasuk:

• Komponen statik (cth. sentiasa cuba HTML yang sama, jadi fungsi serverCacheKey boleh kembali benar)

• Senaraikan komponen (mencachenya boleh meningkatkan prestasi apabila anda mempunyai senarai yang besar)

• Komponen UI biasa (seperti butang, makluman, dsb. - sekurang-kurangnya mereka mendapat data melalui prop dan bukannya slot atau subkomponen )

Penjelasan:

Kini, anda harus memahami konsep asas di sebalik pemaparan bahagian pelayan. Walau bagaimanapun, proses binaan, penghalaan dan Vuex masing-masing mempunyai pertimbangan mereka sendiri.

(Mempelajari perkongsian video: tutorial pengenalan vuejs, Video pengaturcaraan asas)

Atas ialah kandungan terperinci Adakah vue3.0 menyokong pemaparan sebelah pelayan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!