NextJs AppDir禁用SSR动态导入组件时出现DYNAMIC_SERVER_USAGE错误

在Next.js 13 App目录环境下，动态导入带有"use client"指令的NavbarTheme组件并配置ssr: false时，出现了DYNAMIC_SERVER_USAGE错误。若不设置ssr: false，则会触发 hydration 错误；移除该组件后应用可正常运行。

被导入组件（NavbarTheme）代码 #

"use client";

import { useTheme } from "next-themes";

import { HiMoon, HiSun } from "react-icons/hi";

const NavbarTheme = () => {
  const { theme, setTheme } = useTheme();

  return (
    <div className="flex items-center justify-center rounded-full text-[color:var(--primary-1)]">
      {theme === "dark" ? (
        <HiSun
          title="light"
          className="text-[32px]"
          onClick={() => setTheme("light")}
        />
      ) : (
        <HiMoon
          title="dark"
          className="text-[32px]"
          onClick={() => setTheme("dark")}
        />
      )}
    </div>
  );
};

export default NavbarTheme;

导入该组件的文件（NavbarAction）代码 #

"use client";

import dynamic from "next/dynamic";

import { useEffect, useState } from "react";

import { AiOutlineLoading3Quarters } from "react-icons/ai";

import { MainNavWrapper } from "./navbar-static";

import styles from "../styles.module.css";

const NavbarTheme = dynamic(() => import("./navbar-theme"), {
  ssr: false,
  loading: () => (
    <div className="flex justify-center items-center">
      <AiOutlineLoading3Quarters className="animate-spin text-[28px] text-[color:var(--primary-1)]" />
    </div>
  ),
});

const NavbarAction = () => {
  const scrollChangeProp = 20;
  const [scrollPosition, setScrollPosition] = useState(0);
  const handleScroll = () => {
    const position = window.scrollY;
    setScrollPosition(position);
  };

  useEffect(() => {
    if (window.scrollY > scrollChangeProp) setScrollPosition(window.scrollY);
  }, []);

  useEffect(() => {
    window.addEventListener("scroll", handleScroll, { passive: true });

    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

  return (
    <header
      className={`w-full fixed text-[color:var(--primary-1)] h-[80px] flex justify-center items-center py-[10px] max-md:h-[80px] max-md:flex-col z-[10000] max-md:justify-start ${scrollPosition > scrollChangeProp ? styles.changeNaVBg : styles.removeNaVBg}`}
    >
      <MainNavWrapper>
        <div className="flex items-center gap-2">
         {/* ... */}
          <div className="cursor-pointer">
            <NavbarTheme />
          </div>
        </div>
      </MainNavWrapper>
      {/* ... */}
    </header>
  );
};

export default NavbarAction;

内容的提问来源于stack exchange，提问作者Farasat Ali