feat: add SSG support for public pages (#630)

Pre-render public routes (home, privacy, imprint, login, register, forgot-password) as static HTML for better SEO and faster initial load. Generates sitemap.xml at build time. Adds SSR guards for browser-only APIs (localStorage, document, navigator).

Author: shyim

bun.lock

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "SHOPMON_API_URL=http://127.0.0.1:5789 vite --port 3000 --host",
-    "build": "vite build",
+    "build": "vite-ssg build",
     "preview": "vite preview",
     "test": "vitest",
     "test:ui": "vitest --ui",
@@ -49,12 +49,15 @@
     "@iconify-json/octicon": "^1.2.19",
     "@iconify-json/ri": "^1.2.6",
     "@trpc/server": "^11.7.2",
+    "@unhead/vue": "^2.1.12",
     "@vitejs/plugin-vue": "6.0.5",
     "@vitest/ui": "^4.0.18",
     "@vue/test-utils": "^2.4.6",
+    "beasties": "^0.3.5",
     "jsdom": "^29.0.0",
     "typescript": "catalog:",
     "vite": "8.0.1",
+    "vite-ssg": "^28.3.0",
     "vitest": "^4.0.18"
   }
 }

frontend/package.json

@@ -1,2 +1,4 @@
 User-agent: *
 Allow: /
+
+Sitemap: https://shopmon.fos.gg/sitemap.xml

frontend/public/robots.txt

@@ -44,6 +44,10 @@ export function useDarkMode(): {
 }
 
 function initializeDarkMode() {
+  if (import.meta.env.SSR) {
+    return;
+  }
+
   // Get initial preference
   const stored = localStorage.getItem(DARK_MODE_STORAGE_KEY);
   if (stored !== null) {
@@ -79,6 +83,9 @@ function initializeDarkMode() {
 }
 
 function updateDarkModeClass(isDark: boolean): void {
+  if (import.meta.env.SSR) {
+    return;
+  }
   if (isDark) {
     document.documentElement.classList.add("dark");
   } else {

frontend/src/composables/useDarkMode.ts

@@ -7,8 +7,10 @@ export function useLocale() {
 
   function setLocale(lang: string) {
     locale.value = lang;
-    localStorage.setItem(LOCALE_STORAGE_KEY, lang);
-    document.documentElement.lang = lang;
+    if (!import.meta.env.SSR) {
+      localStorage.setItem(LOCALE_STORAGE_KEY, lang);
+      document.documentElement.lang = lang;
+    }
   }
 
   function toggleLocale() {

frontend/src/composables/useLocale.ts

@@ -5,6 +5,9 @@ import de from "./locales/de.json";
 const LOCALE_STORAGE_KEY = "shopmon-locale";
 
 function getInitialLocale(): string {
+  if (import.meta.env.SSR) {
+    return "en";
+  }
   const stored = localStorage.getItem(LOCALE_STORAGE_KEY);
   if (stored && ["en", "de"].includes(stored)) {
     return stored;

frontend/src/i18n.ts

@@ -1,14 +1,22 @@
-import { createApp } from "vue";
+import { ViteSSG } from "vite-ssg";
 
 import "./style.css";
 
 import App from "./App.vue";
-import { router } from "./router";
+import { routes, setupRouterGuards } from "./router";
 import { i18n } from "./i18n";
 
-const app = createApp(App);
+export const createApp = ViteSSG(
+  App,
+  {
+    routes,
+    linkActiveClass: "active",
+  },
+  ({ app, router, isClient }) => {
+    app.use(i18n as any);
 
-app.use(i18n as any);
-app.use(router);
-
-app.mount("#app");
+    if (isClient) {
+      setupRouterGuards(router);
+    }
+  },
+);