Load Mega Menu Items Server-Side

[RobertIviteb]

What problem is this solving?

It loads the items of the mega menu both client side and server side when the page is initialized; this includes all departments, categories, subcategories. In other words, when the page loads, the mega menu items are already in the DOM. This is needed for SEO purposes.

A client requested this feature for SEO optimization.

How should this be manually tested?

The mega menu needs to be already set up,

1. When the page loads, inspect the page and search for vtex-mega-menu-2-x-styledLinkText and you will see multiple matches. These are the menu items already loaded in the DOM.
2. Inspect the Page Source and do the same to verify that the same menu items are in the page source as well.

Screenshots or example usage:

1. Client side:

This mega menu has 1 department, 1 category and 1 subcategory. In the image you can see 1 of 3 so it loaded all the items.

2. Server side:

Same for the page source, 1 of 3.

This is the menu with 3 total items:

[vtex-io-ci-cd]

Hi! I'm VTEX IO CI/CD Bot and I'll be helping you to publish your app! 🤖

Please select which version do you want to release:

• Patch (backwards-compatible bug fixes)

• Minor (backwards-compatible functionality)

• Major (incompatible API changes)

And then you just need to merge your PR when you are ready! There is no need to create a release commit/tag.

• No thanks, I would rather do it manually 😞