Very slow loading of a new page: somedomain.com/catalog/all?p=2
Answered
Northeast Congo Lion posted this in #help-forum
Northeast Congo LionOP
Hi I have page with products(catalogue) on my website. There is a pagination and each page can have up to 60 products on it.
The pagination is implemented as two
The problem is that when I click the link to go to the next page it loads extremely slow.
At the same time I have a side menu with the categories (
I thought that the
Maybe it works in a different way for search parameters like
This is my code for pagination component where I use <Link> and calculate new href for it (first comment):
The pagination is implemented as two
<Link> elements to the next and to the previous pages (if they exist of course).The problem is that when I click the link to go to the next page it loads extremely slow.
At the same time I have a side menu with the categories (
<Link> elements as well), and when I need to switch to accessories the link points to somedomain.com/catalog/accessories route, and in this case products are loaded much more faster.I thought that the
<Link> element should prefetch pieces of html by default. And I don't understand why my app has such slow behaviour. I decided to use Next because it supposed to be faster 😦Maybe it works in a different way for search parameters like
?p=2 ? I think I miss something..This is my code for pagination component where I use <Link> and calculate new href for it (first comment):
Answered by Northeast Congo Lion
2 Replies
Northeast Congo LionOP
'use client'
import { ChevronRight, ChevronLeft } from 'lucide-react'
import Link from 'next/link'
import { usePathname, useSearchParams } from 'next/navigation'
import { useCallback } from 'react'
const Pagination = ({ activePage, pages }: any) => {
const pathname = usePathname()
const searchParams = useSearchParams()!
const createQueryString = useCallback(
(name: string, value: string) => {
const params = new URLSearchParams(searchParams.toString())
params.set(name, value)
return params.toString()
},
[searchParams],
)
return (
<div className="flex items-center gap-8 mt-16 mb-12">
{activePage < 2 ? (
<ChevronLeft className="h-4 w-4 opacity-20" />
) : (
<Link
href={
>
<ChevronLeft className="h-4 w-4" />
</Link>
)}
<p className="font-normal pt-1">
Page <strong className="text-blue-gray-900">{activePage}</strong> of{' '}
<strong className="text-blue-gray-900">{pages}</strong>
</p>
{activePage === pages ? (
<ChevronRight className="h-4 w-4 opacity-20" />
) : (
<Link
href={
>
<ChevronRight className="h-4 w-4" />
</Link>
)}
</div>
)
}
export default Pagination
import { ChevronRight, ChevronLeft } from 'lucide-react'
import Link from 'next/link'
import { usePathname, useSearchParams } from 'next/navigation'
import { useCallback } from 'react'
const Pagination = ({ activePage, pages }: any) => {
const pathname = usePathname()
const searchParams = useSearchParams()!
const createQueryString = useCallback(
(name: string, value: string) => {
const params = new URLSearchParams(searchParams.toString())
params.set(name, value)
return params.toString()
},
[searchParams],
)
return (
<div className="flex items-center gap-8 mt-16 mb-12">
{activePage < 2 ? (
<ChevronLeft className="h-4 w-4 opacity-20" />
) : (
<Link
href={
${pathname}?${createQueryString(
'p',
(activePage - 1).toString(),
)}}>
<ChevronLeft className="h-4 w-4" />
</Link>
)}
<p className="font-normal pt-1">
Page <strong className="text-blue-gray-900">{activePage}</strong> of{' '}
<strong className="text-blue-gray-900">{pages}</strong>
</p>
{activePage === pages ? (
<ChevronRight className="h-4 w-4 opacity-20" />
) : (
<Link
href={
${pathname}?${createQueryString(
'p',
(activePage + 1).toString(),
)}}>
<ChevronRight className="h-4 w-4" />
</Link>
)}
</div>
)
}
export default Pagination
Northeast Congo LionOP
Answer