From 3029d270cc446c5abc56c26d80bf03626db4dd9f Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Thu, 15 May 2025 11:21:58 +0800
Subject: [PATCH] fix: dynamically import logo and theme selector to prevent
 server-side rendering

---
 web/app/signin/_header.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/web/app/signin/_header.tsx b/web/app/signin/_header.tsx
index 6100d1320e..5e85a8d306 100644
--- a/web/app/signin/_header.tsx
+++ b/web/app/signin/_header.tsx
@@ -2,12 +2,21 @@
 import React from 'react'
 import { useContext } from 'use-context-selector'
 import Select from '@/app/components/base/select/locale'
-import ThemeSelector from '@/app/components/base/theme-selector'
 import Divider from '@/app/components/base/divider'
 import { languages } from '@/i18n/language'
 import type { Locale } from '@/i18n'
 import I18n from '@/context/i18n'
-import DifyLogo from '@/app/components/base/logo/dify-logo'
+import dynamic from 'next/dynamic'
+
+// Avoid rendering the logo and theme selector on the server
+const DifyLogo = dynamic(() => import('@/app/components/base/logo/dify-logo'), {
+  ssr: false,
+  loading: () => <div className='h-7 w-16 bg-transparent' />,
+})
+const ThemeSelector = dynamic(() => import('@/app/components/base/theme-selector'), {
+  ssr: false,
+  loading: () => <div className='size-8 bg-transparent' />,
+})
 
 const Header = () => {
   const { locale, setLocaleOnClient } = useContext(I18n)