From e368f382389db3a11c61860730ea9ef92bad4c5d Mon Sep 17 00:00:00 2001
From: Arvin Xu <arvinx@foxmail.com>
Date: Fri, 20 Dec 2024 17:03:08 +0800
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20refactor=20to?=
 =?UTF-8?q?=20use=20async=20`headers()`=20(#5097)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor async mobile

* fix
---
 src/app/(main)/(mobile)/me/(home)/page.tsx               | 4 ++--
 src/app/(main)/(mobile)/me/data/page.tsx                 | 4 ++--
 src/app/(main)/(mobile)/me/profile/page.tsx              | 4 ++--
 src/app/(main)/(mobile)/me/settings/page.tsx             | 4 ++--
 .../(main)/chat/(workspace)/@conversation/default.tsx    | 6 +++---
 .../@conversation/features/ChatInput/index.tsx           | 4 +---
 src/app/(main)/chat/(workspace)/@portal/default.tsx      | 4 ++--
 src/app/(main)/chat/(workspace)/@topic/default.tsx       | 4 ++--
 src/app/(main)/chat/(workspace)/page.tsx                 | 2 +-
 .../(main)/discover/(detail)/assistant/[slug]/page.tsx   | 2 +-
 .../(main)/discover/(detail)/model/[...slugs]/page.tsx   | 2 +-
 src/app/(main)/discover/(detail)/plugin/[slug]/page.tsx  | 2 +-
 .../(main)/discover/(detail)/provider/[slug]/page.tsx    | 2 +-
 .../(main)/discover/(list)/assistants/[slug]/page.tsx    | 2 +-
 src/app/(main)/discover/(list)/assistants/page.tsx       | 2 +-
 src/app/(main)/discover/(list)/models/[slug]/page.tsx    | 2 +-
 src/app/(main)/discover/(list)/models/page.tsx           | 2 +-
 src/app/(main)/discover/(list)/plugins/[slug]/page.tsx   | 2 +-
 src/app/(main)/discover/(list)/plugins/page.tsx          | 2 +-
 src/app/(main)/discover/(list)/providers/page.tsx        | 2 +-
 src/app/(main)/discover/search/page.tsx                  | 2 +-
 src/app/(main)/profile/[[...slugs]]/page.tsx             | 5 +++--
 src/app/(main)/profile/layout.tsx                        | 5 +++--
 src/app/(main)/profile/loading.tsx                       | 4 ++--
 src/app/(main)/settings/about/page.tsx                   | 4 ++--
 src/app/(main)/settings/sync/page.tsx                    | 6 +++---
 src/app/@modal/(.)settings/modal/page.tsx                | 6 +++---
 src/app/layout.tsx                                       | 4 ++--
 src/components/server/ServerLayout.tsx                   | 4 ++--
 src/layout/GlobalProvider/index.tsx                      | 2 +-
 src/utils/server/responsive.ts                           | 9 ++++-----
 31 files changed, 54 insertions(+), 55 deletions(-)

diff --git a/src/app/(main)/(mobile)/me/(home)/page.tsx b/src/app/(main)/(mobile)/me/(home)/page.tsx
index 11d882bd7fdc..681c7a6fc987 100644
--- a/src/app/(main)/(mobile)/me/(home)/page.tsx
+++ b/src/app/(main)/(mobile)/me/(home)/page.tsx
@@ -17,8 +17,8 @@ export const generateMetadata = async () => {
   });
 };
 
-const Page = () => {
-  const mobile = isMobileDevice();
+const Page = async () => {
+  const mobile = await isMobileDevice();
 
   if (!mobile) return redirect('/chat');
 
diff --git a/src/app/(main)/(mobile)/me/data/page.tsx b/src/app/(main)/(mobile)/me/data/page.tsx
index 1d21dae481fd..6e22584f3d98 100644
--- a/src/app/(main)/(mobile)/me/data/page.tsx
+++ b/src/app/(main)/(mobile)/me/data/page.tsx
@@ -14,8 +14,8 @@ export const generateMetadata = async () => {
   });
 };
 
-const Page = () => {
-  const mobile = isMobileDevice();
+const Page = async () => {
+  const mobile = await isMobileDevice();
 
   if (!mobile) return redirect('/chat');
 
diff --git a/src/app/(main)/(mobile)/me/profile/page.tsx b/src/app/(main)/(mobile)/me/profile/page.tsx
index a7bbfac717ac..85de6656380f 100644
--- a/src/app/(main)/(mobile)/me/profile/page.tsx
+++ b/src/app/(main)/(mobile)/me/profile/page.tsx
@@ -15,8 +15,8 @@ export const generateMetadata = async () => {
   });
 };
 
-const Page = () => {
-  const mobile = isMobileDevice();
+const Page = async () => {
+  const mobile = await isMobileDevice();
 
   if (!mobile) return redirect('/profile');
 
diff --git a/src/app/(main)/(mobile)/me/settings/page.tsx b/src/app/(main)/(mobile)/me/settings/page.tsx
index 99e8aa7f24ce..794ac0583529 100644
--- a/src/app/(main)/(mobile)/me/settings/page.tsx
+++ b/src/app/(main)/(mobile)/me/settings/page.tsx
@@ -15,8 +15,8 @@ export const generateMetadata = async () => {
   });
 };
 
-const Page = () => {
-  const mobile = isMobileDevice();
+const Page = async () => {
+  const mobile = await isMobileDevice();
 
   if (!mobile) return redirect('/settings/common');
 
diff --git a/src/app/(main)/chat/(workspace)/@conversation/default.tsx b/src/app/(main)/chat/(workspace)/@conversation/default.tsx
index 0874016898ac..5474a41289e4 100644
--- a/src/app/(main)/chat/(workspace)/@conversation/default.tsx
+++ b/src/app/(main)/chat/(workspace)/@conversation/default.tsx
@@ -6,14 +6,14 @@ import ChatList from './features/ChatList';
 import ThreadHydration from './features/ThreadHydration';
 import ZenModeToast from './features/ZenModeToast';
 
-const ChatConversation = () => {
-  const mobile = isMobileDevice();
+const ChatConversation = async () => {
+  const mobile = await isMobileDevice();
 
   return (
     <>
       <ZenModeToast />
       <ChatList mobile={mobile} />
-      <ChatInput />
+      <ChatInput mobile={mobile} />
       <ChatHydration />
       <ThreadHydration />
     </>
diff --git a/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/index.tsx b/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/index.tsx
index 907baa4d8a39..3f44a25ea9ec 100644
--- a/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/index.tsx
+++ b/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/index.tsx
@@ -1,10 +1,8 @@
 import MobileChatInput from '@/features/ChatInput/Mobile';
-import { isMobileDevice } from '@/utils/server/responsive';
 
 import DesktopChatInput from './Desktop';
 
-const ChatInput = () => {
-  const mobile = isMobileDevice();
+const ChatInput = ({ mobile }: { mobile: boolean }) => {
   const Input = mobile ? MobileChatInput : DesktopChatInput;
 
   return <Input />;
diff --git a/src/app/(main)/chat/(workspace)/@portal/default.tsx b/src/app/(main)/chat/(workspace)/@portal/default.tsx
index af8cb3304f7b..d0ae67131022 100644
--- a/src/app/(main)/chat/(workspace)/@portal/default.tsx
+++ b/src/app/(main)/chat/(workspace)/@portal/default.tsx
@@ -8,8 +8,8 @@ import Mobile from './_layout/Mobile';
 
 const PortalBody = lazy(() => import('@/features/Portal/router'));
 
-const Inspector = () => {
-  const mobile = isMobileDevice();
+const Inspector = async () => {
+  const mobile = await isMobileDevice();
 
   const Layout = mobile ? Mobile : Desktop;
 
diff --git a/src/app/(main)/chat/(workspace)/@topic/default.tsx b/src/app/(main)/chat/(workspace)/@topic/default.tsx
index c5cd73578038..0879070157f7 100644
--- a/src/app/(main)/chat/(workspace)/@topic/default.tsx
+++ b/src/app/(main)/chat/(workspace)/@topic/default.tsx
@@ -10,8 +10,8 @@ import SystemRole from './features/SystemRole';
 
 const TopicContent = lazy(() => import('./features/TopicListContent'));
 
-const Topic = () => {
-  const mobile = isMobileDevice();
+const Topic = async () => {
+  const mobile = await isMobileDevice();
 
   const Layout = mobile ? Mobile : Desktop;
 
diff --git a/src/app/(main)/chat/(workspace)/page.tsx b/src/app/(main)/chat/(workspace)/page.tsx
index 407e9de95a04..e06168ad40db 100644
--- a/src/app/(main)/chat/(workspace)/page.tsx
+++ b/src/app/(main)/chat/(workspace)/page.tsx
@@ -18,7 +18,7 @@ export const generateMetadata = async () => {
 };
 
 const Page = async () => {
-  const mobile = isMobileDevice();
+  const mobile = await isMobileDevice();
   const { t } = await translation('metadata');
   const ld = ldModule.generate({
     description: t('chat.title', { appName: BRANDING_NAME }),
diff --git a/src/app/(main)/discover/(detail)/assistant/[slug]/page.tsx b/src/app/(main)/discover/(detail)/assistant/[slug]/page.tsx
index 1580a5728ce6..da5d21d783a0 100644
--- a/src/app/(main)/discover/(detail)/assistant/[slug]/page.tsx
+++ b/src/app/(main)/discover/(detail)/assistant/[slug]/page.tsx
@@ -62,7 +62,7 @@ const Page = async (props: DiscoverPageProps) => {
 
   const { slug: identifier } = params;
   const { t, locale } = await translation('metadata', searchParams?.hl);
-  const mobile = isMobileDevice();
+  const mobile = await isMobileDevice();
 
   const discoverService = new DiscoverService();
   const data = await discoverService.getAssistantById(locale, identifier);
diff --git a/src/app/(main)/discover/(detail)/model/[...slugs]/page.tsx b/src/app/(main)/discover/(detail)/model/[...slugs]/page.tsx
index 03b813ec0f18..f5d5c7ae36fa 100644
--- a/src/app/(main)/discover/(detail)/model/[...slugs]/page.tsx
+++ b/src/app/(main)/discover/(detail)/model/[...slugs]/page.tsx
@@ -72,7 +72,7 @@ const Page = async (props: Props) => {
   const identifier = decodeURIComponent(slugs.join('/'));
   const { t, locale } = await translation('metadata', searchParams?.hl);
   const { t: td } = await translation('models', searchParams?.hl);
-  const mobile = isMobileDevice();
+  const mobile = await isMobileDevice();
 
   const discoverService = new DiscoverService();
   const data = await discoverService.getModelById(locale, identifier);
diff --git a/src/app/(main)/discover/(detail)/plugin/[slug]/page.tsx b/src/app/(main)/discover/(detail)/plugin/[slug]/page.tsx
index 59cfcbc4aa33..ab23f605726c 100644
--- a/src/app/(main)/discover/(detail)/plugin/[slug]/page.tsx
+++ b/src/app/(main)/discover/(detail)/plugin/[slug]/page.tsx
@@ -64,7 +64,7 @@ const Page = async (props: DiscoverPageProps) => {
 
   const { slug: identifier } = params;
   const { t, locale } = await translation('metadata', searchParams?.hl);
-  const mobile = isMobileDevice();
+  const mobile = await isMobileDevice();
 
   const discoverService = new DiscoverService();
   const data = await discoverService.getPluginById(locale, identifier, true);
diff --git a/src/app/(main)/discover/(detail)/provider/[slug]/page.tsx b/src/app/(main)/discover/(detail)/provider/[slug]/page.tsx
index 2d8817d99f86..b148e77a70f0 100644
--- a/src/app/(main)/discover/(detail)/provider/[slug]/page.tsx
+++ b/src/app/(main)/discover/(detail)/provider/[slug]/page.tsx
@@ -62,7 +62,7 @@ const Page = async (props: DiscoverPageProps) => {
   const { slug: identifier } = params;
   const { t, locale } = await translation('metadata', searchParams?.hl);
   const { t: td } = await translation('models', searchParams?.hl);
-  const mobile = isMobileDevice();
+  const mobile = await isMobileDevice();
 
   const discoverService = new DiscoverService();
   const data = await discoverService.getProviderById(locale, identifier);
diff --git a/src/app/(main)/discover/(list)/assistants/[slug]/page.tsx b/src/app/(main)/discover/(list)/assistants/[slug]/page.tsx
index 41313b520b8f..0a3175bf75f4 100644
--- a/src/app/(main)/discover/(list)/assistants/[slug]/page.tsx
+++ b/src/app/(main)/discover/(list)/assistants/[slug]/page.tsx
@@ -32,7 +32,7 @@ const Page = async (props: DiscoverPageProps<AssistantCategory>) => {
 
   const { t, locale } = await translation('metadata', searchParams?.hl);
   const { t: td } = await translation('discover', searchParams?.hl);
-  const mobile = isMobileDevice();
+  const mobile = await isMobileDevice();
 
   const discoverService = new DiscoverService();
   const items = await discoverService.getAssistantCategory(locale, params.slug);
diff --git a/src/app/(main)/discover/(list)/assistants/page.tsx b/src/app/(main)/discover/(list)/assistants/page.tsx
index c0fffb7d2e3d..b2009b14632c 100644
--- a/src/app/(main)/discover/(list)/assistants/page.tsx
+++ b/src/app/(main)/discover/(list)/assistants/page.tsx
@@ -25,7 +25,7 @@ export const generateMetadata = async (props: Props) => {
 const Page = async (props: Props) => {
   const searchParams = await props.searchParams;
   const { t, locale } = await translation('metadata', searchParams?.hl);
-  const mobile = isMobileDevice();
+  const mobile = await isMobileDevice();
 
   const discoverService = new DiscoverService();
   const items = await discoverService.getAssistantList(locale);
diff --git a/src/app/(main)/discover/(list)/models/[slug]/page.tsx b/src/app/(main)/discover/(list)/models/[slug]/page.tsx
index 3aa9aa86f4f9..77d0dbb48e12 100644
--- a/src/app/(main)/discover/(list)/models/[slug]/page.tsx
+++ b/src/app/(main)/discover/(list)/models/[slug]/page.tsx
@@ -35,7 +35,7 @@ const Page = async (props: DiscoverPageProps) => {
   const searchParams = await props.searchParams;
 
   const { t, locale } = await translation('metadata', searchParams?.hl);
-  const mobile = isMobileDevice();
+  const mobile = await isMobileDevice();
 
   const discoverService = new DiscoverService();
   const list = await discoverService.getProviderList(locale);
diff --git a/src/app/(main)/discover/(list)/models/page.tsx b/src/app/(main)/discover/(list)/models/page.tsx
index d8227bf534fa..e7d6c762ed71 100644
--- a/src/app/(main)/discover/(list)/models/page.tsx
+++ b/src/app/(main)/discover/(list)/models/page.tsx
@@ -29,7 +29,7 @@ const Page = async (props: Props) => {
   const searchParams = await props.searchParams;
 
   const { t, locale } = await translation('metadata', searchParams?.hl);
-  const mobile = isMobileDevice();
+  const mobile = await isMobileDevice();
 
   const discoverService = new DiscoverService();
   const items = await discoverService.getModelList(locale);
diff --git a/src/app/(main)/discover/(list)/plugins/[slug]/page.tsx b/src/app/(main)/discover/(list)/plugins/[slug]/page.tsx
index 13a07a8289d2..7cb9d00065e6 100644
--- a/src/app/(main)/discover/(list)/plugins/[slug]/page.tsx
+++ b/src/app/(main)/discover/(list)/plugins/[slug]/page.tsx
@@ -32,7 +32,7 @@ const Page = async (props: DiscoverPageProps<PluginCategory>) => {
 
   const { t, locale } = await translation('metadata', searchParams?.hl);
   const { t: td } = await translation('discover', searchParams?.hl);
-  const mobile = isMobileDevice();
+  const mobile = await isMobileDevice();
 
   const discoverService = new DiscoverService();
   const items = await discoverService.getPluginCategory(locale, params.slug);
diff --git a/src/app/(main)/discover/(list)/plugins/page.tsx b/src/app/(main)/discover/(list)/plugins/page.tsx
index f8dc433c33aa..8964cfa67d9b 100644
--- a/src/app/(main)/discover/(list)/plugins/page.tsx
+++ b/src/app/(main)/discover/(list)/plugins/page.tsx
@@ -26,7 +26,7 @@ export const generateMetadata = async (props: Props) => {
 const Page = async (props: Props) => {
   const searchParams = await props.searchParams;
   const { t, locale } = await translation('metadata', searchParams?.hl);
-  const mobile = isMobileDevice();
+  const mobile = await isMobileDevice();
 
   const discoverService = new DiscoverService();
   const items = await discoverService.getPluginList(locale);
diff --git a/src/app/(main)/discover/(list)/providers/page.tsx b/src/app/(main)/discover/(list)/providers/page.tsx
index 77f093f38b4f..487c10412115 100644
--- a/src/app/(main)/discover/(list)/providers/page.tsx
+++ b/src/app/(main)/discover/(list)/providers/page.tsx
@@ -26,7 +26,7 @@ export const generateMetadata = async (props: Props) => {
 const Page = async (props: Props) => {
   const searchParams = await props.searchParams;
   const { t, locale } = await translation('metadata', searchParams?.hl);
-  const mobile = isMobileDevice();
+  const mobile = await isMobileDevice();
 
   const discoverService = new DiscoverService();
   const items = await discoverService.getProviderList(locale);
diff --git a/src/app/(main)/discover/search/page.tsx b/src/app/(main)/discover/search/page.tsx
index 92ccdcc34ffe..befa2568380d 100644
--- a/src/app/(main)/discover/search/page.tsx
+++ b/src/app/(main)/discover/search/page.tsx
@@ -56,7 +56,7 @@ const Page = async (props: Props) => {
   const keywords = decodeURIComponent(q);
 
   const { t, locale } = await translation('metadata', searchParams?.hl);
-  const mobile = isMobileDevice();
+  const mobile = await isMobileDevice();
 
   const ld = ldModule.generate({
     description: t('discover.description'),
diff --git a/src/app/(main)/profile/[[...slugs]]/page.tsx b/src/app/(main)/profile/[[...slugs]]/page.tsx
index ead0974e6798..3be3fe11c06e 100644
--- a/src/app/(main)/profile/[[...slugs]]/page.tsx
+++ b/src/app/(main)/profile/[[...slugs]]/page.tsx
@@ -13,8 +13,9 @@ export const generateMetadata = async () => {
   });
 };
 
-const Page = () => {
-  const mobile = isMobileDevice();
+const Page = async () => {
+  const mobile = await isMobileDevice();
+
   return <Client mobile={mobile} />;
 };
 
diff --git a/src/app/(main)/profile/layout.tsx b/src/app/(main)/profile/layout.tsx
index 626a1c6c3afa..ea60a781dee3 100644
--- a/src/app/(main)/profile/layout.tsx
+++ b/src/app/(main)/profile/layout.tsx
@@ -6,10 +6,11 @@ import { isMobileDevice } from '@/utils/server/responsive';
 
 import MobileLayout from './_layout/Mobile';
 
-const Layout = ({ children }: PropsWithChildren) => {
+const Layout = async ({ children }: PropsWithChildren) => {
   if (!enableClerk) return notFound();
 
-  const mobile = isMobileDevice();
+  const mobile = await isMobileDevice();
+
   if (mobile) return <MobileLayout>{children}</MobileLayout>;
 
   return children;
diff --git a/src/app/(main)/profile/loading.tsx b/src/app/(main)/profile/loading.tsx
index 32b7482aba65..3cc69a2bc839 100644
--- a/src/app/(main)/profile/loading.tsx
+++ b/src/app/(main)/profile/loading.tsx
@@ -3,8 +3,8 @@ import { Flexbox } from 'react-layout-kit';
 import SkeletonLoading from '@/components/SkeletonLoading';
 import { isMobileDevice } from '@/utils/server/responsive';
 
-const Loading = () => {
-  const mobile = isMobileDevice();
+const Loading = async () => {
+  const mobile = await isMobileDevice();
   if (mobile) return <SkeletonLoading paragraph={{ rows: 8 }} />;
   return (
     <Flexbox horizontal style={{ position: 'relative' }} width={'100%'}>
diff --git a/src/app/(main)/settings/about/page.tsx b/src/app/(main)/settings/about/page.tsx
index daf009326a3d..fdd4ae4afd17 100644
--- a/src/app/(main)/settings/about/page.tsx
+++ b/src/app/(main)/settings/about/page.tsx
@@ -13,8 +13,8 @@ export const generateMetadata = async () => {
   });
 };
 
-export default () => {
-  const isMobile = isMobileDevice();
+export default async () => {
+  const isMobile = await isMobileDevice();
 
   return <Page mobile={isMobile} />;
 };
diff --git a/src/app/(main)/settings/sync/page.tsx b/src/app/(main)/settings/sync/page.tsx
index 48247965ed2b..fc30bbeed8aa 100644
--- a/src/app/(main)/settings/sync/page.tsx
+++ b/src/app/(main)/settings/sync/page.tsx
@@ -15,12 +15,12 @@ export const generateMetadata = async () => {
     url: '/settings/sync',
   });
 };
-export default () => {
+export default async () => {
   const enableWebrtc = serverFeatureFlags().enableWebrtc;
   if (!enableWebrtc) return notFound();
 
-  const isMobile = isMobileDevice();
-  const { os, browser } = gerServerDeviceInfo();
+  const isMobile = await isMobileDevice();
+  const { os, browser } = await gerServerDeviceInfo();
 
   return <Page browser={browser} mobile={isMobile} os={os} />;
 };
diff --git a/src/app/@modal/(.)settings/modal/page.tsx b/src/app/@modal/(.)settings/modal/page.tsx
index 35620e97568f..50e5aca23d48 100644
--- a/src/app/@modal/(.)settings/modal/page.tsx
+++ b/src/app/@modal/(.)settings/modal/page.tsx
@@ -7,9 +7,9 @@ import SettingsModal from './index';
  * @refs: https://github.com/lobehub/lobe-chat/discussions/2295#discussioncomment-9290942
  */
 
-const Page = () => {
-  const isMobile = isMobileDevice();
-  const { os, browser } = gerServerDeviceInfo();
+const Page = async () => {
+  const isMobile = await isMobileDevice();
+  const { os, browser } = await gerServerDeviceInfo();
 
   return <SettingsModal browser={browser} mobile={isMobile} os={os} />;
 };
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index ddd34bcf2731..aac32d1a2715 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -25,7 +25,7 @@ const RootLayout = async ({ children, modal }: RootLayoutProps) => {
   const locale = lang?.value || DEFAULT_LANG;
 
   const direction = isRtlLang(locale) ? 'rtl' : 'ltr';
-  const mobile = isMobileDevice();
+  const mobile = await isMobileDevice();
 
   return (
     <html dir={direction} lang={locale} suppressHydrationWarning>
@@ -49,7 +49,7 @@ export default RootLayout;
 export { generateMetadata } from './metadata';
 
 export const generateViewport = async (): ResolvingViewport => {
-  const isMobile = isMobileDevice();
+  const isMobile = await isMobileDevice();
 
   const dynamicScale = isMobile ? { maximumScale: 1, userScalable: false } : {};
 
diff --git a/src/components/server/ServerLayout.tsx b/src/components/server/ServerLayout.tsx
index 3e051403665d..eb1c9def9aed 100644
--- a/src/components/server/ServerLayout.tsx
+++ b/src/components/server/ServerLayout.tsx
@@ -9,8 +9,8 @@ interface ServerLayoutProps<T> {
 
 const ServerLayout =
   <T extends PropsWithChildren>({ Desktop, Mobile }: ServerLayoutProps<T>): FC<T> =>
-  (props: T) => {
-    const mobile = isMobileDevice();
+  async (props: T) => {
+    const mobile = await isMobileDevice();
     return mobile ? <Mobile {...props} /> : <Desktop {...props} />;
   };
 
diff --git a/src/layout/GlobalProvider/index.tsx b/src/layout/GlobalProvider/index.tsx
index 04b72697188a..6588ab00f5e7 100644
--- a/src/layout/GlobalProvider/index.tsx
+++ b/src/layout/GlobalProvider/index.tsx
@@ -68,7 +68,7 @@ const GlobalLayout = async ({ children }: PropsWithChildren) => {
   // get default feature flags to use with ssr
   const serverFeatureFlags = getServerFeatureFlagsValue();
   const serverConfig = getServerGlobalConfig();
-  const isMobile = isMobileDevice();
+  const isMobile = await isMobileDevice();
   return (
     <StyleRegistry>
       <Locale antdLocale={antdLocale} defaultLang={userLocale}>
diff --git a/src/utils/server/responsive.ts b/src/utils/server/responsive.ts
index c2e5ef38ba99..7f6d5c929ed4 100644
--- a/src/utils/server/responsive.ts
+++ b/src/utils/server/responsive.ts
@@ -4,12 +4,12 @@ import { UAParser } from 'ua-parser-js';
 /**
  * check mobile device in server
  */
-export const isMobileDevice = () => {
+export const isMobileDevice = async () => {
   if (typeof process === 'undefined') {
     throw new Error('[Server method] you are importing a server-only module outside of server');
   }
 
-  const { get } = headers();
+  const { get } = await headers();
   const ua = get('user-agent');
 
   // console.debug(ua);
@@ -21,15 +21,14 @@ export const isMobileDevice = () => {
 /**
  * check mobile device in server
  */
-export const gerServerDeviceInfo = () => {
+export const gerServerDeviceInfo = async () => {
   if (typeof process === 'undefined') {
     throw new Error('[Server method] you are importing a server-only module outside of server');
   }
 
-  const { get } = headers();
+  const { get } = await headers();
   const ua = get('user-agent');
 
-  // console.debug(ua);
   const parser = new UAParser(ua || '');
 
   return {