vite plugin ssr svelte

VITE + SELTE + VITE-Plugin-SSR Static Prerender Starter-Projekt!

Eine schlanke Version des vite-Plugin-SSR-Moduls.

Dieses Modul zeigt, dass HTML mit den richtigen Hydratationseinstellungen vollständig vorgeführt wird, damit Ihre App in jedem Kontext reibungslos lädt.

Sie können es hier ausprobieren: https://ryanweal.github.io/vite-plugin-sr-selte/

Warum nicht Seltkit verwenden? Mit vite-plugin-ssr können Sie so ziemlich alles überschreiben und auch andere Frameworks (z. B. Vue, React, andere) für bestimmte Routen hinzufügen, indem Sie eine spezifischere Seite page.client.js und page.server.js Dateien bereitstellen.

Was funktioniert aus der Schachtel

Dieses Repo könnte als Starter für Ihr nächstes Projekt verwendet werden. Es wird eingerichtet, um die typischen Rahmenaufgaben auszuführen:

• Erstellen Sie Seiten und Komponenten mit SVELTE mit heißem Nachladen in Dev
• Bereiten Sie alle Inhalte während der Bauzeit vor
• Hydratieren Sie den vorgeborenen Inhalt mit jedem clientseitigen JS
• Metatags können einfach mit der Beispielkomponente eingestellt werden
• Der Ordner des Assets -Ordners hat direkt in den Build -Ordner kopiert, damit Sie Bilder wie es 1999 verweisen können und sich keine Sorgen über das Importieren machen können.

Wir fügen auch einige Beispiele für API-Aufrufe auf der serverseitigen Seite hinzu, nur um Ihre Daten abzurufen.

VITE -Plugins verwendet

• vite-plugin-ssr
• Vite-Plugin-Sufle
• Express.js (verwendet für den Vorrangprozess)

Installieren und ausführen

1. Klonen Sie dieses Repository
2. Abhängigkeiten installieren: npm i
3. Führen Sie es aus: npm run dev und genießen Sie das heiße Nachladen, während Sie arbeiten.
4. Besuchen Sie http://localhost:3000 in Ihrem Browser.
5. Erstellen Sie es: npm run build
6. Servieren Sie es: npx serve dist/client

Aktualisierungen

Um dieses Paket zu aktualisieren, können Sie die normalen NPM -Update -Prozeduren befolgen.

Wir haben den integrierten npm shrinkwrap -Befehl verwendet, um einen npm-shrinkwrap.json anstelle des normalen package-lock.json bereitzustellen, der dieses Repo in einem "bekannten guten" Zustand behält, wenn Sie npm als Installateur verwenden.

Achten Sie darauf, Updates vollständig zu testen, wenn Sie Änderungen an Ihrer npm-shrinkwrap.json Datei vornehmen.