如何确保组件仅在客户端上呈现以避免下一个边缘运行时兼容性问题？

Question

我在使用带有 nextjs 14、应用程序路由器的库时遇到兼容性问题。我收到导致客户端出现此问题的错误：

https://react.dev/errors/419

服务器上的这个：

TypeError: Class extends value [object Object] is not a constructor or null

我对服务器错误的所有搜索结果似乎都表明某处存在循环依赖。我使用一些工具在代码中查找循环依赖并将其全部修复。但问题仍然存在。这让我相信我正在使用的第三方库要么有自己的循环依赖问题，要么正在使用边缘运行时不支持的东西。

有没有办法让组件根本不在服务器上预渲染？

Answer 1

回答我自己的问题，因为花了相当多的时间来找出这个解决方法，而且我找不到类似的答案。如果有更好的答案，我很想听听！

我最终这样做了：

import dynamic from 'next/dynamic';
export const runtime = 'edge';

// using dynamic with ssr false forced the component to never pre-render on server in edge runtime. All errors went away.
const ComponentWithSSRError = dynamic(() => import('@/app/component-with-ssr-error'), {
  ssr: false,
});

export default async function Page() {
   const session = auth();
   return (
      <ComponentWithSSRError />
   );
}