Hi i need an opinion. So currently i have app/invoices and i have a page.tsx in it

import Invoices from "@/components/invoices";

import { getInvoices } from "@/serverFetchFirebase.ts/firebase";
import { getCustomers } from "@/serverFetchFirebase.ts/firebase";

export default async function InvoicesPage() {
const invoices = await getInvoices();
const customers = await getCustomers();

return <Invoices invoices={invoices} customers={customers} />;
}


where i get the data from firebase and send to the component. but is it better to create a layout and pass it to the children? im fetching the data from the server

import "server-only";
import { cookies } from "next/headers";
import admin from "../../firebaseAdmin";

export const getInvoices = async () => {
const cookieStore = cookies();
const userId = cookieStore.get("userId");

const firestore = admin.firestore();
const snapshot = await firestore
.collection(businesses/${userId?.value}/invoices)
.get();
const invoices = snapshot.docs.map((doc) => {
const data = doc.data();

const dateCreated = data.dateCreated.toDate().toISOString();

return { ...data, dateCreated, id: doc.id };
});

return invoices;
};