Dynamically load Server Components

[bernhardw]

Summary

Hello,

I'm trying to load Server Components dynamically:

import dynamic from 'next/dynamic'

export async function Modules() {
  const modules = await getModules() // e.g. loaded from a database

  return (
    <ul>
      {modules.map((module) => {
        const CustomModule = dynamic(() => import(`../modules/${module.path}`))
        
        return (
          <li key={module.id}>
            <CustomModule />
          </li>
        )
      })}
    </ul>
  )
}

Although <CustomModule /> is rendered server-side, as soon as I'm using a Server Action inside <CustomModule />, following error is shown which indicates <CustomModule /> now being a Client Component instead:

"use server" functions are not allowed in client components. You can import them from a "use server" file instead.

// This is an example of a dynamically loaded custom module,
// and needs to be a Server Component.
export async function CustomModule() {
  async function add(formData: FormData) {
    'use server'
    const number = formData.get('number')
    console.log(number)
  }

  return (
    <div>
      <form action={add}>
        <input type="number" name="number" />
        <button type="submit">Add</button>
      </form>
    </div>
  )
}

I suspect dynamically importing with template strings (e.g. ../modules/${module.path}) is not supported and leads to problems. But I would rather not import all custom modules to a map statically, because there could be many hundreds of them.

Any ideas how to implement true dynamic loading with Server Components?

Additional information

No response

Example

CodeSandbox demo: https://codesandbox.io/p/sandbox/staging-mountain-k6w36f?file=%2Fapp%2Fmodules%2FCustomModuleA.tsx

[devjiwonchoi]

Separate your add function to a different file so that it stays server-side, and import it to the component you're trying to use.

Note that the 'use server' should be declared at the top of the file.

If you're using a Server Action inside a Client Component, create your action in a separate file with the "use server" directive at the top of the file.

Example:

// app/actions.ts

'use server'
 
export async function add(formData: FormData) {
    const number = formData.get('number')
    // Do something...
  }

import { add } from '@/actions'

export async function CustomModule() {
  return (
    <div>
      <form action={add}>
        <input type="number" name="number" />
        <button type="submit">Add</button>
      </form>
    </div>
  )
}

Reference

• Server Actions with Client Components

[bernhardw]

Please find a CodeSandbox here: https://codesandbox.io/p/sandbox/staging-mountain-k6w36f?file=%2Fapp%2Fmodules%2FCustomModuleA.tsx

[devjiwonchoi]

In order to do this, you need to work a way around it.

Steps

1. CustomModuleA stays Server Component, but not in the /modules.

Since dynamic only allows lazy loading of Client Components, you cannot dynamic load the CustomModuleA as Server Component.

It allows you to defer loading of Client Components and imported libraries

Even though you "can" load Server Components, it is not lazy loading the Server Component itself but the child Client Components.

If you dynamically import a Server Component, only the Client Components that are children of the Server Component will be lazy-loaded - not the Server Component itself.

Therefore, we are going to move the CustomModuleA outside of the modules as CustomForm, and let the alternate Client Component import the CustomModuleA and be lazy-loaded.

2. Create an alternate Client Component CustomModuleA and import the original CustomModuleA.

Since it is possible to embed a Server Component inside a Client Component as a children, we are going to make that happen.

Result

// @/modules/CustomModuleA
'use client'

export default function CustomModuleA({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div>
      {children}
    </div>
  )
}

// /components/CustomForm.tsx: Previous `CustomModuleA`

import fs from 'fs'
import CustomModuleA from '@/app/modules/CustomModuleA'

function mockDataRequest() {
  return fs.readFileSync('./data.txt', 'utf8')
}

export async function addText(formData: FormData) {
  'use server'
  const text = formData.get('text')
  console.log(text)
}

export default function CustomForm() {
  const data = mockDataRequest()
  return (
    <CustomModuleA>
      <form action={addText}>
        <input type='text' name='text' />
        <button type='submit'>Add</button>
      </form>
    </CustomModuleA>
  )
}

By doing this, the dynamic will be able to lazy load the Client Component CustomModuleA, and the CustomModuleA has its children as the CustomForm in which the previous CustomModuleA did.

Conclusion

Since next/dynamic can lazy load Client Components only, create an alternate module as Client Component and import the component you want to load as children.

Reference

• App Router Lazy Loading
• Nesting Server Components inside Client Components

[bernhardw]

First, thanks a lot for taking the time, appreciate it :)

But wouldn't I then be back to square one? Because that way I'd need to statically/manually import , instead of dynamically loading the modules (e.g. from a database) as in my top-most code snippet:

import dynamic from 'next/dynamic'

export async function Modules() {
  const modules = await getModules() // ← modules loaded from database

  return (
    <ul>
      {modules.map((module) => {
        const CustomModule = dynamic(() => import(`../modules/${module.path}`)) // ← module dynamically imported as Server Component
        
        return (
          <li key={module.id}>
            <CustomModule />
          </li>
        )
      })}
    </ul>
  )
}

Statically/manually importing Server Components works, even without an "intermediate" Client Component.
But I'd like to have them dynamically imported instead. Because there will be hundreds of custom modules.

• Static/manual import: import { CustomModule } from './modules/CustomModule'
• Dynamic import: const CustomModule = dynamic(() => import(../modules/${module.path}))

[devjiwonchoi]

The code is based on using dynamic import. Your code for the page.tsx remains the same.
Wrapped around with Client Component because the dynamic import only works on Client Components.

// page.tsx
import dynamic from 'next/dynamic'

const modules = ['CustomModuleA', 'CustomModuleB']

export default function Home() {
  return (
    <main>
      {modules.map((module, index) => {
        const CustomModule = dynamic(() => import(`./modules/${module}`))

        return (
          <li key={index}>
            <CustomModule />
          </li>
        )
      })}
    </main>
  )
}

BUT I've noticed that this trick isn't working properly. I'm testing it out right now.

[bernhardw]

What's interesting is that the docs for the Page Router say:

Note: In import('path/to/component'), the path must be explicitly written. It can't be a template string nor a variable. Furthermore the import() has to be inside the dynamic() call for Next.js to be able to match webpack bundles / module ids to the specific dynamic() call and preload them before rendering.

Source: https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#examples

However, the docs for the App Router have nothing similar. I assume that note was deliberately removed because Server Components could(?) have runtime access to the variable / template string. That wasn't the case with regular (Client) Components: #11291 (comment)

[sahariar-safin]

You are correct that dynamically importing with template strings is not supported. This is because Next.js needs to be able to match webpack bundles / module ids to the specific dynamic() call and preload them before rendering.

To implement true dynamic loading with Server Components, you will need to import the modules statically and then use dynamic() to lazy load them. Here is an example:

import dynamic from 'next/dynamic'

const modules = [
  { path: 'custom-module-1' },
  { path: 'custom-module-2' },
  { path: 'custom-module-3' },
]

export async function Modules() {
  const customModules = modules.map((module) => {
    const CustomModule = dynamic(() => import(`../modules/${module.path}`), { ssr: false })

    return (
      <li key={module.id}>
        <CustomModule />
      </li>
    )
  })

  return (
    <ul>
      {customModules}
    </ul>
  )
}

This will render the modules statically on the server, but will lazy load them on the client. This will improve performance by reducing the initial page load size.

Here is an explanation of what is happening in this code:

• The modules array is imported statically. This means that the modules will be loaded when the page is loaded.
• The CustomModule components are lazy loaded. This means that they will only be loaded when they are first rendered.
• The ssr option is set to false for the CustomModule components. This means that they will not be rendered on the server.

This is a simple example of how to implement true dynamic loading with Server Components. You can use this technique to load any number of modules dynamically.

[bernhardw]

Thank you for the example and the explanation.

That way though, the <CustomModule /> will be a Client Component, right? What I'm trying to do is true dynamic loading of Server Components.

Second, I was hoping to find a way to not have a static import map of all available custom modules but instead load them e.g. from a database, because there could be hundreds/thousands of them. That's what I meant with true dynamic loading 🙂

If I need a static import map of Server Components anyway, I think I could do without dynamic() (or React.lazy()), because Server Components are automatically code split.

[sahariar-safin]

You are correct, the <CustomModule /> will be a Client Component if you use the code above. To dynamically load a Server Component, you can use the dynamic() function from the react-loadable package. This function allows you to import a component dynamically, without knowing the path to the component file ahead of time.

To use dynamic(), you first need to install the react-loadable package. Once you have installed the package, you can use it like this:

import React, { useState } from "react";
import { dynamic } from "react-loadable";

const CustomModule = dynamic(() => import("./CustomModule"));

function App() {
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    const loadCustomModule = async () => {
      try {
        const customModule = await CustomModule.then(module => module.default);
        setIsLoaded(true);
      } catch (error) {
        console.error(error);
      }
    };

    loadCustomModule();
  }, []);

  if (isLoaded) {
    return <CustomModule />;
  } else {
    return <div>Loading...</div>;
  }
}

export default App;

This code will dynamically load the CustomModule component when the page loads. If the component cannot be loaded, an error will be logged to the console.

To load the CustomModule component from a database, you can use the getCustomModule function from the react-loadable package. This function takes a database query as its argument and returns a promise that resolves to the component object.

To use getCustomModule, you first need to install the react-query package. Once you have installed the package, you can use it like this:

import React, { useState } from "react";
import { dynamic, getCustomModule } from "react-loadable";

const CustomModule = dynamic(() => getCustomModule("SELECT * FROM custom_modules"));

function App() {
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    const loadCustomModule = async () => {
      try {
        const customModule = await CustomModule.then(module => module.default);
        setIsLoaded(true);
      } catch (error) {
        console.error(error);
      }
    };

    loadCustomModule();
  }, []);

  if (isLoaded) {
    return <CustomModule />;
  } else {
    return <div>Loading...</div>;
  }
}

export default App;

This code will dynamically load the CustomModule component from the database when the page loads. If the component cannot be loaded, an error will be logged to the console.

[bernhardw]

Ehm... thanks, but I think you have mixed up some things.

App needs to be a Client Component (because of useEffect and useState) and Server Components cannot be imported into Client Components. And that means database queries wouldn't work as well.

See: https://nextjs.org/docs/getting-started/react-essentials#unsupported-pattern-importing-server-components-into-client-components

Additionally, react-loadable has no exported getCustomModule function and react-query is mentioned but not used anywhere... and why should it?

[benjick]

@bernhardw looks like comments generated via chatgpt

[icyJoseph]

Hi,

Have we asked ourselves, if this makes any sense at all? Server Components by definition, are "bundle-less", meaning that they are rendered server side, and no JS bundle is ever made for them. So, you could just do:

import { Suspense, lazy } from "react";

const getModules = async () => {
  return [
    { id: "1337", path: "foo" },
    { id: "1234", path: "bar" },
   // { id: "3000", path: "baz" }, // this one would make it crash because it doesn't exist on my project
  ];
};

// to prevent it from generating this at build time once
export const dynamic = "force-dynamic";

export default async function Home() {
  const modules = await getModules(); // e.g. loaded from a database

  const ModuleJSX = Promise.all(
    modules.map((mod) => {
      const CustomModule = lazy(() => import(`./modules/${mod.path}`));

      return (
        <li key={mod.id}>
          <Suspense fallback={"Loading..."}>
            <CustomModule />
          </Suspense>
        </li>
      );
    })
  );
  return <ul>{ModuleJSX}</ul>;
}

Right? You probably also need an Error Boundary around the custom module IIRC, in case it doesn't exist.

[bernhardw]

You are right, Server Components are automatically code split.

And I just tried to use lazy() instead of dynamic() to load my custom modules as Server Components in my forked CodeSandbox example here: https://codesandbox.io/p/sandbox/suspicious-hill-529g88?file=%2Fapp%2Fmodules%2FCustomModuleA.tsx%3A1%2C1

But the problem mentioned at the beginning remains. The following error appears:

Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".

Somehow, when using lazy() or dynamic() in combination with Server Actions, the lazy-loaded Server Components get turned into Client Components. At least that's what the error message suggests.

Here is the CodeSandbox: https://codesandbox.io/p/sandbox/suspicious-hill-529g88

Any ideas?

[icyJoseph]

Yeah but that's what I'm trying to get at. When we lazy or dynamic load, a bundle is made and that module is no longer a server component.

In Server Components architecture, the module is the boundary, and the import() function, makes a bundle out of that module. I guess, implicitly that makes it into a Client Component.

AFAIK server actions can't be defined in client components, they can be passed as - props though.

So you could load the server action that applies to a given component in another module, ./actions/${mod.path} and pass that as props to the module you get.

Though, again, for example, using Node APIs or async functions won't work either, right? As soon as a piece of state is set somewhere the async client component re-renders indefinitely.

The wonders of playing with relatively new and alpha technology.

[icyJoseph]

I wonder though, how much more freedom we have on a server component environment, you could load them all and do a look up table, since these are all server components in principle their size won't impact the client, etc.

Or maybe import.meta.resolve(something)?

I'll take another look on Monday. Have a nice weekend!

[bernhardw]

When we lazy or dynamic load, a bundle is made and that module is no longer a server component.

I think when we dynamically import a Server Component, it should stay a Server Component. See https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading#importing-server-components.
But the error message shown when trying to use Server Actions make it seem like they are turned into Client Components.

But you are right, why bother with dynamic imports and lazy-loading at all when the server environment has (or should have?) all means necessary to import without affecting client size or performance.

After all, my goal is to dynamically load some modules as Server Components from thousands of available modules, without affecting (client) bundle size and performance.

[wesnolte]

I just did a test of this by manually importing a few of the modules I'd previously been dynamically importing, and then conditionally rendering the correct one based on data from the dynamic route. The result is that built code includes bundles from all manually imported modules, together with their dependencies e.g. some of them are using ChartJS. My First Load JS is huge!

I can't see any way around this other than converting my dynamic route into a manual one and building each path as its own set of folders and files. That's no way to live :(

[wesnolte]

Hi there, what did you do in the end? I've recently hit a similar situation:

1. I have dozens (a growing number) of components that should be dynamically/conditionally used within a dynamic route depending on params of that route
2. I've used "next/dynamic" but saw the performance knock and realised the components were becoming client components

I understand the argument of not needing to be careful about what's pulled into a server component because it'll spit out a smaller JS bundle in the end. However, there's a case to be made for programmatically "selecting" the correct server component(s) for a particular dynamic route! Are we expected to build and manage logic (lookup tables etc.) to do this?

[georgecartridge]

I've been running into this issue a lot recently. Have you found any workarounds in the meantime?

[wesbos]

Also hitting this as well - as soon as I dynamic import I get webpack errors out the wazoo.

[adriangalilea]

Either Next.js or I am missing something.

If you try next/dynamic, unstable_noStore or even headers/cookies things don't really re-render so it's worthless.

If you somehow implicitly or explicitly make it a client component, importing server actions on them will give you issues as you are importing things that are not meant to be run on the client.

On top of that you always have the doubt if the behaviour you are seeing is just the inconsistencies between dev env and prod.

The only viable solutions I can think of:

• Resort to api routes, but are we caveman now?.
• Pass the actions as props

But it doesn't work for me:

Props must be serializable for components in the "use client" entry file, 

EDIT: #54156

EDIT: I fixed it by passing it to the client component the server action.

I created this type

export type ServerAction<T extends (...args: never[]) => Promise<unknown>> = T &
  Function;

So I can do

export type Foo = ServerAction<typeof foo>;

Where foo is the server action I want to pass as prop to my client component, example:

export default function Bar({
  foo,
}: {
  foo: Foo;
}) {
...

It works!

[leerob]

By default, Server Components are automatically code split, and you can use streaming to progressively send pieces of UI from the server to the client. Lazy loading applies to Client Components.

Sorry I haven't commented back on this issue – just to confirm, are y'all trying to lazy load client components or server components?

https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading

[wesbos]

@leerob Server components. I have several hundred MDX files that need to be loaded like this:

const { default: MDXContent } = await import(`../../${someDynamicData}.mdx`);

Since this is not a static import, i'm not sure its even possible with Next.js? I get very odd webpack errors once I try this:

<w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (347kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)

[wesbos]

I got it - the key was understand how webpack does dynamic imports. Since I was doing ../../ as the path, it was making a module for every single file at that level, which included my node_modules!

So the fix was to give it some more info on which folder I was dynamically importing from:

const { default: MDXContent } = await import(`../../posts/${filePath.replace('posts/', '')}`);

[leerob]

Nice, also a good time to plug next-mdx-remote: https://github.com/hashicorp/next-mdx-remote