# 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.

## <mark style="color:red;">Retrieving Menu Data on the Server Side​</mark> <a href="#retrieving-menu-data-on-the-server-side" id="retrieving-menu-data-on-the-server-side"></a>

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);
```

## <mark style="color:red;">Retrieving Menu Data on the Client Side</mark>​ <a href="#retrieving-menu-data-on-the-client-side" id="retrieving-menu-data-on-the-client-side"></a>

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 || []);
```

{% hint style="info" %}
**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.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.akinon.com/tutorials/project-zero/how-to-optimize-menu-performance.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.