diff --git a/apps/web/src/components/page-detail-editor.tsx b/apps/web/src/components/page-detail-editor.tsx
index e339a977ca..e5c3fdb324 100644
--- a/apps/web/src/components/page-detail-editor.tsx
+++ b/apps/web/src/components/page-detail-editor.tsx
@@ -3,10 +3,9 @@ import type { Page } from '@blocksuite/store';
 import { assertExists } from '@blocksuite/store';
 import { useBlockSuiteWorkspacePageTitle } from '@toeverything/hooks/use-blocksuite-workspace-page-title';
 import { useAtomValue, useSetAtom } from 'jotai';
-import dynamic from 'next/dynamic';
 import Head from 'next/head';
 import type React from 'react';
-import { useCallback } from 'react';
+import { lazy, useCallback } from 'react';
 
 import { currentEditorAtom, workspacePreferredModeAtom } from '../atoms';
 import { usePageMeta } from '../hooks/use-page-meta';
@@ -24,12 +23,10 @@ export type PageDetailEditorProps = {
   header?: React.ReactNode;
 };
 
-const Editor = dynamic(
-  async () =>
-    (await import('./blocksuite/block-suite-editor')).BlockSuiteEditor,
-  {
-    ssr: false,
-  }
+const Editor = lazy(() =>
+  import('./blocksuite/block-suite-editor').then(module => ({
+    default: module.BlockSuiteEditor,
+  }))
 );
 
 export const PageDetailEditor: React.FC<PageDetailEditorProps> = ({
diff --git a/apps/web/src/components/pure/help-island/index.tsx b/apps/web/src/components/pure/help-island/index.tsx
index fdc2f97ff7..e80a373517 100644
--- a/apps/web/src/components/pure/help-island/index.tsx
+++ b/apps/web/src/components/pure/help-island/index.tsx
@@ -2,8 +2,7 @@ import { MuiFade, Tooltip } from '@affine/component';
 import { config } from '@affine/env';
 import { useTranslation } from '@affine/i18n';
 import { CloseIcon, NewIcon } from '@blocksuite/icons';
-import dynamic from 'next/dynamic';
-import { useState } from 'react';
+import { lazy, useState } from 'react';
 
 import { ShortcutsModal } from '../shortcuts-modal';
 import { ContactIcon, HelpIcon, KeyboardIcon } from './Icons';
@@ -13,14 +12,11 @@ import {
   StyledIsland,
   StyledTriggerWrapper,
 } from './style';
-const ContactModal = dynamic(
-  () =>
-    import('@affine/component/contact-modal').then(({ ContactModal }) => ({
-      default: ContactModal,
-    })),
-  {
-    ssr: true,
-  }
+
+const ContactModal = lazy(() =>
+  import('@affine/component/contact-modal').then(({ ContactModal }) => ({
+    default: ContactModal,
+  }))
 );
 
 export type IslandItemNames = 'whatNew' | 'contact' | 'shortcuts';
diff --git a/apps/web/src/layouts/index.tsx b/apps/web/src/layouts/index.tsx
index a6f9b1b9e3..ff4182efd6 100644
--- a/apps/web/src/layouts/index.tsx
+++ b/apps/web/src/layouts/index.tsx
@@ -7,11 +7,10 @@ import { WorkspaceFlavour } from '@affine/workspace/type';
 import { assertExists, nanoid } from '@blocksuite/store';
 import { NoSsr } from '@mui/material';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
-import dynamic from 'next/dynamic';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import type { FC, PropsWithChildren } from 'react';
-import { Suspense, useCallback, useEffect } from 'react';
+import { lazy, Suspense, useCallback, useEffect } from 'react';
 
 import {
   currentWorkspaceIdAtom,
@@ -57,8 +56,10 @@ declare global {
   var currentWorkspace: AllWorkspace;
 }
 
-const QuickSearchModal = dynamic(
-  () => import('../components/pure/quick-search-modal')
+const QuickSearchModal = lazy(() =>
+  import('../components/pure/quick-search-modal').then(module => ({
+    default: module.QuickSearchModal,
+  }))
 );
 
 export const PublicQuickSearch: FC = () => {
diff --git a/apps/web/src/layouts/public-workspace-layout.tsx b/apps/web/src/layouts/public-workspace-layout.tsx
index b712188fbb..f4ecd6eede 100644
--- a/apps/web/src/layouts/public-workspace-layout.tsx
+++ b/apps/web/src/layouts/public-workspace-layout.tsx
@@ -1,11 +1,10 @@
 import { ListSkeleton } from '@affine/component';
 import { useAtomValue } from 'jotai';
 import { useAtom } from 'jotai';
-import dynamic from 'next/dynamic';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import type React from 'react';
-import { Suspense } from 'react';
+import { lazy, Suspense } from 'react';
 
 import { openQuickSearchModalAtom } from '../atoms';
 import {
@@ -16,8 +15,10 @@ import { StyledTableContainer } from '../components/blocksuite/block-suite-page-
 import { useRouterTitle } from '../hooks/use-router-title';
 import { MainContainer, StyledPage } from './styles';
 
-const QuickSearchModal = dynamic(
-  () => import('../components/pure/quick-search-modal')
+const QuickSearchModal = lazy(() =>
+  import('../components/pure/quick-search-modal').then(module => ({
+    default: module.QuickSearchModal,
+  }))
 );
 
 export const PublicQuickSearch: React.FC = () => {
diff --git a/apps/web/src/pages/_debug/init-page.dev.tsx b/apps/web/src/pages/_debug/init-page.dev.tsx
index 2321c5baed..b44d91554f 100644
--- a/apps/web/src/pages/_debug/init-page.dev.tsx
+++ b/apps/web/src/pages/_debug/init-page.dev.tsx
@@ -1,16 +1,15 @@
 import { NoSsr } from '@mui/material';
-import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
+import { lazy } from 'react';
 
 import { StyledPage, StyledWrapper } from '../../layouts/styles';
 import type { NextPageWithLayout } from '../../shared';
 import { initPage } from '../../utils/blocksuite';
 
-const Editor = dynamic(
-  () => import('../../components/__debug__/client/Editor'),
-  {
-    ssr: false,
-  }
+const Editor = lazy(() =>
+  import('../../components/__debug__/client/Editor').then(module => ({
+    default: module.default,
+  }))
 );
 
 const InitPagePage: NextPageWithLayout = () => {
diff --git a/apps/web/src/pages/_debug/login.dev.tsx b/apps/web/src/pages/_debug/login.dev.tsx
index 6ca56a14af..484df22fb7 100644
--- a/apps/web/src/pages/_debug/login.dev.tsx
+++ b/apps/web/src/pages/_debug/login.dev.tsx
@@ -11,14 +11,12 @@ import {
 } from '@affine/workspace/affine/login';
 import { useAtom } from 'jotai';
 import type { NextPage } from 'next';
-import dynamic from 'next/dynamic';
-import { useMemo } from 'react';
+import { lazy, useMemo } from 'react';
 
 import { toast } from '../../utils';
 
-const Viewer = dynamic(
-  () => import('@rich-data/viewer').then(m => ({ default: m.JsonViewer })),
-  { ssr: false }
+const Viewer = lazy(() =>
+  import('@rich-data/viewer').then(m => ({ default: m.JsonViewer }))
 );
 
 import { useTheme } from 'next-themes';
diff --git a/apps/web/src/pages/public-workspace/[workspaceId].tsx b/apps/web/src/pages/public-workspace/[workspaceId].tsx
index 7816d104df..c0a17bd712 100644
--- a/apps/web/src/pages/public-workspace/[workspaceId].tsx
+++ b/apps/web/src/pages/public-workspace/[workspaceId].tsx
@@ -3,10 +3,9 @@ import { SearchIcon } from '@blocksuite/icons';
 import { useBlockSuiteWorkspaceAvatarUrl } from '@toeverything/hooks/use-blocksuite-workspace-avatar-url';
 import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-blocksuite-workspace-name';
 import { useAtomValue, useSetAtom } from 'jotai';
-import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
 import type React from 'react';
-import { Suspense, useCallback, useEffect } from 'react';
+import { lazy, Suspense, useCallback, useEffect } from 'react';
 
 import { currentWorkspaceIdAtom, openQuickSearchModalAtom } from '../../atoms';
 import {
@@ -21,10 +20,10 @@ import { PublicWorkspaceLayout } from '../../layouts/public-workspace-layout';
 import type { NextPageWithLayout } from '../../shared';
 import { NavContainer, StyledBreadcrumbs } from './[workspaceId]/[pageId]';
 
-const BlockSuitePublicPageList = dynamic(
-  async () =>
-    (await import('../../components/blocksuite/block-suite-page-list'))
-      .BlockSuitePublicPageList
+const BlockSuitePublicPageList = lazy(() =>
+  import('../../components/blocksuite/block-suite-page-list').then(module => ({
+    default: module.BlockSuitePublicPageList,
+  }))
 );
 
 const ListPageInner: React.FC<{
diff --git a/apps/web/src/providers/ModalProvider.tsx b/apps/web/src/providers/ModalProvider.tsx
index a3e73e3bac..11a229f9cf 100644
--- a/apps/web/src/providers/ModalProvider.tsx
+++ b/apps/web/src/providers/ModalProvider.tsx
@@ -1,10 +1,9 @@
 import { jotaiWorkspacesAtom } from '@affine/workspace/atom';
 import { arrayMove } from '@dnd-kit/sortable';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
-import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
 import type React from 'react';
-import { useCallback, useTransition } from 'react';
+import { lazy, useCallback, useTransition } from 'react';
 
 import {
   currentWorkspaceIdAtom,
@@ -19,14 +18,15 @@ import { useRouterHelper } from '../hooks/use-router-helper';
 import { useWorkspaces, useWorkspacesHelper } from '../hooks/use-workspaces';
 import { WorkspaceSubPath } from '../shared';
 
-const WorkspaceListModal = dynamic(
-  async () =>
-    (await import('../components/pure/workspace-list-modal')).WorkspaceListModal
+const WorkspaceListModal = lazy(() =>
+  import('../components/pure/workspace-list-modal').then(module => ({
+    default: module.WorkspaceListModal,
+  }))
 );
-const CreateWorkspaceModal = dynamic(
-  async () =>
-    (await import('../components/pure/create-workspace-modal'))
-      .CreateWorkspaceModal
+const CreateWorkspaceModal = lazy(() =>
+  import('../components/pure/create-workspace-modal').then(module => ({
+    default: module.CreateWorkspaceModal,
+  }))
 );
 
 export function Modals() {