Fix mismatch hydration on spa

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

Hide file tree

Showing 4 changed files with 11 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -11,7 +11,7 @@
     <!--app-state-->
   </head>
   <body>
-    <div id="app"><!--app-html--></div>
+    <div id="app"></div>
     <script
       type="module"
       src="/src/entry-client.js"

diff --git a/package.json b/package.json
@@ -3,10 +3,10 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "node server",
-    "dev:spa": "vite dev",
-    "build:spa": "vite build",
-    "build": "npm run build:client && npm run build:server",
+    "dev:ssr": "node server",
+    "dev": "vite dev",
+    "build": "vite build",
+    "build:ssr": "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",
     "serve": "NODE_ENV=production node server",

diff --git a/server.js b/server.js
@@ -85,8 +85,8 @@ export async function createServer(
 
       const html = template
         .replace(`<!--preload-links-->`, preloadLinks)
-        .replace(`<!--app-html-->`, appHtml)
         .replace(`<!--app-state-->`, appState)
+        .replace(makeAppContainer(), makeAppContainer(appHtml))
 
       res.status(200).set({ 'Content-Type': 'text/html' }).end(html)
     } catch (e) {
@@ -105,4 +105,8 @@ if (!isTest) {
       generateConsoleMessage({ port: 6173, url: 'http://localhost' })
   })
  )
+}
+
+function makeAppContainer(app = '') {
+  return `<div id="app">${app}</div>`
 }
diff --git a/src/ssr/utils/generateConsoleMessage.js b/src/ssr/utils/generateConsoleMessage.js
@@ -10,6 +10,6 @@ export function generateConsoleMessage ({ url, port }) {
 
     console.log(taxonPagesMark)
     console.log('----------------------------------------------------------')
-    console.log('Server running at: ', `${url}:${port}`)
+    console.log('Server running at:', `${url}:${port}`)
 
 }