Next.js 13中'use client'使用场景及SSR适配问题咨询

• Next.js 13版本
• 使用JS而非TS
• 采用AWS Amplify
• IDE为VSCode
• Amplify已集成Figma和Github
  我是AWS与Next.js的新手。

src/App/
    layout.js
    page.js
    aboutUs/
        page.js
    (auth)/adverts/
        layout.js
        page.js
    (auth)/advert/[advertId]
        layout.js
        page.js

我计划使用SSR以实现动态且高效的方案，现咨询以下问题：

1. 何时及为何需要使用'use client'？是否需在所有文件、主布局或仅客户端处理逻辑的文件顶部添加？
2. 为何我的layout.js被强制要求添加'use client'？这代表什么？能否调整布局以避免添加？
3. 在layout.js中引入NavBarHeader2等ui-components后，出现ReactServerComponentsError：报错指向@floating-ui/react-dom库中使用了useEffect，但无父组件标记'use client'。为何该依赖库未添加'use client'？为何不默认启用该标识？如何在使用'use client'的同时兼顾SSR？

import './globals.css';
import { Amplify } from 'aws-amplify';
import { Inter } from 'next/font/google';
import awsExports from '../aws-exports';
import { NavBarHeader2, Footer } from '@/ui-components'
Amplify.configure({ ...awsExports, ssr: true });
const inter = Inter({ subsets: ['latin'] })

export const metadata = {
  title: 'My Website',
  description: 'The Marketplace'
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <main className="flex min-h-screen flex-col items-center justify-between p-24">
          <NavBarHeader2/>
          {children}
          <NavBarHeader2/>
        </main>
      </body>
    </html>
  )
}

./node_modules\@floating-ui\react-dom\dist\floating-ui.react-dom.esm.js
ReactServerComponentsError:

你导入的组件需要使用`useEffect`，它仅能在客户端组件中运行，但它的所有父组件都未标记"use client"，默认都是服务器组件。

,-[B:\WorkspaceLocal\AWS\company\git\my-website\node_modules\@floating-ui\react-dom\dist\floating-ui.react-dom.esm.js:1:1]
1 | import { computePosition, arrow as arrow$1 } from '@floating-ui/dom';
2 | export * from '@floating-ui/dom';
3 | import * as React from 'react';
4 | import { useLayoutEffect, useEffect } from 'react';
  :                           ^^^^^^^^^
5 | import * as ReactDOM from 'react-dom';
6 | 
7 | var index = typeof document !== 'undefined' ? useLayoutEffect : useEffect;
  `----

或许以下文件中的某一个应该标记为客户端入口并添加"use client"：
 ./node_modules\@floating-ui\react-dom\dist\floating-ui.react-dom.esm.js
 ./node_modules\@radix-ui\react-popper\dist\index.js
 ./node_modules\@radix-ui\react-menu\dist\index.js
 ./node_modules\@radix-ui\react-dropdown-menu\dist\index.js
 ./node_modules\@aws-amplify\ui-react\dist\esm\primitives\Menu\Menu.mjs
 ./node_modules\@aws-amplify\ui-react\dist\esm\index.mjs
 ./src\ui-components\ActionCard.jsx
 ./src\ui-components\index.js
 ./src\app\layout.js

1. 何时及为何使用'use client'？ #

• 使用时机：仅当组件需要依赖浏览器API（如window、document）、使用React客户端钩子（useState、useEffect、useContext等）、处理用户交互（点击、输入等），或者导入依赖客户端环境的第三方库时，才需要添加'use client'指令。
• 添加范围：不需要给所有文件添加，只需要在直接包含客户端逻辑的组件文件顶部标记即可。如果子组件需要客户端特性，你可以选择在子组件顶部标记，或者在父组件标记（此时整个子树都会成为客户端组件）。主布局若无需客户端逻辑，完全可以不标记。

2. 为何layout.js被强制要求加'use client'？怎么避免？ #

• 原因：你在layout.js中导入的NavBarHeader2组件（或其依赖的@floating-ui/react-dom等库）使用了useEffect这类客户端钩子。Next.js 13默认所有组件都是服务器组件，当服务器组件导入需要客户端环境的代码时，就会触发报错，要求标记'use client'。
• 避免方法：不需要把整个layout.js改成客户端组件，只需将NavBarHeader2封装到单独的客户端组件中。例如：
  1. 创建src/app/components/ClientNavBar.js文件，顶部添加'use client'：

     'use client';
     import { NavBarHeader2 } from '@/ui-components';
     
     export default function ClientNavBar() {
       return <NavBarHeader2 />;
     }
     

  2. 在layout.js中替换原有的NavBarHeader2导入和渲染：

     // 替换原导入语句
     import ClientNavBar from './components/ClientNavBar';
     
     // 渲染时使用<ClientNavBar />代替<NavBarHeader2 />
     

  这样layout.js仍为服务器组件，仅导航条部分是客户端组件，既满足需求又保留SSR优势。

3. 依赖库为何没加'use client'？怎么兼顾SSR？ #

• 库不标记的原因：多数UI库（如@floating-ui、Radix UI）需要同时支持服务器组件和客户端组件场景。如果库自身标记'use client'，就只能在客户端组件中使用，无法在服务器组件的子树中按需引入。把标记控制权交给开发者，能让库的使用更灵活。
• 兼顾SSR的方法：
  1. 按上述方法，将需要客户端逻辑的组件封装到单独的'use client'组件中，让主布局和其他页面保持服务器组件身份，继续享受SSR的渲染效率。
  2. 确保Amplify配置了ssr: true（你已在代码中设置），这样Amplify的API调用等操作可在服务器端完成，避免客户端渲染的性能问题。
  3. 对于需要动态数据的页面，使用App Router的async/await直接在服务器组件中获取数据，保证页面内容在服务器端渲染完成后再发送给客户端。

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