next.jsreact-server-components

React server component sends too many http requests for rsc payload

This is a code snippet of server component with Next.js 14. My trouble is that each item in the list will make a http request to obtain the RSC payload. The more items in this page, the more requests will be made, it increase the number of request in this page. Is there any way to solve this？

enter image description here

                times(pages).map((i)=>{
                    return <Link href={`/main?page=${i}`} ></Link>
                })
Solution

  • https://nextjs.org/docs/pages/api-reference/components/link#prefetch

    Prefetch is on by default so as soon as the link enters into viewport it fetches it.So try turning off prefetch

    times(pages).map((i)=>{
    return <Link prefetch={false} href={`/main?page=${i}`} ></Link>
})

    Note: prefetch still occurs when you hover even if it is false