Hi! I'm rendering some pages on the server side dynamically with Suspense and the app is calling at least three times the API. These are not prefetching nor the RSC page itself, is the API.

When it is in developing mode is one more call most of the time.

This is how I'm handling the fetching:

const loadQrInfo = async (
  { id, user }:
  { id: string, user: { accessToken: string } }
): Promise<QrInfoResponse | null> => {
  if (!user || !user.accessToken) return null

  const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || ""

  const response = await fetch(
    `${API_BASE_URL}/gen/info/${id}?img=true`,
    {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${user.accessToken}`
      },
      next: { revalidate: 0 },
      cache: 'no-cache',
    }
  )

  const data: Response = await response.json()

  if (!data.success) {
    console.error('Error fetching QR code')
    return null
  }

  return data.response
}

export default async function QrItem (
  { user }:
  { user: { accessToken: string } }
) {
  const params = useParams()

  const id = params.key as string

  const response = await loadQrInfo({ id, user })
  if (!response) return <p>...</p>

  const { page, length, previous, next } = response

  const visitorsCount = 0

  return ()
}

Wrapper function

'use client'

import { Suspense, lazy } from "react";
import useAuth from "@/hooks/useAuth";

const QrItem = lazy(() => import('@/components/qr-list/qr-item'))


export const List = () => {
  const user = useAuth();
  
  if (!user || !user.accessToken) return null

  return (
    <>
      <Suspense fallback={<p>Loading in the Suspense...</p>}>
        <QrItem
          user={user}
        />
      </Suspense>
    </>
  )
}