diff --git a/apps/web/src/pages/_app.tsx b/apps/web/src/pages/_app.tsx
index 26f6fb3d36..1ce9c56498 100644
--- a/apps/web/src/pages/_app.tsx
+++ b/apps/web/src/pages/_app.tsx
@@ -7,6 +7,7 @@ import '@affine/i18n';
 
 import { useTranslation } from '@affine/i18n';
 import { DataCenterPreloader } from '@affine/store';
+import { NoSsr } from '@mui/material';
 import { Logger } from '@toeverything/pathfinder-logger';
 import type { NextPage } from 'next';
 import type { AppProps } from 'next/app';
@@ -72,19 +73,21 @@ const App = ({ Component, pageProps }: AppPropsWithLayout) => {
           <ConfirmProvider key="ConfirmProvider" />,
         ]}
       >
-        {NoNeedAppStatePageList.includes(router.route) ? (
-          getLayout(<Component {...pageProps} />)
-        ) : (
-          <Suspense fallback={<PageLoading />}>
-            <DataCenterPreloader>
-              <MessageCenterHandler>
-                <AppDefender>
-                  {getLayout(<Component {...pageProps} />)}
-                </AppDefender>
-              </MessageCenterHandler>
-            </DataCenterPreloader>
-          </Suspense>
-        )}
+        <NoSsr>
+          {NoNeedAppStatePageList.includes(router.route) ? (
+            getLayout(<Component {...pageProps} />)
+          ) : (
+            <Suspense fallback={<PageLoading />}>
+              <DataCenterPreloader>
+                <MessageCenterHandler>
+                  <AppDefender>
+                    {getLayout(<Component {...pageProps} />)}
+                  </AppDefender>
+                </MessageCenterHandler>
+              </DataCenterPreloader>
+            </Suspense>
+          )}
+        </NoSsr>
       </ProviderComposer>
     </>
   );