RefreshInterval is not working in swr and next.js 13

RefreshInterval in SWR and Next.js does not work.

• I use Next.js 13 and the APP folder
• RefreshInterval is 5000ms
• Database Postgresql & ORM Prisma

Problem - the refreshInterval is a lot faster than 5000ms.
I can see the refreshing data in the console (feels like loading the data every 1ms) after a short time I have hundreds of reloads, and the browser shows "Loading" (loading state is true any time) because the RefreshInterval is not working?!

Does anyone know the problem?

Sreenshot output: console.log(data)

page.tsx

'use client'
import fetcher from '@/lib/fetcher'
import useSWR from 'swr'

export default async function LeaderboardDetailPage({ params }: { params: { id: string } }) {
  const id = params.id

  const { data, error, isLoading } = useSWR(`http://localhost:3000/api/leaderboards/${id}`, fetcher, { refreshInterval: 5000 })

  if (error) return <div>failed to load</div>
  if (isLoading) return <div className="">Loading</div>
  console.log(data)
  
  return <div>{JSON.stringify(data)}</div>

api/leaderboard/[id]/route.ts

import prisma from '@/lib/prisma'
import { NextResponse } from 'next/server'

export async function GET(request: Request, { params }: { params: { id: string } }) {
  const id = params.id

  try {
    const leaderboard = await prisma.leaderboard.findUnique({
      where: {
        id: id,
      },

      select: {
        id: true,
        name: true,
        backgroundUrl: true,
        createdAt: true,
        gameId: true,
        game: {
          select: {
            id: true,
            name: true,
          },
        },
        scores: {
          select: {
            points: true,
            player: {
              select: {
                id: true,
                displayName: true,
              },
            },
          },
          orderBy: {
            points: 'desc',
          },
        },
      },
    })
    if (!leaderboard) {
      return new NextResponse('No leaderboard', { status: 404 })
    }

    return NextResponse.json(leaderboard)

  } catch (err) {
    return new NextResponse('Something went wrong', { status: 400 })
  }
}

Try removing async from your LeaderboardDetailPage.

There is a bug in current Next.js version that's causing infinite page re-rerenders - https://github.com/vercel/next.js/issues/49881

Incorrect placement of the useSWR hook: The useSWR hook should not be used inside an asynchronous function or a component marked as async. It should be used directly inside a functional component. Therefore, you need to refactor your code to remove the async keyword from the component declaration.

SWR Documentation: https://swr.vercel.app/