如何排序Next.js组件实现Clerk、Ably与Next.js协同工作？

问题描述 #

我正在搭建集成Clerk（身份认证）和Ably（WebSocket实时通信）的Next.js应用，但无法实现三者协同工作。当前组件树为<ClerkProvider>包裹<AblyProvider>，但Ably会在Clerk完成用户登录前请求令牌，导致请求超时。我尝试在用户登录后初始化Ably client，却发现useUser()无法在ClerkProvider外使用；若将client下移会导致组件重载，重复创建Ably连接产生高额费用，附上尝试的代码，寻求可行方案。

当前组件树 #

<ClerkProvider>
  <AblyProvider client={client}>
    <Layout>
      <Component {...pageProps} />
    </Layout>
  </AblyProvider>
</ClerkProvider>

尝试的代码 #

import '@/styles/globals.scss';
import type { AppProps } from 'next/app';
import * as Ably from 'ably';
import { AblyProvider } from 'ably/react';
import { useEffect } from 'react';
import { ClerkProvider, useUser } from '@clerk/nextjs';
import Layout from '@/components/layout/Layout';

let client;

export default function App({ Component, pageProps }: AppProps) {
  const user = useUser();
  const isSignedIn = user.isSignedIn;
  useEffect(() => {
    if (!isSignedIn) return;
    client = new Ably.Realtime.Promise({
      authUrl: 'http://localhost:3000/api/createTokenRequest',
    });
    const handleBeforeUnload = () => {
      client.connection.close();
    };
    window.addEventListener('beforeunload', handleBeforeUnload);
    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
    };
  }, [isSignedIn]);
  return (
    <ClerkProvider
      appearance={{
        baseTheme: 'dark',
        layout: {
          socialButtonsPlacement: 'bottom',
        },
        variables: { colorPrimary: '#000000' },
        elements: {
          'cl-formButtonPrimary':
            'bg-black border border-black border-solid hover:bg-white hover:text-black',
          socialButtonsBlockButton:
            'bg-white border-gray-200 hover:bg-transparent hover:border-black text-gray-600 hover:text-black',
          socialButtonsBlockButtonText: 'font-semibold',
          formButtonReset:
            'bg-white border border-solid border-gray-200 hover:bg-transparent hover:border-black text-gray-500 hover:text-black',
          membersPageInviteButton:
            'bg-black border border-black border-solid hover:bg-white hover:text-black',
          card: 'bg-[#fafafa]',
        },
      }}
      {...pageProps}
    >
      <AblyProvider client={client}>
        <Layout>
          <Component {...pageProps} />
        </Layout>
      </AblyProvider>
    </ClerkProvider>
  );
}

可行解决方案 #

方案1：封装带条件渲染的AblyProvider组件 #

创建中间组件，仅在用户登录后渲染AblyProvider，同时通过全局缓存避免重复创建连接：

// components/AblyAuthProvider.jsx
import { useState, useEffect } from 'react';
import { AblyProvider } from 'ably/react';
import * as Ably from 'ably';
import { useUser } from '@clerk/nextjs';

// 全局缓存Ably实例，避免重复创建
let cachedAblyClient = null;

export default function AblyAuthProvider({ children }) {
  const user = useUser();
  const [ablyClient, setAblyClient] = useState(cachedAblyClient);

  useEffect(() => {
    // 用户登出时清理连接
    if (!user.isSignedIn) {
      if (cachedAblyClient) {
        cachedAblyClient.connection.close();
        cachedAblyClient = null;
        setAblyClient(null);
      }
      return;
    }

    // 已登录且无缓存实例时创建连接
    if (!cachedAblyClient) {
      cachedAblyClient = new Ably.Realtime.Promise({
        authUrl: '/api/createTokenRequest',
        clientId: user.id,
        // 配置自动重连，减少连接重建次数
        reconnect: true,
        fallbackHosts: ['a.ably-realtime.com', 'b.ably-realtime.com']
      });
      setAblyClient(cachedAblyClient);

      // 页面卸载时关闭连接
      return () => {
        if (cachedAblyClient) {
          cachedAblyClient.connection.close();
          cachedAblyClient = null;
        }
      };
    }
  }, [user.isSignedIn, user.id]);

  // 仅当有有效client时渲染AblyProvider，否则直接返回子组件
  return ablyClient ? (
    <AblyProvider client={ablyClient}>{children}</AblyProvider>
  ) : (
    children
  );
}

修改App组件结构：

// pages/_app.jsx
import '@/styles/globals.scss';
import type { AppProps } from 'next/app';
import { ClerkProvider } from '@clerk/nextjs';
import Layout from '@/components/layout/Layout';
import AblyAuthProvider from '@/components/AblyAuthProvider';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <ClerkProvider
      appearance={{
        baseTheme: 'dark',
        layout: {
          socialButtonsPlacement: 'bottom',
        },
        variables: { colorPrimary: '#000000' },
        elements: {
          'cl-formButtonPrimary':
            'bg-black border border-black border-solid hover:bg-white hover:text-black',
          socialButtonsBlockButton:
            'bg-white border-gray-200 hover:bg-transparent hover:border-black text-gray-600 hover:text-black',
          socialButtonsBlockButtonText: 'font-semibold',
          formButtonReset:
            'bg-white border border-solid border-gray-200 hover:bg-transparent hover:border-black text-gray-500 hover:text-black',
          membersPageInviteButton:
            'bg-black border border-black border-solid hover:bg-white hover:text-black',
          card: 'bg-[#fafafa]',
        },
      }}
      {...pageProps}
    >
      <AblyAuthProvider>
        <Layout>
          <Component {...pageProps} />
        </Layout>
      </AblyAuthProvider>
    </ClerkProvider>
  );
}

方案2：利用Ably延迟认证机制 #

先创建未连接的Ably实例，设置autoConnect: false，等用户登录后再触发连接：

// pages/_app.jsx
import '@/styles/globals.scss';
import type { AppProps } from 'next/app';
import * as Ably from 'ably';
import { AblyProvider } from 'ably/react';
import { useEffect } from 'react';
import { ClerkProvider, useUser } from '@clerk/nextjs';
import Layout from '@/components/layout/Layout';

// 创建未自动连接的Ably实例
const ablyClient = new Ably.Realtime.Promise({
  authUrl: '/api/createTokenRequest',
  autoConnect: false,
  clientId: null
});

export default function App({ Component, pageProps }: AppProps) {
  const user = useUser();

  useEffect(() => {
    if (user.isSignedIn) {
      // 设置用户ID并触发连接
      ablyClient.options.clientId = user.id;
      ablyClient.connect();
    } else {
      // 用户登出时关闭连接
      ablyClient.connection.close();
      ablyClient.options.clientId = null;
    }

    // 组件卸载时清理连接
    return () => {
      ablyClient.connection.close();
    };
  }, [user.isSignedIn, user.id]);

  return (
    <ClerkProvider
      appearance={{ /* 你的样式配置 */ }}
      {...pageProps}
    >
      <AblyProvider client={ablyClient}>
        <Layout>
          <Component {...pageProps} />
        </Layout>
      </AblyProvider>
    </ClerkProvider>
  );
}

关键注意事项 #

• 复用连接实例：通过全局缓存或单一实例模式避免重复创建Ably client，减少不必要的费用。
• 处理登出逻辑：用户登出时必须主动关闭Ably连接，防止无效连接持续产生费用。
• 认证接口校验：确保/api/createTokenRequest接口能正确获取Clerk的用户会话信息，返回合法的Ably令牌请求。

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