I have an api endpoint /api/menu.js

I want to get menu from api and when i hover over an item, i want to get submenu now my question is that I am confused between using server or client component and also if the menu and submenu should be loaded together or just the menu and when on hover the submenu. I am using next js 13.5.3 and i am still learning so i am very confused about this

I tried to create a Navbar.js file and use client but i am confused whether its a good or bad practice

"use client";

import React, { useEffect, useState } from "react"; import Link from "next/link";

export default function Navbar() { const [menuData, setMenuData] = useState([]);

useEffect(() => {

async function fetchData() {
try {
const response = await fetch(
api
);

const data = await response.json();
setMenuData(data);
} catch (error) {
console.error("Error fetching data:", error);
}
}

fetchData();
}, []);

return (
#Unknown Channel
<nav>
<ul>
{menuData
.filter((item) => item.index === "menu")
.map((menuItem) => (
<Link
key={menuItem.sn}
href={menuItem.content}
className="px-2 py-1 transition-all hover:bg-slate-50 hover:text-stone-900 relative cursor-pointer"
>
{menuItem.heading}
</Link>
))}
</ul>
</nav>
</>
);
}