Currently, I am working on developing a product page that showcases all products and functions as a server component. The challenge I am facing is the inability to pass the last visible document snapshot required by the startAfter() query.
Below is the function utilized to retrieve the documents:
export async function getProducts() {
const q = query(
collection(db, "products"),
where("isHidden", "==", false),
orderBy("createdAt", "desc"),
limit(12)
);
const querySnapshot = await getDocs(q);
const lastDoc = querySnapshot.docs[querySnapshot.docs.length - 1];
const products = [];
querySnapshot.forEach((doc) => {
products.push({ ...doc.data(), id: doc.id });
});
return { products, lastDoc };
}
Here's an example of how the page looks:
export default async function ProductsBikiniPage({ searchParams }) {
const page = searchParams["page"] ?? "1";
const { products, lastDoc } = await getProducts();
return (
<main>
<section>
//Listing products here
</section>
<section>
<PaginationControls>
</section>
</main>
);
}
The page parameters were initially used for pagination based on pages, but I discovered that Firebase's startAfter() method requires a document snapshot to function correctly (cannot simply use .skip(12), for instance). I'm struggling to find a way to return this lastDoc value back to the getProducts function to fetch the next batch of products without converting the component into a client-side component. Any suggestions on how to implement Firebase pagination in a Next server component would be highly appreciated.