How to Optimize Menu Performance?

The Menu Performance documentation provides a comprehensive guide to efficiently fetching and managing menu data in web applications. This document explains the usage of two primary methods—getMenu and useGetMenuQuery—for server-side and client-side data retrieval, respectively.

Menus are a critical component of any application, serving as a navigation tool for users and an essential element for search engine optimization (SEO). Proper implementation of menu fetching mechanisms ensures faster load times, better user experiences, and improved visibility in search engine results.

By understanding the use cases, parameters, and best practices for these methods, developers can:

• Optimize server resources with structured data fetching.

• Dynamically load menu data based on user interactions.

• Strike a balance between performance and functionality through techniques like Lazy Loading and depth control.

Retrieving Menu Data on the Server Side​

The getMenu function is used to fetch menu data on the server side. It should be preferred in the following scenarios:

• To optimize SEO by rendering menu data server-side.

• To help search engines better understand the structure of the page.

• To use server resources efficiently.

Depth Parameter:

While fetching menu data, the depth parameter must be specified. This parameter defines how many levels of the menu will be fetched. A maximum value of 2 is recommended to avoid negatively impacting server performance.

Example Usage:

import { getMenu } from '@akinon/next/data/server';

// Fetch menu data up to 2 levels deep

const response = await getMenu({ depth: 2});
const menu = menuGenerator(response);

Retrieving Menu Data on the Client Side​

The useGetMenuQuery function is used to dynamically fetch menu data on the client side.

• Suitable for fetching menu data based on user interactions.

• The depth settings (depth) can be flexibly configured according to the required menu level.

Example Usage:

'use client';
import { useGetMenuQuery } from '@akinon/next/data/client/misc';

// Fetch menu data up to 4 levels deep

const { data: menuData } = useGetMenuQuery(4);
const menu = menuGenerator(menuData || []);

Lazy Loading and Mouse Hover: Submenu data is not loaded unless needed. Using Lazy Loading or Mouse Hover, submenus can be fetched only when required, improving client-side performance and avoiding unnecessary data transfers.