From 7da9b8c82163db60fe2a29070bb2954dbac2ebda Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Thu, 20 Apr 2023 11:26:17 -0300
Subject: [PATCH] Fix mismatch hydration on spa

---
 index.html                              | 2 +-
 package.json                            | 8 ++++----
 server.js                               | 6 +++++-
 src/ssr/utils/generateConsoleMessage.js | 2 +-
 4 files changed, 11 insertions(+), 7 deletions(-)
diff --git a/index.html b/index.html
index 566648b..718acf7 100644
--- 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
index b2e6709..5983d8d 100644
--- 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
index a1738f9..fd6a77b 100644
--- 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>`
 }
\ No newline at end of file
diff --git a/src/ssr/utils/generateConsoleMessage.js b/src/ssr/utils/generateConsoleMessage.js
index 3ab2dcb..53fe2a7 100644
--- 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}`)
 
 }
\ No newline at end of file
