use lazy to load inline component

vercel · Nov 8, 2022 · 040d5b3 · 040d5b3
1 parent 9164826
commit 040d5b3
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 19 deletions.
diff --git a/packages/next/shared/lib/dynamic.tsx b/packages/next/shared/lib/dynamic.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Suspense } from 'react'
 import Loadable from './loadable'
 
 const isServerSide = typeof window === 'undefined'
@@ -9,7 +9,7 @@ export type LoaderComponent<P = {}> = Promise<
 
 export type Loader<P = {}> = (() => LoaderComponent<P>) | LoaderComponent<P>
 
-export type LoaderMap = { [mdule: string]: () => Loader<any> }
+export type LoaderMap = { [module: string]: () => Loader<any> }
 
 export type LoadableGeneratedOptions = {
   webpack?(): any
@@ -44,22 +44,32 @@ export type LoadableFn<P = {}> = (
 export type LoadableComponent<P = {}> = React.ComponentType<P>
 
 export function noSSR<P = {}>(
-  LoadableInitializer: LoadableFn<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 NoSSRComponent = React.lazy(
+    (isServerSide
+      ? async () => ({ default: () => null })
+      : loadableOptions.loader) as () => Promise<{
+      default: React.ComponentType<P>
+    }>
+  )
 
   const Loading = loadableOptions.loading!
-  // This will only be rendered on the server side
+
   return () => (
-    <Loading error={null} isLoading pastDelay={false} timedOut={false} />
+    <Suspense
+      fallback={
+        <Loading error={null} isLoading pastDelay={false} timedOut={false} />
+      }
+    >
+      {/* @ts-ignore */}
+      <NoSSRComponent />
+    </Suspense>
   )
 }
 

diff --git a/packages/next/shared/lib/loadable.js b/packages/next/shared/lib/loadable.js
@@ -61,15 +61,12 @@ function createLoadableComponent(loadFn, options) {
       timeout: null,
       webpack: null,
       modules: null,
-      // suspense: false,
     },
     options
   )
 
   opts.lazy = React.lazy(opts.loader)
 
-  console.log('opts', opts)
-
   /** @type LoadableSubscription */
   let subscription = null
   function init() {
@@ -118,8 +115,7 @@ function createLoadableComponent(loadFn, options) {
       })
     }
   }
-
-  function LoadableComponent(props, ref) {
+  function LoadableComponent(props) {
     useLoadableModule()
 
     const fallbackElement = React.createElement(opts.loading, {
@@ -133,14 +129,14 @@ function createLoadableComponent(loadFn, options) {
       {
         fallback: fallbackElement,
       },
-      React.createElement(opts.lazy, { ...props, ref })
+      React.createElement(opts.lazy, props)
     )
   }
 
   LoadableComponent.preload = () => init()
   LoadableComponent.displayName = 'LoadableComponent'
 
-  return React.forwardRef(LoadableComponent)
+  return LoadableComponent
 }
 
 class LoadableSubscription {

diff --git a/test/development/basic/next-dynamic/components/nested2.js b/test/development/basic/next-dynamic/components/nested2.js
@@ -1,8 +1,12 @@
+// import { lazy } from 'react'
 import dynamic from 'next/dynamic'
 
-const BrowserLoaded = dynamic(async () => () => <div>Browser hydrated</div>, {
-  ssr: false,
-})
+const BrowserLoaded = dynamic(
+  async () => ({ default: () => <div>Browser hydrated</div> }),
+  {
+    ssr: false,
+  }
+)
 
 export default () => (
   <div>