Rumah > Artikel > hujung hadapan web > Fungsi SSR dalam Vue3: melaksanakan pemaparan sebelah pelayan
Fungsi SSR dalam Vue3: melaksanakan pemaparan sebelah pelayan
- WBOYasal
- 2023-06-18 11:01:373707semak imbas
Dengan mempopularkan Internet mudah alih dan perkembangan pesat teknologi pengkomputeran awan, rangka kerja bahagian hadapan secara beransur-ansur menjadi kuasa utama pembangunan WEB. Selain menyediakan struktur halaman yang mudah, kesan interaktif dan paparan kandungan dinamik, rangka kerja bahagian hadapan juga mempunyai kelebihan pembangunan pesat, kebolehselenggaraan, pengoptimuman prestasi, dan lain-lain, yang meningkatkan kecekapan pembangunan dan pengalaman pengguna. Sebagai rangka kerja bahagian hadapan yang popular, Vue.js versi 3.0 telah dikeluarkan secara rasmi, membawa lebih banyak inovasi dan pengoptimuman. Antaranya, pelaksanaan Perenderan Sisi Pelayan (SSR) merupakan kemas kini penting dalam Vue3.
1. Definisi dan kelebihan SSR
SSR merujuk kepada menyelesaikan kerja pemaparan halaman di bahagian pelayan dan bukannya menggunakan JavaScript untuk menjana pepohon DOM secara dinamik pada bahagian klien, supaya dapat cepat meningkatkan rendering halaman dan tujuan SEO. Seni bina SPA (Aplikasi Halaman Tunggal) tradisional biasanya menggunakan mod pemaparan sisi klien untuk memaparkan halaman melalui pemaparan Vue.js pada bahagian pelanggan Kelebihannya ialah interaktiviti dinamik yang baik dan pengalaman pengguna yang baik. Walau bagaimanapun, memandangkan SPA hanya boleh memaparkan halaman selepas muat turun dan penghuraian JavaScript selesai, akan ada masalah seperti pemuatan halaman yang perlahan dan SEO tidak mesra. SSR menghantar dokumen HTML yang diberikan sebelah pelayan kepada pelanggan, yang bukan sahaja mengoptimumkan kelajuan pemuatan dan SEO, tetapi juga mempunyai kelebihan prestasi pemaparan awal, kebolehcapaian dan perkongsian sosial yang lebih baik.
2. Pelaksanaan SSR dalam Vue3
Vue.js menyediakan penyelesaian untuk menyokong pemaparan bahagian pelayan dalam versi 2.0 untuk memenuhi beberapa senario permintaan khas. Dalam Vue3, SSR telah menerima sokongan yang lebih lengkap, yang terasnya ialah fungsi createRenderer. Seterusnya, mari kita lihat pelaksanaan SSR dalam Vue3.
- Pasang kebergantungan berkaitan
Vue3 secara rasmi menyediakan dua kebergantungan teras: @vue/server-renderer dan @vue/compiler-sfc yang pertama digunakan untuk menjana HTML dan CSS , Skrip dan sumber lain, dan tukarkannya kepada rentetan dan kembalikannya. Yang terakhir menyediakan keupayaan penyusunan dan penghuraian untuk fail .vue, dan boleh menukar fail .vue kepada fungsi pemaparan.
- Tentukan fungsi pemaparan
Vue3 mengesyorkan menggunakan fungsi pemaparan dan bukannya templat templat Anda boleh mentakrifkan fungsi pemaparan melalui fungsi createRenderer. Fungsi createRenderer mengembalikan objek yang mengandungi fungsi rendering dan maklumat lain yang berkaitan.
const { createRenderer } = require('@vue/server-renderer');
const renderer = createRenderer();
const app = require('./app');
renderer.renderToString(app).then((html) => {
console.log(html);
}).catch((err) => {
console.error(err);
});Antaranya, aplikasi ialah contoh Vue, yang perlu dimulakan melalui fungsi createApp dahulu, dan kemudian dipasang pada elemen DOM. Seterusnya, anda boleh menggunakan fungsi pemaparan untuk memaparkan apl.
- Buat komponen penghala dan kontena
Alat seperti vue-router dan vuex perlu digunakan di bawah SSR untuk menyokong pengurusan komponen dan keadaan yang sepadan dengan laluan yang berbeza. Sebelum melakukan ini, anda perlu mencipta komponen penghala dan kontena.
const { createRouter } = require('vue-router');
const App = require('./App.vue');
const router = createRouter({
routes: [
{ path: '/', component: App }
]
});- Tulis kod untuk melaksanakan SSR
const express = require('express');
const { createSSRApp } = require('vue');
const server = express();
const template = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue3 SSR</title>
</head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>
`;
const { createRenderer } = require('@vue/server-renderer');
const renderer = createRenderer({
template: template
});
server.use(express.static('dist'));
server.get('*', async (req, res) => {
const app = createSSRApp(require('./src/App.vue'));
const router = require('./src/router').default;
app.use(router);
const html = await renderer.renderToString(app);
res.send(html);
});
server.listen(3000, () => {
console.log('Server is running at http://localhost:3000');
});Apabila menulis kod untuk melaksanakan SSR, anda perlu mencipta projek ekspres dan menggunakan fungsi createSSRApp untuk mencipta contoh Vue, dan kemudian Penghala, pengurusan negeri, fungsi createRenderer, dsb. semuanya bersepadu.
3. Nota tentang SSR
Apabila menggunakan SSR untuk melaksanakan pemaparan halaman, anda perlu memberi perhatian kepada perkara berikut:
- Perlu bergantung pada pelbagai luaran sumber, termasuk Sumber statik, antara muka data, pangkalan data, cache dan storan fail, dsb. Pada masa yang sama, ia juga membawa lebih banyak cabaran kepada pelajar operasi dan penyelenggaraan.
- Memandangkan pemaparan sebelah pelayan memerlukan sekurang-kurangnya sebanyak masa pemaparan, prestasi SSR dipengaruhi terutamanya oleh lebar jalur pelayan dan rangkaian, manakala prestasi keseluruhan pelanggan tidak akan memberi banyak kesan.
- SSR perlu menukar komponen Vue kepada format rentetan untuk pemaparan, jadi ia memerlukan penukaran dan penyusunan komponen Vue, yang akan membawa jumlah penggunaan dan masa penyusunan tertentu.
Ringkasnya, SSR adalah teknologi yang agak baru Anda perlu memberi perhatian kepada pengendalian pelbagai masalah dari segi prestasi dan penggunaan Anda boleh membuat pemilihan teknikal dan penggunaan sebenar mengikut keperluan anda sendiri . Terutamanya dalam sistem masa nyata berskala besar, perhatian khusus perlu diberikan kepada keselamatan, kebolehselenggaraan dan prestasi SSR.
Atas ialah kandungan terperinci Fungsi SSR dalam Vue3: melaksanakan pemaparan sebelah pelayan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!