考虑NextJS中新的app/目录中的以下服务器组件：
export default async function RootLayout({ children }) {
const categories = await getCategories();
// const [navigation, setNavigation] = React.useState('hidden');
function handleHover() {
// hide or show the navigation bar without losing server side rendering
}
return (
<html lang="en">
<body className={poppins.className}>
<header className={"fixed left-0 top-0 w-full"}>
<div
className={
"flex w-full flex-col items-center justify-center space-y-4 p-6 shadow"
}
>
<div
className={
"flex flex-row items-center justify-center space-x-5 font-extralight"
}
>
{categories.map((data) => (
<Link onMouseEnter={handleHover} href={"/new"} className={"link uppercase"}>
{data}
</Link>
))}
</div>
</div>
<div
className={`${navigation} nav-bar z-10 min-h-[250px] w-full justify-center p-6 shadow`}
></div>
</header>
<div className={"mx-auto 2xl:container"}>{children}</div>
</body>
</html>
);
}我需要显示导航栏div当鼠标悬停在一个类别。这将工作时，使用“使用客户端”，但我不想失去服务器端渲染。
我该怎么做？
1条答案
按热度按时间iibxawm41#
你做不到。您需要用户交互性，而在服务器组件中，您不能具有用户交互性，因为您是在服务器上而不是在浏览器环境中。
当您将鼠标悬停在元素上时，
mouseover事件会被浏览器触发，动作会被javascript引擎执行。服务器组件对于计算量大的任务很有帮助，因为您可以扩展服务器以更快地发送响应。或者是对SEO有帮助。因此，如果你在客户端渲染导航栏，你不会损失太多。