Next.js pages with dynamic content do not server side render

[Brianvdb]

Bug report

Describe the bug

Dynamic import does not render in HTML.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

0. Start a getting started project
1. Create a file: pages/[id].jsx
2. Paste following code:

import {useRouter} from 'next/router';
import dynamic from 'next/dynamic'
import '../styles/index.css';
import React from 'react';

export default function Page() {
    const router = useRouter();
    const id = router.query.id;

    const Comp = dynamic(() => import(`../src/components/footer`), {ssr: true});

    return (
        <>
            <Comp id={id}/>
        </>
    );
}

3. Page renders fine with the dynamic import. But its not in the HTML visible.

Expected behavior

HTML of the custom component should be visible

System information

• OS: macOS & WIndows
• Browser (if applies) [all]
• Version of Next.js: [9.0.2]

Additional context

It does work if i declare Comp above the function. But the component loaded will be based on the id of the query. For simplicity its now hardcoded for footer.

[timneutkens]

dynamic() should be used at the top level of a module as it registers itself for hydration. If you want to dynamically load multiple files you can add multiple imports and render based on an object.

[Brianvdb]

@timneutkens thanks I implemented that now, but this raises the following issue: #8186

[dani97]

To fix this warning, I have to make ssr: false for the component

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.