Next.js 13中如何阻止组件子元素加载及执行逻辑？

我有一个Next.js客户端组件<Navbar>，当路径为/auth时返回null，但它的子元素（包含服务端和客户端组件）仍然会被创建并执行逻辑，导致未登录时UserIcon组件调用useSession钩子解码不存在的token而报错。之前尝试把根布局改成客户端组件引发了hydration问题和包体积增加，服务端通过next/headers获取cookie又会强制动态渲染，不符合SSG/ISR需求。

方案1：将Navbar子组件改为条件渲染的懒加载组件 #

把Navbar的子组件通过React.lazy懒加载，仅在Navbar需要渲染时才引入。这样在/auth路径下，子组件不会被加载和执行。

修改RootLayout的使用方式：

// app/layout.tsx
import dynamic from 'next/dynamic';

// 懒加载Navbar内容组件，ssr: false确保仅客户端加载
const NavbarContent = dynamic(() => import('./components/NavbarContent'), { ssr: false });

// 在RootLayout中
<main className={`${inter.className} dark:bg-dark-gray dark:text-white`}>
  <Toaster toastOptions={{ className: "dark:bg-dark-gray dark:text-white shadow-md" }} />
  <Navbar>
    <NavbarContent />
  </Navbar>
  <Provider>{children}</Provider>
</main>

创建NavbarContent.tsx统一管理子组件：

// components/NavbarContent.tsx
import Logo from './Logo';
import SearchBar from './SearchBar';
import NavLinks from './NavLinks';

const NavbarContent = () => {
  return (
    <>
      <Logo />
      <SearchBar />
      <NavLinks />
    </>
  );
};

export default NavbarContent;

方案2：重构Navbar，内部控制内容渲染 #

修改Navbar组件，不再接收children，而是直接在内部定义需要渲染的内容，完全控制子组件的创建时机。

重构后的Navbar：

"use client";
import { usePathname } from "next/navigation";
import { useEffect, type FC } from "react";
import Logo from './Logo';
import SearchBar from './SearchBar';
import NavLinks from './NavLinks';

const Navbar: FC = () => {
  const pathname = usePathname();

  useEffect(() => {
    const onPageLoad = async () => {
      const { toast } = await import("react-hot-toast");
      toast.remove();
    };
    onPageLoad();
  }, [pathname]);

  if (pathname === "/auth") return null;

  return (
    <nav className="flex h-16 items-center justify-between bg-light-gray p-2 dark:bg-black dark:text-white">
      <Logo />
      <SearchBar />
      <NavLinks />
    </nav>
  );
};

export default Navbar;

RootLayout中直接使用：

<Navbar />

方案3：给useSession钩子添加容错处理（兜底方案） #

即使前面的方案生效，给钩子添加容错也能避免潜在报错，增强代码健壮性。

修改useSession.ts：

import jwtDecode from "jwt-decode";
import type { FirebaseUser, SessionHook } from "@types";
import { getCookie } from "@utils/cookies";

const useSession: SessionHook = () => {
  const authToken = getCookie("auth_token");
  if (!authToken) {
    // 返回默认空用户对象，或根据需求处理未登录状态
    return { name: '', picture: '' } as FirebaseUser;
  }
  try {
    return jwtDecode<FirebaseUser>(authToken);
  } catch (error) {
    console.error('Token解码失败:', error);
    return { name: '', picture: '' } as FirebaseUser;
  }
};

export default useSession;

同步修改UserIcon.tsx处理未登录情况：

"use client";
import lazy from "next/dynamic";
import type { FC } from "react";
import useSession from "@hooks/useSession";

const Image = lazy(() => import("next/image"));
const Link = lazy(() => import("next/link"));

const UserIcon: FC = () => {
  const user = useSession();

  if (!user.name) {
    // 未登录时显示登录入口或默认图标
    return <Link href="/auth" className="flex items-center">登录</Link>;
  }

  return (
    <Link href={`/people/${user.name}`}>
      <Image src={user.picture} alt={user.name} height={40} width={40} className="rounded-full" priority />
    </Link>
  );
};

export default UserIcon;

内容的提问来源于stack exchange，提问作者Dev-Siri