Performance Degradation in Next.js with Azure Communication Services SDK during Calls

Question

Description:

We are encountering a performance issue in our Next.js project where the web application starts lagging during calls after a few minutes. Below are the details of our setup and the issue:

Issue:

• After starting a call, the web app works fine initially, but after 5 minutes, the application begins to slow down.
• Description: We are encountering a performance issue in our Next.js project where the web application starts lagging during calls after a few minutes. Below are the details of our setup and the issue: Project Setup:
  • Next.js version: 15.0.3
    • Azure Communication Services SDKs:

      - `@azure/communication-calling: ^1.26.1`
      
            - `@azure/communication-calling-effects: ^1.0.1`
      
                  - `@azure/communication-chat: ^1.5.1`
      
                        - `@azure/communication-common: ^2.3.1`
      

  Issue:
  • After starting a call, the web app works fine initially, but after 5 minutes, the application begins to slow down.
  • API requests start getting delayed, including this specific request:
  • https://api.flightproxy.skype.com/api/v2/cp/broker-usce-04-prod-aks.broker.skype.com/api/v1/subscribe/{unique-id}/0?i=10-60-85-160
  This request initially executes quickly but gradually slows down, affecting other API calls and page route requests in Next.js.
  • The delay in these requests leads to significant lag in the application.
  • Actions Taken:

    - Optimized the code to minimize potential memory leaks.
    
          - Attempted various fixes to improve performance, but the issue persists.
    

    We would appreciate guidance on the potential cause of this issue and any recommendations for resolving it.

Answer 1

Hi Debiprasad Dash,
Welcome to the Microsoft Q&A Platform!
The performance degradation in your Next.js project during calls with Azure Communication Services (ACS) SDKs could stem from multiple potential causes.
Monitor heap usage with browser dev tools or Node.js profiling tools to detect memory leaks.

Ensure proper cleanup of ACS event listeners during component unmounting.

Rate-limit frequent API calls to avoid backend throttling.

Log API requests to detect duplicates or inefficiencies.

Use React Profiler to identify unnecessary re-renders.

Optimize components with React.memo, useCallback, or useMemo.

Throttle or debounce state updates triggered by ACS events.

Monitor WebSocket connections to prevent excessive reconnections.

Verify ACS SDK configurations for efficient state polling.

Load ACS-specific libraries only in the browser to reduce SSR overhead.

if (typeof window !== "undefined") {
  const { CallClient } = require('@azure/communication-calling');
}

Update ACS SDKs to the latest versions to leverage bug fixes and improvements.

Check the Azure SDK Known Issues documentation for compatibility guidance.

Use Azure Monitor Application Insights to analyze API latency and performance metrics.
Enable verbose ACS SDK logging for detailed diagnostics.
const callClient = new CallClient({ logging: true });
https://learn.microsoft.com/en-us/azure/communication-services/overview.
If the answer is helpful, please click ACCEPT ANSWER and kindly upvote it so that other people who faces similar issue may get benefitted from it.