throw error for noSSR and recover from error on client

packages/next/client/app-index.tsx

@@ -7,6 +7,7 @@ import { createFromReadableStream } from 'next/dist/compiled/react-server-dom-we
 
 import { HeadManagerContext } from '../shared/lib/head-manager-context'
 import { GlobalLayoutRouterContext } from '../shared/lib/app-router-context'
+import { NEXT_DYNAMIC_NO_SSR_CODE } from '../shared/lib/dynamic'
 
 /// <reference types="react-dom/experimental" />
 
@@ -190,7 +191,13 @@ export function hydrate() {
     if (rootLayoutMissingTagsError) {
       const reactRootElement = document.createElement('div')
       document.body.appendChild(reactRootElement)
-      const reactRoot = (ReactDOMClient as any).createRoot(reactRootElement)
+      const reactRoot = (ReactDOMClient as any).createRoot(reactRootElement, {
+        onRecoverableError(err: any) {
+          // Skip certain custom errors which are not expected to throw on client
+          if (err.digest === NEXT_DYNAMIC_NO_SSR_CODE) return
+          throw err
+        },
+      })
 
       reactRoot.render(
         <GlobalLayoutRouterContext.Provider
@@ -231,11 +238,18 @@ export function hydrate() {
     </StrictModeIfEnabled>
   )
 
+  const options = {
+    onRecoverableError(err: any) {
+      // Skip certain custom errors which are not expected to throw on client
+      if (err.digest === NEXT_DYNAMIC_NO_SSR_CODE) return
+      throw err
+    },
+  }
   const isError = document.documentElement.id === '__next_error__'
   const reactRoot = isError
-    ? (ReactDOMClient as any).createRoot(appElement)
+    ? (ReactDOMClient as any).createRoot(appElement, options)
     : (React as any).startTransition(() =>
-        (ReactDOMClient as any).hydrateRoot(appElement, reactEl)
+        (ReactDOMClient as any).hydrateRoot(appElement, reactEl, options)
       )
   if (isError) {
     reactRoot.render(reactEl)

packages/next/client/components/layout-router.tsx

@@ -26,6 +26,7 @@ import { createInfinitePromise } from './infinite-promise'
 import { ErrorBoundary } from './error-boundary'
 import { matchSegment } from './match-segments'
 import { useRouter } from './navigation'
+import { NEXT_DYNAMIC_NO_SSR_CODE } from '../../shared/lib/dynamic'
 
 /**
  * Add refetch marker to router state at the point of the current layout segment.
@@ -342,6 +343,34 @@ class RedirectErrorBoundary extends React.Component<
   }
 }
 
+class DynamicErrorBoundary extends React.Component<
+  { children: React.ReactNode },
+  { noSSR: boolean }
+> {
+  constructor(props: { children: React.ReactNode }) {
+    super(props)
+    this.state = { noSSR: false }
+  }
+  static getDerivedStateFromError(error: any) {
+    if (error.digest === NEXT_DYNAMIC_NO_SSR_CODE) {
+      return { noSSR: true }
+    }
+    // Re-throw if error is not for dynamic
+    throw error
+  }
+
+  render() {
+    if (this.state.noSSR) {
+      return null
+    }
+    return this.props.children
+  }
+}
+
+function DynamicBoundary({ children }: { children: React.ReactNode }) {
+  return <DynamicErrorBoundary>{children}</DynamicErrorBoundary>
+}
+
 function RedirectBoundary({ children }: { children: React.ReactNode }) {
   const router = useRouter()
   return (
@@ -496,21 +525,23 @@ export default function OuterLayoutRouter({
                     notFoundStyles={notFoundStyles}
                   >
                     <RedirectBoundary>
-                      <InnerLayoutRouter
-                        parallelRouterKey={parallelRouterKey}
-                        url={url}
-                        tree={tree}
-                        childNodes={childNodesForParallelRouter!}
-                        childProp={
-                          childPropSegment === preservedSegment
-                            ? childProp
-                            : null
-                        }
-                        segmentPath={segmentPath}
-                        path={preservedSegment}
-                        isActive={currentChildSegment === preservedSegment}
-                        rootLayoutIncluded={rootLayoutIncluded}
-                      />
+                      <DynamicBoundary>
+                        <InnerLayoutRouter
+                          parallelRouterKey={parallelRouterKey}
+                          url={url}
+                          tree={tree}
+                          childNodes={childNodesForParallelRouter!}
+                          childProp={
+                            childPropSegment === preservedSegment
+                              ? childProp
+                              : null
+                          }
+                          segmentPath={segmentPath}
+                          path={preservedSegment}
+                          isActive={currentChildSegment === preservedSegment}
+                          rootLayoutIncluded={rootLayoutIncluded}
+                        />
+                      </DynamicBoundary>
                     </RedirectBoundary>
                   </NotFoundBoundary>
                 </LoadingBoundary>

packages/next/client/index.tsx

@@ -43,6 +43,7 @@ import {
   PathnameContextProviderAdapter,
 } from '../shared/lib/router/adapters'
 import { SearchParamsContext } from '../shared/lib/hooks-client-context'
+import { NEXT_DYNAMIC_NO_SSR_CODE } from '../shared/lib/dynamic'
 
 /// <reference types="react-dom/experimental" />
 
@@ -510,7 +511,13 @@ function renderReactElement(
   const reactEl = fn(shouldHydrate ? markHydrateComplete : markRenderComplete)
   if (!reactRoot) {
     // Unlike with createRoot, you don't need a separate root.render() call here
-    reactRoot = ReactDOM.hydrateRoot(domEl, reactEl)
+    reactRoot = ReactDOM.hydrateRoot(domEl, reactEl, {
+      onRecoverableError(err: any) {
+        // Skip certain custom errors which are not expected to throw on client
+        if (err.message === NEXT_DYNAMIC_NO_SSR_CODE) return
+        throw err
+      },
+    })
     // TODO: Remove shouldHydrate variable when React 18 is stable as it can depend on `reactRoot` existing
     shouldHydrate = false
   } else {

packages/next/export/worker.ts

@@ -32,6 +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/dynamic'
 
 loadRequireHook()
 
@@ -343,6 +344,7 @@ export default async function exportPage({
           if (
             err.digest !== DYNAMIC_ERROR_CODE &&
             err.digest !== NOT_FOUND_ERROR_CODE &&
+            err.digest !== NEXT_DYNAMIC_NO_SSR_CODE &&
             !err.digest?.startsWith(REDIRECT_ERROR_CODE)
           ) {
             throw err

packages/next/server/app-render.tsx

@@ -45,6 +45,7 @@ import {
   FLIGHT_PARAMETERS,
 } from '../client/components/app-router-headers'
 import type { StaticGenerationStore } from '../client/components/static-generation-async-storage'
+import { NEXT_DYNAMIC_NO_SSR_CODE } from '../shared/lib/dynamic'
 
 const isEdgeRuntime = process.env.NEXT_RUNTIME === 'edge'
 
@@ -215,6 +216,7 @@ function createErrorHandler(
     if (
       err.digest === DYNAMIC_ERROR_CODE ||
       err.digest === NOT_FOUND_ERROR_CODE ||
+      err.digest === NEXT_DYNAMIC_NO_SSR_CODE ||
       err.digest?.startsWith(REDIRECT_ERROR_CODE)
     ) {
       return err.digest

packages/next/server/render.tsx

@@ -89,6 +89,7 @@ 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/dynamic'
 
 let tryGetPreviewData: typeof import('./api-utils/node').tryGetPreviewData
 let warn: typeof import('../build/output/log').warn
@@ -1244,6 +1245,13 @@ export async function renderToHTML(
       return await renderToInitialStream({
         ReactDOMServer,
         element: content,
+        streamOptions: {
+          onError(e: any) {
+            if (e.digest === NEXT_DYNAMIC_NO_SSR_CODE) {
+              return e.digest
+            }
+          },
+        },
       })
     }
 

packages/next/shared/lib/dynamic.tsx

@@ -1,11 +1,20 @@
 import React, { Suspense } from 'react'
 import Loadable from './loadable'
 
-const isServerSide = typeof window === 'undefined'
+export const NEXT_DYNAMIC_NO_SSR_CODE = 'DYNAMIC_SERVER_USAGE'
+export class NextDynamicNoSSRError extends Error {
+  digest: typeof NEXT_DYNAMIC_NO_SSR_CODE = NEXT_DYNAMIC_NO_SSR_CODE
 
-export type LoaderComponent<P = {}> = Promise<
-  React.ComponentType<P> | { default: React.ComponentType<P> }
->
+  constructor() {
+    super('next/dynamic with noSSR on server')
+  }
+}
+
+export type LoaderComponent<P = {}> = Promise<{
+  default: React.ComponentType<P>
+}>
+
+type LazyComponentLoader<P = {}> = () => LoaderComponent<P>
 
 export type Loader<P = {}> = (() => LoaderComponent<P>) | LoaderComponent<P>
 
@@ -51,23 +60,21 @@ export function noSSR<P = {}>(
   delete loadableOptions.webpack
   delete loadableOptions.modules
 
-  const NoSSRComponent = React.lazy(
-    (isServerSide
-      ? async () => ({ default: () => null })
-      : loadableOptions.loader) as () => Promise<{
-      default: React.ComponentType<P>
-    }>
-  )
+  const NoSSRComponent =
+    typeof window === 'undefined'
+      ? ((() => {
+          throw new NextDynamicNoSSRError()
+        }) as React.FunctionComponent<P>)
+      : React.lazy(loadableOptions.loader as LazyComponentLoader<P>)
 
   const Loading = loadableOptions.loading!
+  const fallback = (
+    <Loading error={null} isLoading pastDelay={false} timedOut={false} />
+  )
 
   return () => (
-    <Suspense
-      fallback={
-        <Loading error={null} isLoading pastDelay={false} timedOut={false} />
-      }
-    >
-      {/* @ts-ignore */}
+    <Suspense fallback={fallback}>
+      {/* @ts-ignore TODO: fix typing */}
       <NoSSRComponent />
     </Suspense>
   )