vite plugin ssr svelte

VITE + SVELTE + VITE-PLUGIN-SSR PRERENDER PRERTER PROJECT!

โมดูล Vite-Plugin-SSR เวอร์ชัน svelte

โมดูลนี้แสดงให้เห็นถึงการทำ HTML ที่ได้รับการรับรองอย่างสมบูรณ์ด้วยการตั้งค่าความชุ่มชื้นที่ถูกต้องเพื่อให้แอปของคุณโหลดได้อย่างราบรื่นในทุกบริบท

คุณสามารถลองได้ที่นี่: https://ryanweal.github.io/vite-plugin-ssr-svelte/

ทำไมไม่ใช้ sveltekit? การใช้ vite-plugin-ssr คุณสามารถแทนที่ทุกอย่างได้ค่อนข้างมาก และ คุณยังสามารถเพิ่มเฟรมเวิร์กอื่น ๆ ได้ (เช่น Vue, React, อื่น ๆ ) สำหรับเส้นทางที่เฉพาะเจาะจงโดยให้ไฟล์ page.client.js และ page.server.js

อะไรทำงานนอกกรอบ

repo นี้สามารถใช้เป็นผู้เริ่มต้นสำหรับโครงการต่อไปของคุณ เป็นการตั้งค่าให้ทำงานตามกรอบงานทั่วไป:

• สร้างหน้าและส่วนประกอบโดยใช้ svelte ด้วยการโหลดซ้ำใน dev
• PRERENDER เนื้อหาทั้งหมดในช่วงเวลาที่สร้าง
• ให้ความชุ่มชื้นกับเนื้อหาที่มี perendered กับ js ฝั่งไคลเอ็นต์ใด ๆ
• Metatags สามารถตั้งค่าได้อย่างง่ายดายโดยใช้องค์ประกอบตัวอย่าง
• โฟลเดอร์สินทรัพย์ที่คัดลอกตรงไปยังโฟลเดอร์สร้างเพื่อให้คุณสามารถอ้างอิงภาพเช่นปี 1999 และไม่ต้องกังวลเกี่ยวกับการนำเข้า

นอกจากนี้เรายังรวมตัวอย่างบางส่วนของการโทร API บนฝั่งเซิร์ฟเวอร์เท่านั้นเพื่อดึงข้อมูลของคุณ

ใช้ปลั๊กอิน VITE

• Vite-Plugin-SSR
• Vite-Plugin-Svelte
• Express.js (ใช้สำหรับกระบวนการ prerendering)

ติดตั้งและเรียกใช้

1. โคลนที่เก็บนี้
2. ติดตั้งการพึ่งพา: npm i
3. เรียกใช้: npm run dev และเพลิดเพลินไปกับการโหลดซ้ำในขณะที่คุณทำงาน
4. เยี่ยมชม http://localhost:3000 ในเบราว์เซอร์ของคุณ
5. สร้างมัน: npm run build
6. ให้บริการ: npx serve dist/client

การอัปเดต

ในการอัปเดตแพ็คเกจนี้คุณสามารถทำตามขั้นตอนการอัปเดต NPM ปกติ

เราได้ใช้คำสั่ง npm shrinkwrap ในตัวเพื่อให้ npm-shrinkwrap.json มากกว่า package-lock.json ปกติซึ่งช่วยให้ repo นี้คงที่ที่สถานะ "ดีรู้จัก" หากคุณใช้ npm เป็นผู้ติดตั้งของคุณ

ตรวจสอบให้แน่ใจว่าได้ทดสอบการอัปเดตอย่างเต็มที่หากคุณทำการเปลี่ยนแปลงไฟล์ npm-shrinkwrap.json ของคุณ