next.js - 如何在server component里面嵌入client component?

Question

最近在学习nextjs,是最新的14版本，而且用的最新的app router结构。
在最新的版本所有的js文件都默认是server component,如果设置成client component需要主动声明"use client".

在这这种情况下就涉及到一个问题，如何优雅的嵌入client component.

比如我在一个/home页面下面，其他的部分都是静态的，可以用server component,但是login按钮肯定是client component，目前我查到的就是，要给这个login按钮单独写一个js文件，在文件的最顶部声名 “use client".

我的问题是能不能都混合在写一起。不要为一个小小的按钮，单独写一个文件。

Answer 1

1. 不能。
2. 单独写一个 client 组件是好的模式
3. JS 灵活、动态是很大的优势，但很多时候也是劣势。开发者主动且明确的划分组件，表明组件的用途，也是最好的实践
4. 尤其在团队协作的可能下

Answer 2

在 Next.js 14 及更高版本中，你可以通过使用动态导入和 use client 指令来在同一个文件中混合 server 和 client 组件。然而，由于 server component 是在服务器端渲染的，而 client component 是在客户端渲染的，因此它们不能直接在同一个 JSX 表达式中混合使用。但是，你可以使用条件渲染或组件嵌套来在 server component 内部引用 client component。

下面是一个如何在 server component 中嵌入 client component 的例子：

// pages/home.js// 默认是 server componentimport LoginButton from './LoginButton'; // 假设这是你的 client componentexport default function Home() {  // 你可以通过条件渲染来决定何时渲染 client component  const isClient = typeof window !== 'undefined';  return (    <div>      {/* 静态内容，这部分会在服务器端渲染 */}      <h1>Welcome to Home Page</h1>      {/* 其他静态内容... */}      {/* 使用条件渲染来插入 client component */}      {isClient && <LoginButton />}      {/* 或者，你也可以使用动态导入来延迟加载 client component */}      {/* isClient && (        <Suspense fallback={<div>Loading...</div>}>          <dynamic(() => import('./LoginButton')) />        </Suspense>      ) */}    </div>  );}// components/LoginButton.js// 显式声明为 client component/* @jsxImportSource next/jsx */export default function LoginButton() {  'use client';  // 这里可以放置与客户端交互相关的代码  return <button onClick={handleLogin}>Login</button>;}function handleLogin() {  // 处理登录逻辑}

在上面的例子中，Home 组件是一个 server component，它会包含一些静态内容。对于 LoginButton 组件，因为它需要与客户端交互，所以它被声明为 client component。

在 Home 组件中，我们使用 isClient 条件来判断当前环境是否是客户端。只有在客户端环境下，我们才会渲染 LoginButton 组件。这是因为在服务器端，window 对象是不存在的，所以 isClient 会是 false，从而避免在服务器端渲染 client component。

另一种方法是使用动态导入（dynamic 函数），它可以让你延迟加载 client component，并且提供一个 fallback 组件在加载期间显示。

请注意，将 client component 嵌套在 server component 中时，应谨慎处理任何与客户端状态或交互相关的逻辑，以确保它们在客户端正确运行。同时，你应该避免在 server component 中直接引用任何仅在客户端可用的 API 或变量。