Improve SSR, add pinia

wbbaker · Apr 20, 2023 · 7324a95 · 7324a95
1 parent cebfde6
commit 7324a95
Show file tree

Hide file tree

Showing 15 changed files with 223 additions and 122 deletions.
diff --git a/index.html b/index.html
@@ -8,6 +8,7 @@
     />
     <title><%- project_name %></title>
     <!--preload-links-->
+    <!--app-state-->
   </head>
   <body>
     <div id="app"><!--app-html--></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,21 +4,23 @@
   "type": "module",
   "scripts": {
     "dev": "node server",
+    "dev:spa": "vite dev",
     "build:spa": "vite build",
     "build": "npm run build:client && npm run build:server",
     "build:client": "vite build --ssrManifest --outDir dist/client",
     "build:server": "vite build --ssr src/entry-server.js --outDir dist/server",
-    "generate": "vite build --ssrManifest --outDir dist/static && npm run build:server && node prerender",
     "serve": "NODE_ENV=production node server",
     "debug": "node --inspect-brk server",
     "preview": "vite preview",
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
   },
   "dependencies": {
     "@geoman-io/leaflet-geoman-free": "^2.14.2",
+    "@nuxt/devalue": "^2.0.0",
     "axios": "^1.3.5",
     "js-yaml": "^4.1.0",
     "leaflet": "^1.9.3",
+    "pinia": "^2.0.34",
     "vue": "^3.2.47",
     "vue-router": "^4.1.6"
   },

diff --git a/prerender.js b/prerender.js
diff --git a/server.js b/server.js
@@ -36,7 +36,7 @@ export async function createServer(
     vite = await (
       await import('vite')
     ).createServer({
-      base: '/test/',
+      base: '/',
       root,
       logLevel: isTest ? 'error' : 'info',
       server: {
@@ -67,7 +67,7 @@ export async function createServer(
 
   app.use('*', async (req, res) => {
     try {
-      const url = req.originalUrl.replace('/test/', '/')
+      const url = req.originalUrl
 
       let template, render
       if (!isProd) {
@@ -81,11 +81,12 @@ export async function createServer(
         render = (await import('./dist/server/entry-server.js')).render
       }
 
-      const [appHtml, preloadLinks] = await render(url, manifest)
+      const [appHtml, appState, preloadLinks] = await render(url, manifest)
 
       const html = template
         .replace(`<!--preload-links-->`, preloadLinks)
         .replace(`<!--app-html-->`, appHtml)
+        .replace(`<!--app-state-->`, appState)
 
       res.status(200).set({ 'Content-Type': 'text/html' }).end(html)
     } catch (e) {

diff --git a/src/components/Gallery/GalleryMainImage.vue b/src/components/Gallery/GalleryMainImage.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="h-80 max-h-80 flex items-center justify-center">
-    <VSpinner v-if="isLoading" />
+    <ClientOnly>
+      <VSpinner v-if="isLoading" />
+    </ClientOnly>
     <img
       ref="imageElement"
       class="max-h-80 h-max w-100 cursor-zoom-in m-auto"
@@ -11,7 +13,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted, watch } from 'vue'
+import { ref, onMounted, watch } from 'vue'
 
 const props = defineProps({
   image: {
@@ -30,15 +32,11 @@ watch(
     if (newVal.id) {
       isLoading.value = true
     }
-  },
-  {
-    immediate: true
   }
 )
 
 onMounted(() => {
   imageElement.value.addEventListener('load', () => (isLoading.value = false))
 })
 
-onUnmounted(() => {})
 </script>
diff --git a/src/entry-client.js b/src/entry-client.js
@@ -1,10 +1,17 @@
 import { createApp } from './main'
 import { registerOnlyClientComponents } from '@/components/clientComponents'
 import { registerGlobalComponents } from './components/globalComponents'
-const { app, router } = createApp()
+
+const { app, router, store } = createApp()
+const storeInitialState = window.initialState
+
+if (storeInitialState) {
+  store.state.value = storeInitialState
+}
+
+registerOnlyClientComponents(app)
+registerGlobalComponents(app)
 
 router.isReady().then(() => {
-  registerOnlyClientComponents(app)
-  registerGlobalComponents(app)
   app.mount('#app')
 })
diff --git a/src/entry-server.js b/src/entry-server.js
@@ -2,9 +2,10 @@ import { basename } from 'node:path'
 import { renderToString } from 'vue/server-renderer'
 import { createApp } from './main'
 import { registerGlobalComponents } from '@/components/globalComponents'
+import devalue from '@nuxt/devalue'
 
 export async function render(url, manifest) {
-  const { app, router } = createApp()
+  const { app, router, store } = createApp()
 
   registerGlobalComponents(app)
   // set the router to the desired URL before rendering
@@ -18,11 +19,16 @@ export async function render(url, manifest) {
   const ctx = {}
   const html = await renderToString(app, ctx)
 
+  const renderState = `
+  <script>
+    window.initialState = ${devalue(store.state.value)}
+  </script>`
+
   // the SSR manifest generated by Vite contains module -> chunk/asset mapping
   // which we can then use to determine what files need to be preloaded for this
   // request.
   const preloadLinks = renderPreloadLinks(ctx.modules, manifest)
-  return [html, preloadLinks]
+  return [html, renderState, preloadLinks]
 }
 
 function renderPreloadLinks(modules, manifest) {

diff --git a/src/main.js b/src/main.js
@@ -23,18 +23,21 @@ const app = initTaxonPagesApp()
 app.mount('#app')
  */
 
-import.meta.globEager('@/assets/css/main.css')
-import.meta.globEager('../config/style/*.{scss,css}')
+import.meta.glob('@/assets/css/main.css', { eager: true })
+import.meta.glob('../config/style/*.{scss,css}', { eager: true })
 
-import { createSSRApp } from 'vue'
 import App from './App.vue'
+import { createPinia } from 'pinia'
+import { createSSRApp } from 'vue'
 import { createRouter } from './router'
 
 export function createApp() {
   const app = createSSRApp(App)
   const router = createRouter()
+  const store = createPinia()
 
   app.use(router)
+  app.use(store)
 
-  return { app, router }
+  return { app, router, store }
 }