Can anyone help me with this following issue?
Answered
Maltese posted this in #help-forum
MalteseOP
I am unable to get response in RSC component from Route handler but getting expected response when called from postman, for code and more explanation: https://stackoverflow.com/questions/78645775/how-to-resolve-empty-response-from-route-handler-when-rsc-component
Answered by joulev
remove the route handler and just use the server-side logic directly in your server component
import ProductSection from '@/app/_components/ProductSection';
import React from 'react'
// import { unstable_noStore as noStore } from 'next/cache';
import base_url from '@/app/_util/StrapiConfig';
const Products = async ({ params }) => {
const merchantSlug = params?.merchantSlug || process.env.NEXT_PUBLIC_MERCHANT_NAME;
//...
const response = await fetch(base_url +
`/products?populate=*&attributes[merchant][data][attributes][slug]=${slug}`, {
headers: {
'Authorization': `Bearer ${process.env.NEXT_PUBLIC_STRAPI_TOKEN}`,
},
});
const products = await response.json();
console.log("products in page.js", JSON.stringify(products, null, 2));
return (
<div className='mt-10 sm:px-10 md:px-20'>
<ProductSection productList={products} />
</div>
)
}
export default Products;14 Replies
@Maltese I am unable to get response in RSC component from Route handler but getting expected response when called from postman, for code and more explanation: https://stackoverflow.com/questions/78645775/how-to-resolve-empty-response-from-route-handler-when-rsc-component
method 3 is the choice.
Using Context means LandingPage will no longer be an RSCwhich is incorrect. you can make a context in a
use client file and then import it into LandingPage which remains a server componenttrpc follows the same approach by the way. there is a context spanning the whole app which stores the cache data
while the RSC part of the app router is equivalent to the SSG/SSR helpers of trpc
MalteseOP
@joulev i am sorry i pasted the wrong stackoverflow link
@Maltese <@484037068239142956> i am sorry i pasted the wrong stackoverflow link
remove the route handler and just use the server-side logic directly in your server component
import ProductSection from '@/app/_components/ProductSection';
import React from 'react'
// import { unstable_noStore as noStore } from 'next/cache';
import base_url from '@/app/_util/StrapiConfig';
const Products = async ({ params }) => {
const merchantSlug = params?.merchantSlug || process.env.NEXT_PUBLIC_MERCHANT_NAME;
//...
const response = await fetch(base_url +
`/products?populate=*&attributes[merchant][data][attributes][slug]=${slug}`, {
headers: {
'Authorization': `Bearer ${process.env.NEXT_PUBLIC_STRAPI_TOKEN}`,
},
});
const products = await response.json();
console.log("products in page.js", JSON.stringify(products, null, 2));
return (
<div className='mt-10 sm:px-10 md:px-20'>
<ProductSection productList={products} />
</div>
)
}
export default Products;Answer
@Maltese I am unable to get response in RSC component from Route handler but getting expected response when called from postman, for code and more explanation: https://stackoverflow.com/questions/78645775/how-to-resolve-empty-response-from-route-handler-when-rsc-component
Brown bear
one question here: assume the first load on the
LandingPage is done through server side function calls (executed on the server , since it is an Route Handler). Like caller.user.findBy() whereas on the client, this would be a useQuery call. When you say "there is a context spanning the whole app which stores the cache data" , are you suggesting the cache is common to both server and client? or is the caching behaviour is offered for free by react-query@Brown bear one question here: assume the first load on the `LandingPage` is done through server side function calls (executed on the server , since it is an Route Handler). Like `caller.user.findBy()` whereas on the client, this would be a `useQuery` call. When you say "there is a context spanning the whole app which stores the cache data" , are you suggesting the cache is common to both server and client? or is the caching behaviour is offered for free by react-query
different question goes to different post please, where people can discuss more without affecting the main topic in this thread. the OP posted a wrong link, they have corrected it and it is no longer related to trpc/react-query.
please open a new post
@joulev remove the route handler and just use the server-side logic directly in your server component
tsx
import ProductSection from '@/app/_components/ProductSection';
import React from 'react'
// import { unstable_noStore as noStore } from 'next/cache';
import base_url from '@/app/_util/StrapiConfig';
const Products = async ({ params }) => {
const merchantSlug = params?.merchantSlug || process.env.NEXT_PUBLIC_MERCHANT_NAME;
//...
const response = await fetch(base_url +
`/products?populate=*&attributes[merchant][data][attributes][slug]=${slug}`, {
headers: {
'Authorization': `Bearer ${process.env.NEXT_PUBLIC_STRAPI_TOKEN}`,
},
});
const products = await response.json();
console.log("products in page.js", JSON.stringify(products, null, 2));
return (
<div className='mt-10 sm:px-10 md:px-20'>
<ProductSection productList={products} />
</div>
)
}
export default Products;
MalteseOP
when to use route handlers and when to use fetch api in rsc only?
I want to have distinct logic so that if in future i replace REST with graphQL then also it do not look messy!
I want to have distinct logic so that if in future i replace REST with graphQL then also it do not look messy!
Brown bear
(Apologies) asked in the same thread since it was slightly related.
@Maltese when to use route handlers and when to use fetch api in rsc only?
I want to have distinct logic so that if in future i replace REST with graphQL then also it do not look messy!
route handlers is for client-side data fetching. if you want to fetch in server-side, don't use route handlers, just run the server-side query directly
@joulev https://nextjs-faq.com/fetch-api-in-rsc
read this link
MalteseOP
Ok thank you for the help!