在Next.js中使用Sonner实现服务端组件页面加载时的消息提示

2025-05-23 09:00:26作者：咎岭娴Homer

背景介绍

在Next.js应用中，开发者经常需要在页面加载时向已登录用户显示欢迎消息。随着React Server Components(RSC)的引入，这种需求在实现上遇到了一些新的挑战。本文将探讨如何在Next.js应用中优雅地实现这一功能，特别是结合Sonner这样的toast通知库。

传统实现方式的问题

在传统的客户端渲染中，我们可以直接使用React的useEffect钩子来检测用户登录状态并显示消息。但在RSC环境下，这种方式会遇到几个问题：

服务端组件无法直接使用React钩子
页面导航时useEffect会重复触发
需要避免在服务端渲染时执行客户端逻辑

解决方案探索

1. 客户端组件封装

最直接的解决方案是将相关逻辑封装到一个客户端组件中：

"use client";
import { Session } from "next-auth";
import { useEffect, useRef } from "react";
import { toast } from "sonner";

type HelloBannerProps = {
  session: Session | null;
};

export function HelloBanner({ session }: HelloBannerProps) {
  const isHandled = useRef(false);

  useEffect(() => {
    const userName = session?.user?.name;
    if (userName && !isHandled.current) {
      isHandled.current = true;
      requestAnimationFrame(() => toast(`Welcome back to the ${userName}!`));
    }
  }, [session]);

  return null;
}

这种方式的缺点是必须渲染一个空组件，且页面导航时消息会重复显示。

2. 动态导入客户端组件

Next.js提供了动态导入功能，可以更优雅地处理这种情况：

const ClientComponent = dynamic(() => import("./ClientComponent"), {
  ssr: false // 禁用服务端渲染
});

export default function ServerComponent() {
  return <ClientComponent />;
}

这种方式虽然解决了服务端渲染的问题，但仍然需要渲染一个组件，且无法直接使用钩子。

更优的解决方案

针对这种场景，可以考虑以下改进方案：

使用Cookie或LocalStorage标记：在显示欢迎消息后设置标记，避免重复显示
服务端直接返回消息：在服务端组件中判断登录状态，将消息作为prop传递给客户端
专用Toast服务端组件：如示例中的toast-ease库提供的ServerToastRegister

实现示例

结合Sonner和Next.js的最佳实践可能是：

// layout.tsx
import { ToastBox } from "sonner";
import { ServerToastRegister } from "sonner/server";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <ServerToastRegister />
        <ToastBox duration={3} toastsVisible={5} />
        <main>{children}</main>
      </body>
    </html>
  );
}

// page.tsx
import { toast } from "sonner/server";

export default async function Homepage() {
  const session = await getSession();
  if (session?.user?.name) {
    toast({ title: `Welcome back ${session.user.name}!` });
  }
  return null;
}

总结

在Next.js的RSC环境中实现页面加载时的消息提示需要考虑服务端和客户端的边界。通过合理使用动态导入、专用服务端toast组件以及状态标记，可以构建出既高效又用户友好的解决方案。关键是要理解RSC的工作原理，并选择适合项目需求的实现方式。

sonner

An opinionated toast component for React.

项目地址：https://gitcode.com/gh_mirrors/so/sonner

登录后查看全文

在Next.js中使用Sonner实现服务端组件页面加载时的消息提示

背景介绍

传统实现方式的问题

解决方案探索

1. 客户端组件封装

2. 动态导入客户端组件

更优的解决方案

实现示例

总结

热门内容推荐

最新内容推荐

项目优选

在Next.js中使用Sonner实现服务端组件页面加载时的消息提示

背景介绍

传统实现方式的问题

解决方案探索

1. 客户端组件封装

2. 动态导入客户端组件

更优的解决方案

实现示例

总结

相关内容推荐

热门内容推荐

最新内容推荐

项目优选