### **SSR + Pagination: what I am doing and trying to achieve**

[noerocha]

What I am doing and trying to achieve

I am using useSWR for the pagination feature and trying to get the correct flow of events

Actual behaviour

Even though i see that the swr cache is being populated, everytime i hit a known api key stored in cache, i get an actual api request ( logging the sql used )

What I've tried

I have setup swr with a global fetch and not using any other options such as revalidateOnFocus, revalidateOnReconnect, etc. The pagination feature is working, but i feel it is making more than optimal requests.

I would really appreciate any help

Thank you :) 👍

const Index = ({ fallbackData, page: index }) => {
const router = useRouter()
const { data: session, status } = useSession()
const { cache, mutate, ...extraConfig } = useSWRConfig()

const [page, setPage] = useState(index as number)
const ref = useRef(false)


useEffect(() => {
    if (ref.current === false) {
        router.replace(`./?page=${index}`, undefined, { shallow: true })
        ref.current = true
    }
}, [])

useEffect(() => {
    router.replace(`./?page=${index}`, undefined, { shallow: true })
}, [page])

...

return (
    <Page title='Users'>
        <div className='...'>
            <UsersPage index={page} fallbackData={fallbackData} />
	    {/* <div className='hidden'>
		<UsersPage index={page + 1} fallbackData={fallbackData} />
	    </div> */}
	    <div className='flex h-20 items-center justify-between '>
		<div
		    role='button'
		    className={`w-24 rounded-lg bg-slate-200 px-2 py-3 text-center text-slate-800 dark:bg-slate-500 dark:text-slate-50 dark:shadow-slate-400 ${
		    page === 1 ? 'pointer-events-none bg-opacity-50 text-opacity-50 dark:bg-opacity-50 dark:text-opacity-50': 'pointer-events-auto'}`}
      		    onClick={() => setPage((current) => (current === 1 ? 1 : current - 1))}
		>
		    Previous
		</div>
		<div
		    role='button'
		    className='w-24 rounded-lg bg-slate-200 px-2 py-3 text-center text-slate-800 dark:bg-slate-500 dark:text-slate-50 dark:shadow-slate-400'
   		    onClick={() => setPage((current) => current + 1)}
		>
		    Next
		</div>
	    </div>
	</div>
    </Page>
    )
}
export const getServerSideProps: GetServerSideProps = async (context) => {
    let data: User[] = []

    /* .... code to get current page from path or default if any */	

    try {
        data = await getUsers(page)
    } catch (err) {
        console.log(err)
    }

    return {
        props: {
	    fallbackData: data,
	    page: page,
    },
}

I load the first page on server and pass the data to the component UserPage, plus the page index.

I also update the route path to reflect the state of current page, first time using the page index that comes from the server, then when going "Previous" and "Next". Would like to know, if there's a better way of doing this, although is working for now.

Note: no matter what is the page index, the fallbackData is always used. Is this a problem, just a small issue, etc ?

UserPage component below

const getURL = (page: number) => `/api/users?page=${page}`

const UsersPage = ({ fallbackData, index }: UserPageProps) => {   
    const { data: users } = useSWR(getURL(index), {fallbackData})
    return (
        <div className='flex flex-1 flex-col items-center justify-start gap-y-4 overflow-auto '>
	    {users.map((user: User) => (
		.... render code ....
	    ))}
	</div>
    )
}

when i look at the cache i see an object like this.

0: {"$swr$/api/users?page=1" => Object}
    key: "$swr$/api/users?page=1"
    value: {isValidating: false, error: undefined}
1: {"/api/users?page=1" => Array(10)}
    key: "/api/users?page=1"
    value: (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
    ....