Challenges

Using Dynamic Imports

SSR Support

By default, Next.js load these dynamic imports when it does server-side rendering or static (re)generation. So, when loading such a page directly, Next.js doesn't need to render the loading component.

Here's how to test that:

You won't see the loading component or a delay in rendering the highlighted code.


But sometimes, this not what you want. Especially, if the dynamically imported component cannot run inside the server. Then, you can turn it off with the ssr: false option. See:

const CodeWithSyntax = dynamic(
        () => import('./CodeWithSyntax'),
        {
            loading: () => (
                <CodeFallback>{code}</CodeFallback>
            ),
            ssr: false
        }
    )

Now, Next.js won't import the CodeWithSyntax component inside the server.

šŸ™ We need your help

We need your help to keep maintain & add new content to this course. Here's how you can support us: