Next.js Discord

Discord Forum

How to use data obtained from route handlers into Async components

Unanswered
Maltese posted this in #help-forum
Open in Discord
MalteseOP
Async Component:

const Products = async ({ params }) => {
  const basePath = process.env.NEXT_PUBLIC_HOST_URL;
  const url = basePath + `/merchants/${params.merchantSlug}/products/api`;
  const response = (await fetch(url));
  console.log("response", JSON.stringify(response, null, 2));
  let products = await response.json();
  console.log("products after map", products);
  return (
    <ProductSection productList={products} />
  )
}

export default Products;

checked my URL is correct for the route handler, but the response is always an empty object and the products is also an empty array!

logs
Compiled /merchants/[merchantSlug]/products in 264ms (607 modules)
cleint status loading
response {}
products after map []


Route handler is as follows: (Also checked in browser my handler is working, http://localhost:3000/merchants/truedesignconcept/products/api)
export async function GET(request, context) {
    const slug = context?.params?.merchantSlug ?? '';
    const response = await fetch(base_url +
        `/products?populate=*&attributes[merchant][data][attributes][slug]=${slug}`, {
        headers: {            
            'Authorization': `Bearer ${process.env.NEXT_PUBLIC_STRAPI_TOKEN}`,
        },
    });    
    const data = await response.json();
    return Response.json(data);    
}

8 Replies

B33fb0n3
try to use noStore() on top:
https://nextjs.org/docs/app/api-reference/functions/unstable_noStore
MalteseOP
after adding noStore() got data in route handler but in component logs are still as follows:
Component
response {}
products after map []
at least I should got the same result as the data (route handler in response), now only culprit can be Response.json??
Route Handler
const data = await response.json();
    console.log("data in route handler", JSON.stringify(data, null, 2));
    return Response.json(data);
B33fb0n3
why don't you fetch it directly inside your server component?
MalteseOP
When should we use route handlers what are they made for??
I have taken reference from Vercel and shopify examples where data is fetched in route handler and then used in component:

https://github.com/vercel/commerce/blob/main/lib/shopify/index.ts#L376

https://github.com/vercel/commerce/blob/main/app/product/%5Bhandle%5D/page.tsx#L53
MalteseOP
For now on I have used API's in async component only
@Maltese For now on I have used API's in async component only
B33fb0n3
of course you can still use route handlers and yes that technically works, but you shouldn't, because it's an extra network request. So try fetching it directly in your server comonents.

I like to use route handlers, when I need to do something in backround, that affects the user. For example I would like to have a checkout button. The checkout button is just a link to /api/checkout?cartId=${cartId}. The user will be redirected to /api/... and from there redirected to the correct checkout session. yes, I could do that with server actions too and maybe also clientside, but that's one way of doing it
B33fb0n3
@Maltese solved?