From 2d07cd7ed5c2ed8f9b9721d6bed7ba6dac2d2867 Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Mon, 24 Apr 2023 21:08:38 -0300
Subject: [PATCH] Create fake client components for SSR

---
 src/entry-server.js                           |  4 ++++
 src/ssr/utils/registerFakeClientComponents.js | 18 ++++++++++++++++++
 2 files changed, 22 insertions(+)
 create mode 100644 src/ssr/utils/registerFakeClientComponents.js

diff --git a/src/entry-server.js b/src/entry-server.js
index 1742ef0..f695cee 100644
--- a/src/entry-server.js
+++ b/src/entry-server.js
@@ -4,12 +4,16 @@ import { createApp } from './main'
 import { registerGlobalComponents } from '@/components/globalComponents'
 import { getActiveHead } from 'unhead'
 import { renderSSRHead } from '@unhead/ssr'
+import { registerFakeClientComponents } from '@/ssr/utils/registerFakeClientComponents'
 import devalue from '@nuxt/devalue'
 
 export async function render(url, manifest) {
   const { app, router, store } = createApp()
 
+  // Register global components, create a fake server components for components that should only render on client side
   registerGlobalComponents(app)
+  registerFakeClientComponents(app)
+
   // set the router to the desired URL before rendering
   await router.push(url)
   await router.isReady()
diff --git a/src/ssr/utils/registerFakeClientComponents.js b/src/ssr/utils/registerFakeClientComponents.js
new file mode 100644
index 0000000..91cce62
--- /dev/null
+++ b/src/ssr/utils/registerFakeClientComponents.js
@@ -0,0 +1,18 @@
+import { defineComponent } from 'vue'
+import glob from 'glob'
+
+export function registerFakeClientComponents(app) {
+  const filePaths = glob.sync('src/components/**/*.client.vue')
+  const vueComponent = defineComponent({
+    template: '<div></div>'
+  })
+
+  filePaths.forEach((path) => {
+    const componentName = path
+      .split('/')
+      .pop()
+      .replace(/\.client.\w+$/, '')
+
+    app.component(componentName, vueComponent)
+  })
+}