Penjelasan terperinci tentang fungsi SSR dalam Vue3: melaksanakan pemaparan sebelah pelayan-View.js-php.cn

Penjelasan terperinci tentang fungsi SSR dalam Vue3: melaksanakan pemaparan sebelah pelayan

WBOY

Lepaskan： 2023-06-18 09:04:08

asal

5619 orang telah melayarinya

Dengan pembangunan berterusan teknologi bahagian hadapan, semakin banyak tapak web cuba menggunakan pemaparan sisi pelayan (SSR) untuk mempercepatkan kelajuan tindak balas halaman dan meningkatkan kesan SEO. Sebagai salah satu rangka kerja bahagian hadapan yang paling popular pada masa ini, Vue3 juga telah menambah sokongan penuh untuk SSR dalam versi terbarunya. Artikel ini akan memberikan analisis dan penjelasan terperinci tentang fungsi SSR dalam Vue3.

1. Apakah itu SSR?

Sebelum memperkenalkan secara rasmi fungsi SSR dalam Vue3, kita perlu memahami terlebih dahulu apa itu pemaparan sisi pelayan (SSR). Ringkasnya, SSR menjadikan komponen Vue menjadi rentetan HTML pada bahagian pelayan, dan kemudian menghantar rentetan HTML ke penyemak imbas untuk paparan. Berbanding dengan kaedah pemaparan sisi pelanggan (CSR) tradisional, SSR boleh meningkatkan kelajuan pemaparan skrin pertama, meningkatkan kesan SEO dan pengalaman pengguna.

2. Fungsi SSR dalam Vue3

Vue3 menyediakan satu set fungsi untuk SSR, termasuk createSSRApp, createRenderer dan renderToString.

createSSRApp

createSSRApp ialah fungsi dalam Vue3 yang digunakan khusus untuk mencipta aplikasi SSR. Perbezaan daripada createApp ialah fungsi ini mengembalikan contoh aplikasi berbanding pelayan, dan apabila membuat contoh aplikasi ini, anda perlu memperkenalkan objek konteks konteks yang dipanggil Objek ini mengandungi kandungan yang berkaitan dengan pemaparan, seperti URL halaman, permintaan tajuk, dsb.

createRenderer

createRenderer ialah fungsi yang digunakan untuk mencipta pemapar dan boleh menerima satu parameter, iaitu objek RenderOptions. Objek ini merangkum konfigurasi pemapar yang berkaitan, seperti menghantar contoh aplikasi di sini untuk bermula, cara mengendalikan jenis vnod yang berbeza masing-masing, dsb.

renderToString

renderToString ialah fungsi render yang sepadan dengan aplikasi SSR ini. Fungsi ini hanya menerima satu contoh aplikasi Vue sebagai parameter Jika anda ingin membuat beberapa contoh aplikasi, anda perlu memanggilnya secara berurutan. Nilai pulangan bagi fungsi ini ialah rentetan hasil yang diberikan.

3. Laksanakan pemaparan sebelah pelayan

Tiga fungsi di atas adalah fungsi teras yang digunakan untuk menyokong SSR dalam Vue3 Seterusnya, kami akan menggunakan contoh mudah untuk menunjukkan cara menggunakannya untuk melaksanakan rendering sebelah pelayan.

Katakan kita mempunyai komponen Vue yang mudah seperti berikut:

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue3 SSR!'
    }
  }
}
</script>

Salin selepas log masuk

Kita perlu mengubah suai fail entri terlebih dahulu dan menggunakan fungsi createSSRApp untuk mencipta contoh aplikasi kita:

import { createSSRApp } from 'vue'
import App from './App.vue'

export function createApp() {
  const app = createSSRApp(App)
  return { app }
}

Salin selepas log masuk

Kemudian Kami perlu mencipta pemapar untuk memaparkan contoh Vue:

import { createRenderer } from 'vue'
import { createMemoryHistory, createRouter, RouterView } from 'vue-router'
import { renderToString } from '@vue/server-renderer'
import { createApp } from './main'

const renderer = createRenderer({
  history: createMemoryHistory(),
  renderOptions: {
    head: `
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
    `
  }
})

const router = createRouter({
  history: createMemoryHistory(),
  routes: [{ path: '/', component: RouterView }]
})

async function render() {
  const { app } = await createApp()
  const html = await renderer.renderToString(router)
  return `<html><body>${html}</body></html>`
}

Salin selepas log masuk

Kami memperkenalkan fungsi createRenderer dalam vue-server-renderer dan mencipta contoh penghala. Seterusnya, kami perlu pra-isi data dalam fail App.vue untuk memastikan data rentetan HTML yang diberikan pada bahagian pelayan adalah sama seperti apabila dipaparkan pada bahagian klien. Kami boleh menulis hasil yang diberikan sebelum ini ke halaman apabila membuat permintaan pada bahagian pelayan, dan kemudian menyerahkannya kepada klien untuk rendering.

import { createSSRApp } from 'vue'
import App from './App.vue'

export function createApp() {
  const app = createSSRApp(App)
  const initialState = window.__INITIAL_STATE__
  if (initialState) {
    app.$data = initialState
  }
  return { app }
}

Salin selepas log masuk

Akhir sekali, kami mengembalikan rentetan HTML yang diberikan kepada pelanggan.

import express from 'express'
import { render } from './server'

const app = express()

app.get('*', async (req, res) => {
  const html = await render(req.url)
  res.send(html)
})

const PORT = 3000
app.listen(PORT, () => {
  console.log(`Server running at http://localhost:${PORT}`)
})

Salin selepas log masuk

Di atas ialah contoh pelaksanaan mudah pemaparan bahagian pelayan Vue3.

4. Ringkasan

Artikel ini memperkenalkan fungsi SSR dalam Vue3, dan menggunakan contoh mudah untuk memperkenalkan cara menggunakan fungsi ini untuk melaksanakan pemaparan bahagian pelayan. Saya percaya bahawa melalui pengenalan artikel ini, pembaca sudah boleh mempunyai pemahaman yang lebih jelas tentang fungsi SSR dalam Vue3, dan boleh menggunakannya untuk melaksanakan aplikasi pemaparan sebelah pelayan mereka sendiri.

Atas ialah kandungan terperinci Penjelasan terperinci tentang fungsi SSR dalam Vue3: melaksanakan pemaparan sebelah pelayan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!