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.

juliomalves · Accepted Answer · 2021-05-01 10:34:55Z

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>

answered May 1, 2021 at 10:34

juliomalves

51.1k23 gold badges180 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

daydreamer Over a year ago

Does it have to do with JS in the browser or is it just a HTML-like behaviour? in other words, is it an actual SSR issue or something else? I'd be really glad if you could expand on that

juliomalves Over a year ago

What's your question regarding to exactly? Whether it renders on mount or not was a design decision, not a constraint.

Collectives™ on Stack Overflow

Nextjs Bootstrap Dropdown issue with server side rendering

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related