diff --git a/packages/next/src/build/webpack-config.ts b/packages/next/src/build/webpack-config.ts
index 26a09dc49f012..9d89a897f6ec2 100644
--- a/packages/next/src/build/webpack-config.ts
+++ b/packages/next/src/build/webpack-config.ts
@@ -1166,7 +1166,7 @@ export default async function getBaseWebpackConfig(
       if (layer === WEBPACK_LAYERS.server) return
 
       const isNextExternal =
-        /next[/\\]dist[/\\](esm[\\/])?(shared|server)[/\\](?!lib[/\\](router[/\\]router|dynamic|head[^-]))/.test(
+        /next[/\\]dist[/\\](esm[\\/])?(shared|server)[/\\](?!lib[/\\](router[/\\]router|dynamic|app-dynamic|head[^-]))/.test(
           localRes
         )
 
@@ -1718,16 +1718,19 @@ export default async function getBaseWebpackConfig(
           : []),
         ...(hasServerComponents
           ? [
-              // Alias next/head component to noop for RSC
               {
                 test: codeCondition.test,
                 issuerLayer: appDirIssuerLayer,
                 resolve: {
                   alias: {
-                    // Alias `next/dynamic` to React.lazy implementation for RSC
+                    // Alias next/head component to noop for RSC
                     [require.resolve('next/head')]: require.resolve(
                       'next/dist/client/components/noop-head'
                     ),
+                    // Alias next/dynamic
+                    [require.resolve('next/dynamic')]: require.resolve(
+                      'next/dist/shared/lib/app-dynamic'
+                    ),
                   },
                 },
               },
diff --git a/packages/next/src/client/components/bailout-to-client-rendering.ts b/packages/next/src/client/components/bailout-to-client-rendering.ts
index 6b25cc82f7df0..b7565bbd7db62 100644
--- a/packages/next/src/client/components/bailout-to-client-rendering.ts
+++ b/packages/next/src/client/components/bailout-to-client-rendering.ts
@@ -1,4 +1,4 @@
-import { suspense } from '../../shared/lib/dynamic-no-ssr'
+import { suspense } from '../../shared/lib/app-dynamic/dynamic-no-ssr'
 import { staticGenerationAsyncStorage } from './static-generation-async-storage'
 
 export function bailoutToClientRendering(): boolean | never {
diff --git a/packages/next/src/client/on-recoverable-error.ts b/packages/next/src/client/on-recoverable-error.ts
index 932d3f9e08588..5812c439ebcc8 100644
--- a/packages/next/src/client/on-recoverable-error.ts
+++ b/packages/next/src/client/on-recoverable-error.ts
@@ -1,4 +1,4 @@
-import { NEXT_DYNAMIC_NO_SSR_CODE } from '../shared/lib/no-ssr-error'
+import { NEXT_DYNAMIC_NO_SSR_CODE } from '../shared/lib/app-dynamic/no-ssr-error'
 
 export default function onRecoverableError(err: any, errorInfo: any) {
   const digest = err.digest || errorInfo.digest
diff --git a/packages/next/src/export/worker.ts b/packages/next/src/export/worker.ts
index 7b73210569e94..b6eb0a96bb58b 100644
--- a/packages/next/src/export/worker.ts
+++ b/packages/next/src/export/worker.ts
@@ -32,7 +32,7 @@ import { normalizeAppPath } from '../shared/lib/router/utils/app-paths'
 import { REDIRECT_ERROR_CODE } from '../client/components/redirect'
 import { DYNAMIC_ERROR_CODE } from '../client/components/hooks-server-context'
 import { NOT_FOUND_ERROR_CODE } from '../client/components/not-found'
-import { NEXT_DYNAMIC_NO_SSR_CODE } from '../shared/lib/no-ssr-error'
+import { NEXT_DYNAMIC_NO_SSR_CODE } from '../shared/lib/app-dynamic/no-ssr-error'
 import { IncrementalCache } from '../server/lib/incremental-cache'
 
 loadRequireHook()
diff --git a/packages/next/src/server/app-render.tsx b/packages/next/src/server/app-render.tsx
index d61bb06275b09..a41d9917c9f80 100644
--- a/packages/next/src/server/app-render.tsx
+++ b/packages/next/src/server/app-render.tsx
@@ -36,7 +36,7 @@ import { REDIRECT_ERROR_CODE } from '../client/components/redirect'
 import { RequestCookies } from './web/spec-extension/cookies'
 import { DYNAMIC_ERROR_CODE } from '../client/components/hooks-server-context'
 import { NOT_FOUND_ERROR_CODE } from '../client/components/not-found'
-import { NEXT_DYNAMIC_NO_SSR_CODE } from '../shared/lib/no-ssr-error'
+import { NEXT_DYNAMIC_NO_SSR_CODE } from '../shared/lib/app-dynamic/no-ssr-error'
 import { HeadManagerContext } from '../shared/lib/head-manager-context'
 import { Writable } from 'stream'
 import stringHash from 'next/dist/compiled/string-hash'
diff --git a/packages/next/src/server/base-server.ts b/packages/next/src/server/base-server.ts
index e9e157079b43e..52a40db35b53f 100644
--- a/packages/next/src/server/base-server.ts
+++ b/packages/next/src/server/base-server.ts
@@ -1954,7 +1954,7 @@ export default abstract class Server<ServerOptions extends Options = Options> {
               <script>
                 async function check() {
                   const res = await fetch(location.href).catch(() => ({}))
-                  
+
                   if (res.status === 200) {
                     location.reload()
                   } else {
diff --git a/packages/next/src/server/render.tsx b/packages/next/src/server/render.tsx
index 7ab0e3205aeca..c5b2686a6e2b5 100644
--- a/packages/next/src/server/render.tsx
+++ b/packages/next/src/server/render.tsx
@@ -89,7 +89,6 @@ import {
 } from '../shared/lib/router/adapters'
 import { AppRouterContext } from '../shared/lib/app-router-context'
 import { SearchParamsContext } from '../shared/lib/hooks-client-context'
-import { NEXT_DYNAMIC_NO_SSR_CODE } from '../shared/lib/no-ssr-error'
 
 let tryGetPreviewData: typeof import('./api-utils/node').tryGetPreviewData
 let warn: typeof import('../build/output/log').warn
@@ -1245,13 +1244,6 @@ export async function renderToHTML(
       return await renderToInitialStream({
         ReactDOMServer,
         element: content,
-        streamOptions: {
-          onError(streamingErr: any) {
-            if (streamingErr?.digest === NEXT_DYNAMIC_NO_SSR_CODE) {
-              return streamingErr.digest
-            }
-          },
-        },
       })
     }
 
diff --git a/packages/next/src/shared/lib/dynamic-no-ssr.tsx b/packages/next/src/shared/lib/app-dynamic/dynamic-no-ssr.tsx
similarity index 100%
rename from packages/next/src/shared/lib/dynamic-no-ssr.tsx
rename to packages/next/src/shared/lib/app-dynamic/dynamic-no-ssr.tsx
diff --git a/packages/next/src/shared/lib/app-dynamic/index.tsx b/packages/next/src/shared/lib/app-dynamic/index.tsx
new file mode 100644
index 0000000000000..1e4061a3f6293
--- /dev/null
+++ b/packages/next/src/shared/lib/app-dynamic/index.tsx
@@ -0,0 +1,90 @@
+import React from 'react'
+import Loadable from './loadable'
+
+type ComponentModule<P = {}> = { default: React.ComponentType<P> }
+
+export declare type LoaderComponent<P = {}> = Promise<
+  React.ComponentType<P> | ComponentModule<P>
+>
+
+export declare type Loader<P = {}> = () => LoaderComponent<P>
+
+export type LoaderMap = { [module: string]: () => Loader<any> }
+
+export type LoadableGeneratedOptions = {
+  webpack?(): any
+  modules?(): LoaderMap
+}
+
+export type DynamicOptionsLoadingProps = {
+  error?: Error | null
+  isLoading?: boolean
+  pastDelay?: boolean
+  retry?: () => void
+  timedOut?: boolean
+}
+
+// Normalize loader to return the module as form { default: Component } for `React.lazy`.
+// Also for backward compatible since next/dynamic allows to resolve a component directly with loader
+// Client component reference proxy need to be converted to a module.
+function convertModule<P>(mod: React.ComponentType<P> | ComponentModule<P>) {
+  return { default: (mod as ComponentModule<P>)?.default || mod }
+}
+
+export type DynamicOptions<P = {}> = LoadableGeneratedOptions & {
+  loading?: (loadingProps: DynamicOptionsLoadingProps) => JSX.Element | null
+  loader?: Loader<P>
+  loadableGenerated?: LoadableGeneratedOptions
+  ssr?: boolean
+}
+
+export type LoadableOptions<P = {}> = DynamicOptions<P>
+
+export type LoadableFn<P = {}> = (
+  opts: LoadableOptions<P>
+) => React.ComponentType<P>
+
+export type LoadableComponent<P = {}> = React.ComponentType<P>
+
+export default function dynamic<P = {}>(
+  dynamicOptions: DynamicOptions<P> | Loader<P>,
+  options?: DynamicOptions<P>
+): React.ComponentType<P> {
+  const loadableFn: LoadableFn<P> = Loadable
+
+  const loadableOptions: LoadableOptions<P> = {
+    // A loading component is not required, so we default it
+    loading: ({ error, isLoading, pastDelay }) => {
+      if (!pastDelay) return null
+      if (process.env.NODE_ENV !== 'production') {
+        if (isLoading) {
+          return null
+        }
+        if (error) {
+          return (
+            <p>
+              {error.message}
+              <br />
+              {error.stack}
+            </p>
+          )
+        }
+      }
+      return null
+    },
+  }
+
+  if (typeof dynamicOptions === 'function') {
+    loadableOptions.loader = dynamicOptions
+  }
+
+  Object.assign(loadableOptions, options)
+
+  const loaderFn = loadableOptions.loader as () => LoaderComponent<P>
+  const loader = () =>
+    loaderFn != null
+      ? loaderFn().then(convertModule)
+      : Promise.resolve(convertModule(() => null))
+
+  return loadableFn({ ...loadableOptions, loader: loader as Loader<P> })
+}
diff --git a/packages/next/src/shared/lib/app-dynamic/loadable.tsx b/packages/next/src/shared/lib/app-dynamic/loadable.tsx
new file mode 100644
index 0000000000000..69b41545e6a96
--- /dev/null
+++ b/packages/next/src/shared/lib/app-dynamic/loadable.tsx
@@ -0,0 +1,39 @@
+import React from 'react'
+import { NoSSR } from './dynamic-no-ssr'
+
+function Loadable(options: any) {
+  const opts = Object.assign(
+    {
+      loader: null,
+      loading: null,
+      ssr: true,
+    },
+    options
+  )
+
+  opts.lazy = React.lazy(opts.loader)
+
+  function LoadableComponent(props: any) {
+    const Loading = opts.loading
+    const fallbackElement = (
+      <Loading isLoading={true} pastDelay={true} error={null} />
+    )
+
+    const Wrap = opts.ssr ? React.Fragment : NoSSR
+    const Lazy = opts.lazy
+
+    return (
+      <React.Suspense fallback={fallbackElement}>
+        <Wrap>
+          <Lazy {...props} />
+        </Wrap>
+      </React.Suspense>
+    )
+  }
+
+  LoadableComponent.displayName = 'LoadableComponent'
+
+  return LoadableComponent
+}
+
+export default Loadable
diff --git a/packages/next/src/shared/lib/no-ssr-error.ts b/packages/next/src/shared/lib/app-dynamic/no-ssr-error.ts
similarity index 100%
rename from packages/next/src/shared/lib/no-ssr-error.ts
rename to packages/next/src/shared/lib/app-dynamic/no-ssr-error.ts
diff --git a/packages/next/src/shared/lib/dynamic.tsx b/packages/next/src/shared/lib/dynamic.tsx
index 001c0eb50ba95..b96c19e0ba1f9 100644
--- a/packages/next/src/shared/lib/dynamic.tsx
+++ b/packages/next/src/shared/lib/dynamic.tsx
@@ -1,6 +1,8 @@
 import React from 'react'
 import Loadable from './loadable'
 
+const isServerSide = typeof window === 'undefined'
+
 type ComponentModule<P = {}> = { default: React.ComponentType<P> }
 
 export declare type LoaderComponent<P = {}> = Promise<
@@ -52,6 +54,26 @@ export type LoadableFn<P = {}> = (
 
 export type LoadableComponent<P = {}> = React.ComponentType<P>
 
+export function noSSR<P = {}>(
+  LoadableInitializer: LoadableFn<P>,
+  loadableOptions: DynamicOptions<P>
+): React.ComponentType<P> {
+  // Removing webpack and modules means react-loadable won't try preloading
+  delete loadableOptions.webpack
+  delete loadableOptions.modules
+
+  // This check is necessary to prevent react-loadable from initializing on the server
+  if (!isServerSide) {
+    return LoadableInitializer(loadableOptions)
+  }
+
+  const Loading = loadableOptions.loading!
+  // This will only be rendered on the server side
+  return () => (
+    <Loading error={null} isLoading pastDelay={false} timedOut={false} />
+  )
+}
+
 export default function dynamic<P = {}>(
   dynamicOptions: DynamicOptions<P> | Loader<P>,
   options?: DynamicOptions<P>
@@ -116,6 +138,8 @@ export default function dynamic<P = {}>(
   if (typeof loadableOptions.ssr === 'boolean' && !loadableOptions.ssr) {
     delete loadableOptions.webpack
     delete loadableOptions.modules
+
+    return noSSR(loadableFn, loadableOptions)
   }
 
   return loadableFn({ ...loadableOptions, loader: loader as Loader<P> })
diff --git a/packages/next/src/shared/lib/loadable.tsx b/packages/next/src/shared/lib/loadable.tsx
index dfded2be5856e..fabed3fd27ce9 100644
--- a/packages/next/src/shared/lib/loadable.tsx
+++ b/packages/next/src/shared/lib/loadable.tsx
@@ -23,9 +23,12 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE
 // Modified to be compatible with webpack 4 / Next.js
 
 import React from 'react'
-import { NoSSR } from './dynamic-no-ssr'
 import { LoadableContext } from './loadable-context'
 
+function resolve(obj: any) {
+  return obj && obj.default ? obj.default : obj
+}
+
 const ALL_INITIALIZERS: any[] = []
 const READY_INITIALIZERS: any[] = []
 let initialized = false
@@ -63,7 +66,6 @@ function createLoadableComponent(loadFn: any, options: any) {
       timeout: null,
       webpack: null,
       modules: null,
-      ssr: true,
     },
     options
   )
@@ -84,18 +86,6 @@ function createLoadableComponent(loadFn: any, options: any) {
     return subscription.promise()
   }
 
-  opts.lazy = React.lazy(async () => {
-    // If dynamic options.ssr == true during SSR,
-    // passing the preloaded promise of component to `React.lazy`.
-    // This guarantees the loader is always resolved after preloading.
-    if (opts.ssr && subscription) {
-      const value = subscription.getCurrentValue()
-      const resolved = await value.loaded
-      if (resolved) return resolved
-    }
-    return await opts.loader()
-  })
-
   // Server only
   if (typeof window === 'undefined') {
     ALL_INITIALIZERS.push(init)
@@ -130,30 +120,44 @@ function createLoadableComponent(loadFn: any, options: any) {
     }
   }
 
-  function LoadableComponent(props: any) {
+  function LoadableComponent(props: any, ref: any) {
     useLoadableModule()
 
-    const Loading = opts.loading
-    const fallbackElement = (
-      <Loading isLoading={true} pastDelay={true} error={null} />
+    const state = (React as any).useSyncExternalStore(
+      subscription.subscribe,
+      subscription.getCurrentValue,
+      subscription.getCurrentValue
     )
 
-    const Wrap = opts.ssr ? React.Fragment : NoSSR
-    const Lazy = opts.lazy
-
-    return (
-      <React.Suspense fallback={fallbackElement}>
-        <Wrap>
-          <Lazy {...props} />
-        </Wrap>
-      </React.Suspense>
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        retry: subscription.retry,
+      }),
+      []
     )
+
+    return React.useMemo(() => {
+      if (state.loading || state.error) {
+        return React.createElement(opts.loading, {
+          isLoading: state.loading,
+          pastDelay: state.pastDelay,
+          timedOut: state.timedOut,
+          error: state.error,
+          retry: subscription.retry,
+        })
+      } else if (state.loaded) {
+        return React.createElement(resolve(state.loaded), props)
+      } else {
+        return null
+      }
+    }, [props, state])
   }
 
   LoadableComponent.preload = () => init()
   LoadableComponent.displayName = 'LoadableComponent'
 
-  return LoadableComponent
+  return React.forwardRef(LoadableComponent)
 }
 
 class LoadableSubscription {
diff --git a/test/development/basic/next-dynamic.test.ts b/test/development/basic/next-dynamic.test.ts
index b32b4fba6f595..c02b5d31e1749 100644
--- a/test/development/basic/next-dynamic.test.ts
+++ b/test/development/basic/next-dynamic.test.ts
@@ -102,6 +102,14 @@ describe.each([
           }
         })
 
+        it('should SSR nested dynamic components and skip nonSSR ones', async () => {
+          const $ = await get$(basePath + '/dynamic/nested')
+          const text = $('#__next').text()
+          expect(text).toContain('Nested 1')
+          expect(text).toContain('Nested 2')
+          expect(text).not.toContain('Browser hydrated')
+        })
+
         it('should hydrate nested chunks', async () => {
           let browser
           try {
diff --git a/test/e2e/app-dir/app/index.test.ts b/test/e2e/app-dir/app/index.test.ts
index c5f5bdc042656..0132079f7c32e 100644
--- a/test/e2e/app-dir/app/index.test.ts
+++ b/test/e2e/app-dir/app/index.test.ts
@@ -141,39 +141,6 @@ createNextDescribe(
         )
       })
 
-      it('should handle next/dynamic correctly', async () => {
-        const $ = await next.render$('/dashboard/dynamic')
-        // filter out the script
-        const selector = 'body div'
-        const serverContent = $(selector).text()
-        // should load chunks generated via async import correctly with React.lazy
-        expect(serverContent).toContain('next-dynamic lazy')
-        // should support `dynamic` in both server and client components
-        expect(serverContent).toContain('next-dynamic dynamic on server')
-        expect(serverContent).toContain('next-dynamic dynamic on client')
-        expect(serverContent).toContain('next-dynamic server import client')
-        expect(serverContent).not.toContain(
-          'next-dynamic dynamic no ssr on client'
-        )
-
-        expect(serverContent).not.toContain(
-          'next-dynamic dynamic no ssr on server'
-        )
-
-        // client component under server component with ssr: false will not be rendered either in flight or SSR
-        expect($.html()).not.toContain('client component under sever no ssr')
-
-        const browser = await next.browser('/dashboard/dynamic')
-        const clientContent = await browser.elementByCss(selector).text()
-        expect(clientContent).toContain('next-dynamic dynamic no ssr on server')
-        expect(clientContent).toContain('client component under sever no ssr')
-        await browser.waitForElementByCss('#css-text-dynamic-no-ssr-client')
-
-        expect(
-          await browser.elementByCss('#css-text-dynamic-no-ssr-client').text()
-        ).toBe('next-dynamic dynamic no ssr on client:suffix')
-      })
-
       it('should serve polyfills for browsers that do not support modules', async () => {
         const html = await next.render('/dashboard/index')
         expect(html).toMatch(
diff --git a/test/e2e/app-dir/dynamic/app/.gitkeep b/test/e2e/app-dir/dynamic/app/.gitkeep
deleted file mode 100644
index e69de29bb2d1d..0000000000000
diff --git a/test/e2e/app-dir/app/app/dashboard/dynamic/dynamic-imports/dynamic-client.js b/test/e2e/app-dir/dynamic/app/dynamic/dynamic-imports/dynamic-client.js
similarity index 100%
rename from test/e2e/app-dir/app/app/dashboard/dynamic/dynamic-imports/dynamic-client.js
rename to test/e2e/app-dir/dynamic/app/dynamic/dynamic-imports/dynamic-client.js
diff --git a/test/e2e/app-dir/app/app/dashboard/dynamic/dynamic-imports/dynamic-server.js b/test/e2e/app-dir/dynamic/app/dynamic/dynamic-imports/dynamic-server.js
similarity index 100%
rename from test/e2e/app-dir/app/app/dashboard/dynamic/dynamic-imports/dynamic-server.js
rename to test/e2e/app-dir/dynamic/app/dynamic/dynamic-imports/dynamic-server.js
diff --git a/test/e2e/app-dir/app/app/dashboard/dynamic/dynamic-imports/react-lazy-client.js b/test/e2e/app-dir/dynamic/app/dynamic/dynamic-imports/react-lazy-client.js
similarity index 100%
rename from test/e2e/app-dir/app/app/dashboard/dynamic/dynamic-imports/react-lazy-client.js
rename to test/e2e/app-dir/dynamic/app/dynamic/dynamic-imports/react-lazy-client.js
diff --git a/test/e2e/app-dir/app/app/dashboard/dynamic/dynamic.module.css b/test/e2e/app-dir/dynamic/app/dynamic/dynamic.module.css
similarity index 100%
rename from test/e2e/app-dir/app/app/dashboard/dynamic/dynamic.module.css
rename to test/e2e/app-dir/dynamic/app/dynamic/dynamic.module.css
diff --git a/test/e2e/app-dir/app/app/dashboard/dynamic/lazy.module.css b/test/e2e/app-dir/dynamic/app/dynamic/lazy.module.css
similarity index 100%
rename from test/e2e/app-dir/app/app/dashboard/dynamic/lazy.module.css
rename to test/e2e/app-dir/dynamic/app/dynamic/lazy.module.css
diff --git a/test/e2e/app-dir/app/app/dashboard/dynamic/page.js b/test/e2e/app-dir/dynamic/app/dynamic/page.js
similarity index 100%
rename from test/e2e/app-dir/app/app/dashboard/dynamic/page.js
rename to test/e2e/app-dir/dynamic/app/dynamic/page.js
diff --git a/test/e2e/app-dir/app/app/dashboard/dynamic/text-client.js b/test/e2e/app-dir/dynamic/app/dynamic/text-client.js
similarity index 100%
rename from test/e2e/app-dir/app/app/dashboard/dynamic/text-client.js
rename to test/e2e/app-dir/dynamic/app/dynamic/text-client.js
diff --git a/test/e2e/app-dir/app/app/dashboard/dynamic/text-dynamic-client.js b/test/e2e/app-dir/dynamic/app/dynamic/text-dynamic-client.js
similarity index 100%
rename from test/e2e/app-dir/app/app/dashboard/dynamic/text-dynamic-client.js
rename to test/e2e/app-dir/dynamic/app/dynamic/text-dynamic-client.js
diff --git a/test/e2e/app-dir/app/app/dashboard/dynamic/text-dynamic-no-ssr-client.js b/test/e2e/app-dir/dynamic/app/dynamic/text-dynamic-no-ssr-client.js
similarity index 100%
rename from test/e2e/app-dir/app/app/dashboard/dynamic/text-dynamic-no-ssr-client.js
rename to test/e2e/app-dir/dynamic/app/dynamic/text-dynamic-no-ssr-client.js
diff --git a/test/e2e/app-dir/app/app/dashboard/dynamic/text-dynamic-no-ssr-server.js b/test/e2e/app-dir/dynamic/app/dynamic/text-dynamic-no-ssr-server.js
similarity index 100%
rename from test/e2e/app-dir/app/app/dashboard/dynamic/text-dynamic-no-ssr-server.js
rename to test/e2e/app-dir/dynamic/app/dynamic/text-dynamic-no-ssr-server.js
diff --git a/test/e2e/app-dir/app/app/dashboard/dynamic/text-dynamic-server-import-client.js b/test/e2e/app-dir/dynamic/app/dynamic/text-dynamic-server-import-client.js
similarity index 100%
rename from test/e2e/app-dir/app/app/dashboard/dynamic/text-dynamic-server-import-client.js
rename to test/e2e/app-dir/dynamic/app/dynamic/text-dynamic-server-import-client.js
diff --git a/test/e2e/app-dir/app/app/dashboard/dynamic/text-dynamic-server.js b/test/e2e/app-dir/dynamic/app/dynamic/text-dynamic-server.js
similarity index 100%
rename from test/e2e/app-dir/app/app/dashboard/dynamic/text-dynamic-server.js
rename to test/e2e/app-dir/dynamic/app/dynamic/text-dynamic-server.js
diff --git a/test/e2e/app-dir/app/app/dashboard/dynamic/text-lazy-client.js b/test/e2e/app-dir/dynamic/app/dynamic/text-lazy-client.js
similarity index 100%
rename from test/e2e/app-dir/app/app/dashboard/dynamic/text-lazy-client.js
rename to test/e2e/app-dir/dynamic/app/dynamic/text-lazy-client.js
diff --git a/test/e2e/app-dir/dynamic/app/layout.js b/test/e2e/app-dir/dynamic/app/layout.js
new file mode 100644
index 0000000000000..627c1ec75c7b0
--- /dev/null
+++ b/test/e2e/app-dir/dynamic/app/layout.js
@@ -0,0 +1,10 @@
+export default function Root({ children }) {
+  return (
+    <html>
+      <body>
+        <header>top bar</header>
+        {children}
+      </body>
+    </html>
+  )
+}
diff --git a/test/e2e/app-dir/dynamic/dynamic.test.ts b/test/e2e/app-dir/dynamic/dynamic.test.ts
index 4cd59ed28f90c..076749dc00b16 100644
--- a/test/e2e/app-dir/dynamic/dynamic.test.ts
+++ b/test/e2e/app-dir/dynamic/dynamic.test.ts
@@ -8,13 +8,49 @@ createNextDescribe(
   },
   ({ next }) => {
     it('should handle ssr: false in pages when appDir is enabled', async () => {
-      const $ = await next.render$('/no-ssr')
+      const $ = await next.render$('/legacy/no-ssr')
       expect($.html()).not.toContain('navigator')
 
-      const browser = await next.browser('/no-ssr')
+      const browser = await next.browser('/legacy/no-ssr')
       expect(
         await browser.waitForElementByCss('#pure-client').text()
       ).toContain('navigator')
     })
+
+    it('should handle next/dynamic in SSR correctly', async () => {
+      const $ = await next.render$('/dynamic')
+      // filter out the script
+      const selector = 'body div'
+      const serverContent = $(selector).text()
+      // should load chunks generated via async import correctly with React.lazy
+      expect(serverContent).toContain('next-dynamic lazy')
+      // should support `dynamic` in both server and client components
+      expect(serverContent).toContain('next-dynamic dynamic on server')
+      expect(serverContent).toContain('next-dynamic dynamic on client')
+      expect(serverContent).toContain('next-dynamic server import client')
+      expect(serverContent).not.toContain(
+        'next-dynamic dynamic no ssr on client'
+      )
+
+      expect(serverContent).not.toContain(
+        'next-dynamic dynamic no ssr on server'
+      )
+
+      // client component under server component with ssr: false will not be rendered either in flight or SSR
+      expect($.html()).not.toContain('client component under sever no ssr')
+    })
+
+    it('should handle next/dynamic in hydration correctly', async () => {
+      const selector = 'body div'
+      const browser = await next.browser('/dynamic')
+      const clientContent = await browser.elementByCss(selector).text()
+      expect(clientContent).toContain('next-dynamic dynamic no ssr on server')
+      expect(clientContent).toContain('client component under sever no ssr')
+      await browser.waitForElementByCss('#css-text-dynamic-no-ssr-client')
+
+      expect(
+        await browser.elementByCss('#css-text-dynamic-no-ssr-client').text()
+      ).toBe('next-dynamic dynamic no ssr on client:suffix')
+    })
   }
 )
diff --git a/test/e2e/app-dir/dynamic/pages/legacy/no-ssr.js b/test/e2e/app-dir/dynamic/pages/legacy/no-ssr.js
new file mode 100644
index 0000000000000..e1dd94b546270
--- /dev/null
+++ b/test/e2e/app-dir/dynamic/pages/legacy/no-ssr.js
@@ -0,0 +1,5 @@
+import dynamic from 'next/dynamic'
+
+const PureClient = dynamic(() => import('../../ui/pure-client'), { ssr: false })
+
+export default PureClient
diff --git a/test/e2e/app-dir/dynamic/pages/no-ssr.js b/test/e2e/app-dir/dynamic/pages/no-ssr.js
deleted file mode 100644
index b63f408927213..0000000000000
--- a/test/e2e/app-dir/dynamic/pages/no-ssr.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import dynamic from 'next/dynamic'
-
-const PureClient = dynamic(() => import('../ui/pure-client'), { ssr: false })
-
-export default PureClient
diff --git a/test/unit/next-dynamic.test.tsx b/test/unit/next-dynamic.test.tsx
index 2e1c7cdea09d8..a46004030e436 100644
--- a/test/unit/next-dynamic.test.tsx
+++ b/test/unit/next-dynamic.test.tsx
@@ -9,9 +9,6 @@ describe('next/dynamic', () => {
   it('test dynamic with jest', () => {
     const App = dynamic(() => import('./fixtures/stub-components/hello'))
 
-    // @ts-ignore
-    expect(App.preload).toBeDefined()
-
     act(() => {
       const { unmount } = render(<App />)
       unmount()