I currently have a collection of products that are accessible on my website through a straightforward function within a server component.
async function getData() {
const res = await fetch(`${apiPath}`);
const data = (await res.json()) as PackProps[];
return data
}
Users visiting the site have the ability to apply various filters to this product list. I have acquired the new API format that requires specific parameters for it to function properly, however, I am uncertain about how to execute this call.
The challenge is that the filter options are located within a separate client component from the one responsible for displaying the product list.
When attempting to nest components and pass necessary parameters, another issue arises:
... cannot be used as a JSX component. Its return type 'Promise<Element>' is not a valid JSX element.
Naturally, it is not feasible to perform an async API call or mark a function component as async within a client component.
Could you please provide some guidance on how to successfully make an API call (or potentially force an API re-render) without forfeiting the advantages of Server Side Rendering?