Pagination in NextJs

Question

I am trying to paginate one of my pages in the application which is built with React / NextJs - getServerSideProps.

Step 1: Creates a pagination component
Step 2: Redirect to a URL with Page numbers (based on user clicks)
Step 3: It should re-render getServerSideProps with the newer page value, which is not happening right now.

My current code block (Server Side Props - API call):

export const getServerSideProps = async (ctx) => {
  try {
    const APIKey = await getCookieAPIKey(ctx);
    const user = await getCookieUser(ctx);
    const dataSSR = await getDataSSR(
      APIKey,
      '/xyz/xyz/read/',
      user.user_id,
      'user_id',
      ctx.query.page,
      ctx.query.limit
    );
   
    // console.log(d, "data")
    return {
      props: {
        dataSSR
      }
    };
  } catch (err) {
    ...
    return { props: { fetchError: err.toString() } };
  }
};


export const getDataSSR = async (APIKey, path, id, idString, page, limit) => {
  //generate URL path for fetch
  const base_url = `${ENDPOINT}/services`;
  let url;
  if (id && !idString && !page) {
    url = base_url + path + '?key=' + APIKey + '&id=' + id;
  } else if (id && idString && page) {
    url = base_url + path + '?key=' + APIKey + `&${idString}=` + id + '&page=' + page + `&limit=${!limit ? '24' : limit}`;
  } else if (id && idString && !page) {
    url = base_url + path + '?key=' + APIKey + `&${idString}=` + id + '&page=0' + `&limit=${!limit ? '24' : limit}`;
  }
  else {
    url = base_url + path + '?key=' + APIKey + '&page=' + page + `&limit=${!limit ? '10' : limit}`;
  }

I followed this tutorial for pagination.

With a modification of the click method statement:

<ReactNextPaging
    itemsperpage={itemsperpage}
    nocolumns={nocolumns}
    items={items}
    pagesspan={pagesspan}
  >
    {({
      getBackButtonProps,
      getFwdButtonProps,
      getFastFwdButtonProps,
      getSelPageButtonProps,
      nopages,
      inipagearray,
      pagesforarray,
      currentpage,
      noitems,
      initialitem,
      lastitem,
      goBackBdisabled,
      goFastBackBdisabled,
      goFwdBdisabled,
      goFastFwdBdisabled
    }) => (
      <tbody style={{ alignItems: "center", margin: "auto auto" }}>
        {/* {items.slice(initialitem, lastitem).map((item, index) => {
                            return item;
                        })} */}
        {noitems > 0
          ? [
            <tr key={"pagingrow" + 100} >
              <td colSpan={nocolumns} style={{ textAlign: "center" }}>
                <button
                  style={buttonStyles(goBackBdisabled)}
                  {...getBackButtonProps()}
                  disabled={goBackBdisabled}
                >
                  {"<"}
                </button>
                {Array.from(
                  { length: pagesforarray },
                  (v, i) => i + inipagearray
                ).map(page => {
                  return (
                    <button
                      key={page}
                      {...getSelPageButtonProps({ page: page })}
                      disabled={currentpage == page}
                      style={{ margin: "0.5em", backgroundColor: "transparent", border: "none" }}
                      onClick={e => page != currentpage ? pageNumClick(page, e, currentpage) : {}}
                    >
                      {page}
                    </button>
                  );
                })}
                <button
                  style={buttonStyles(goFwdBdisabled)}
                  {...getFwdButtonProps()}
                  disabled={goFwdBdisabled}
                >
                  {">"}
                </button>
              </td>
            </tr>
          ]
          : null}
      </tbody>
    )}
</ReactNextPaging>

Page redirection handle code :

const pageNumClick = (page, e, currentpage) => {
    let el = document.getElementsByClassName(`.clickable-page-${page}`)
    console.log(el)
    e.target.style.backgroundColor = "#353E5A";
    currentpage = page;
    console.log(page, "clicked page number", e.target, currentpage)
    //Redirects to the URL with clicked page number
    router.push({
      pathname: router.pathname,
      query: { show: showname, page: page }
    })
    refreshData(); // Try to refresh props once the URL is changed
  }

  const refreshData = () => {
    router.replace(router.asPath);
    console.log('refreshed')
  }

Attempts to resolve:

1. Added refreshData method to invoke ServerSideProps upon URL change based on this.
2. Tried changing getServerSideProps to getInitialProps - with no luck

Any help or links would be appreciated, been stuck with the task since 3 days

Answer 1

Issue is caused by the refreshdata function, router.asPath will have your current url. Below code is working fine for me.

function ProductDetail({ products, page,limit }) {
  const router = useRouter();
  const pageNumClick = (page, limit) => {
    router.push({
      pathname: router.pathname,
      query: { limit: limit, page: page },
    });
  };
  return (
    <div>
      <div onClick={() => pageNumClick(parseInt(page) + 1, limit)}>Next page</div>
      <div onClick={() => pageNumClick(parseInt(page) - 1, limit)}>
        Previous page
      </div>
      {products ? JSON.stringify(products) : <></>}
    </div>
  );
}

export async function getServerSideProps({ params, query, ...props }) {
  const products = await getProducts(query.limit, query.page);
  return {
    props: {
      products: products ? products : {},
      page: query.page,
      limit: query.limit,
    },
  };
}