Best way to paginate data with Firestore and Next.js for SEO-CodePudding

I use only firestore admin to access the database.

I have a function to retrieve the data from firestore. Given a collection name and option parameters (orderBy, startAt, endBefore, limit or limitToLast), it returns the resulting data in an array as well as a string with the url for the next page query and another one for the previous page. Something like this:

export interface FirestorePaginatedResponse {
    data: any[],
    nextParams?: FirestoreQueryOptions,
    prevParams?: FirestoreQueryOptions,
}

export async function paginatedQuery(
    collectionPath: string,
    basePath: string,
    options: FirestoreQueryOptions,
) {
[...]
    return {
        data,
        nextParams,
        prevParams,
    }
}

So, considering that Static Page Rendering is not an option for Firestore pagination, what would be best for SEO A or B?

A. Do the pagination client side. One landing page with getStaticProps to load the initialData, and then use useSWR hook to retrieve and prefetch the data client side for the next pages. With useSWR probably we would save some reads to firestore due to caching and due to static generation the loading time of the first page would be faster.

B. Do the pagination with server side rendering. The landing page would have a getServerSideProps function to load the data directly given the query parameters before the page is rendered. I think that server rendering might be better for SEO, but maybe the loading of the page would be slower.

In any of those cases the query parameters are read from the url, and the pages are navigated using next/link with href to do the client transition between pages.

EDIT:

I tested 2 pages for pagination with the same content one with getServerSideProps and another one with getStaticProps. The initial loading time of the page is almost the same, so I think I'll be going with the server side rendering as xBurnsed said, for SEO it's better ssr than csr.

CodePudding user response：

As far as I am concerned, the best approach for pagination when it comes to Firestore is to start at the first page, and then cycle through the results using startAfter() with the info of the doc where the last page ended. You can find more information in the following documentation.

Since pagination is meant to prevent loading all documents, I would choose to fetch the documents for each page on demand using the above described method.

Server-side rendering is considered a better option for SEO than client-side rendering. This is because server-side rendering can speed up page load times, which not only improves the user experience, but can help your site rank better in Google search results.

Server-side rendering is also better for SEO because it removes the burden of rendering JavaScript off of search engine bots, which makes it faster for them. Also, not all search engine bots are able to run JavaScript, as stated here.