vite plugin ssr svelte

Vite + SVELTE + VITE-PLUGIN-SSR Proyek starter prerender statis!

Versi langsing dari modul vite-plugin-ssr.

Modul ini menunjukkan melakukan HTML yang sepenuhnya prerender dengan pengaturan hidrasi yang benar sehingga aplikasi Anda akan memuat dengan lancar dalam konteks apa pun.

Anda dapat mencobanya di sini: https://ryanweal.github.io/vite-plugin-ssr-svelte/

Mengapa tidak menggunakan Sveltekit? Menggunakan vite-plugin-ssr Anda dapat mengganti hampir semuanya dan Anda juga page.server.js menambahkan kerangka kerja lain (seperti Vue, React, Others) untuk rute tertentu dengan menyediakan file yang lebih page.client.js .

Apa yang berhasil di luar kotak

Repo ini dapat digunakan sebagai starter untuk proyek Anda berikutnya. Ini adalah pengaturan untuk melakukan tugas kerangka kerja yang khas:

• Buat Halaman dan Komponen Menggunakan Svelte, dengan Hot Reloading in Dev
• Prerender semua konten selama waktu pembangunan
• Hidrasi Konten yang Terjadi dengan JS sisi klien
• Metatag dapat dengan mudah diatur menggunakan komponen contoh
• Folder aset yang disalin langsung ke folder build sehingga Anda dapat merujuk gambar seperti tahun 1999 dan tidak khawatir tentang mengimpornya.

Kami juga menyertakan beberapa contoh membuat panggilan API di sisi server hanya untuk mengambil data Anda.

Plugin vite digunakan

• vite-plugin-ssr
• vite-plugin-svelte
• Express.js (digunakan untuk proses prerendering)

Instal dan jalankan

1. Kloning repositori ini
2. Instal dependensi: npm i
3. Jalankan: npm run dev dan nikmati pemuatan ulang panas saat Anda bekerja.
4. Kunjungi http://localhost:3000 di browser Anda.
5. Bangun: npm run build
6. Sajikan: npx serve dist/client

Pembaruan

Untuk memperbarui paket ini, Anda dapat mengikuti prosedur pembaruan NPM normal.

Kami telah menggunakan perintah npm shrinkwrap bawaan untuk menyediakan npm-shrinkwrap.json daripada package-lock.json yang membuat repo ini tetap pada keadaan "bagus yang diketahui", jika Anda menggunakan npm sebagai penginstal Anda.

Pastikan untuk sepenuhnya menguji pembaruan jika Anda melakukan perubahan pada file npm-shrinkwrap.json Anda.