Nextjs Bootstrap Dropdown issue with server side rendering

Question

I'm trying to build a navigation which has dropdown with few links. It works fine on the browser. But the HTML for the dropdown is not rendered in the page source.

Navigation Component

function Navigation() {
    return (
        <Navbar bg="light" expand="lg">
            <Link href="/" passHref>
                <Navbar.Brand>React-Bootstrap</Navbar.Brand>
            </Link>

            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">
                <Nav className="mr-auto">
                    <Link href="/" passHref>
                        <Nav.Link>Home</Nav.Link>
                    </Link>

                    {/* Missing html on page source */}
                    <NavDropdown title="Dropdown" id="basic-nav-dropdown">
                        <NavDropdown.Item href="#action/3.1">
                            Action
                        </NavDropdown.Item>
                        <NavDropdown.Item href="#action/3.2">
                            Another action
                        </NavDropdown.Item>
                        <NavDropdown.Divider />
                        <NavDropdown.Item href="#action/3.4">
                            Separated link
                        </NavDropdown.Item>
                    </NavDropdown>
                </Nav>
            </Navbar.Collapse>
        </Navbar>
    );
}

I'm rendering those navigation from the _app.js

import React from "react";
import Nav from "../components/nav";

import "bootstrap/dist/css/bootstrap.min.css";

function MyApp({ Component, pageProps }) {
    return (
        <>
            <Nav />
            <Component {...pageProps} />
        </>
    );
}

export default MyApp;

On the page source I get following output:

<div id="__next">
   <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a href="/" class="navbar-brand">React-Bootstrap</a><button aria-controls="basic-navbar-nav" type="button" aria-label="Toggle navigation" class="navbar-toggler collapsed"><span class="navbar-toggler-icon"></span></button>
      <div class="navbar-collapse collapse" id="basic-navbar-nav">
         <div class="mr-auto navbar-nav">
            <a href="/" data-rb-event-key="/" class="nav-link">Home</a>
            <div class="nav-item dropdown"><a aria-haspopup="true" aria-expanded="false" id="basic-nav-dropdown" href="#" class="dropdown-toggle nav-link" role="button">Dropdown</a></div>
         </div>
      </div>
   </nav>
</div>

But I can't see the HTML source of those dropdown related HTML.

Answer 1

By default, the NavDropdown component will not render its children when mounting, only when it's clicked on. To force the nav items rendering on mount you can set the renderMenuOnMount prop to true.

<NavDropdown title="Dropdown" id="basic-nav-dropdown" renderMenuOnMount={true}>
    // ...
</NavDropdown>