but code work fine soo what's wrong?

I need to fetch the in whole HTML in this response but now this is not HTML format

import React, { FC } from 'react'
const getData = async (id:any) => {
try {
const response = await fetch(https://jsonplaceholder.typicode.com/todos/${id});
const data = await response.json();
return data;
} catch (error) {
return [];
}
};
const ToDoDetails:FC<any> = async({params}) => {
const data = await getData(params?.id);
console.log(data,'---')
return (
<div>
<p>{data?.id}</p>
<p>{data?.title}</p>
</div>
)
}

export default ToDoDetails;

i have a list when i click a particular list shows http://localhost:3000/119?_rsc=1cywn URL has no fetch HTML

@Polish Hound @Siberian

They are ?rsc requests, returning the rsc payload not html. The client side router understands the rsc payload format and can use that info to handle client side navigation for you. You don’t need to worry about the content of these requests. They just work™️

@joulev thanks for responding, but my other website gives me responses in rsc payload in HTML format , so need html in rsc response

bro give me your live code and tell me what you want?

I don’t get the question here. Why exactly do you need to worry about the requests that the router automatically makes and handles for you? Can just consider them a black box, whatever happens there is the router’s business not yours.

The thing still works right? Then why bother. If it doesn’t work then what is not working?

but why you want html response?

same why he need html formate response? no need of that ever

for SEO purpose

Yep

If you disable JS, your <Link> will become pure <a> so crawlers perfectly understand them, SEO is fully good

for seo ??? what you

do ?

The rsc payload and client side navigation is only for the users, not for SEO

you are never wary about responses your SEO is just fine if you export metadata

hmm, but my client requirement is that he needs rsc response in HTML format

Tell him that he doesn’t understand how nextjs works then. Or ditch <Link> completely and use <a> just because he wants that

your client also has requirement to use nextJS?

He mentioned that other sites provide responses in RSC HTML format, so why doesn't our site? It's showing an empty response.

Yes

can we have you code because i still struggled to figure out you issue 🤔

import React, { FC } from 'react'
const getData = async (id:any) => {
try {
const response = await fetch(https://jsonplaceholder.typicode.com/todos/${id});
const data = await response.json();
return data;
} catch (error) {
return [];
}
};
const ToDoDetails:FC<any> = async({params}) => {
const data = await getData(params?.id);
console.log(data,'---')
return (
<div>
<p>{data?.id}</p>
<p>{data?.title}</p>
</div>
)
}

export default ToDoDetails;

ok wait i try to figure out

Okay

ok so I make the environment now what you need ?

i need look like this HTML format

hmmm

hey like this?

Yes i need like this

just dobble click on that ?_rsc=r3yhw

oh let me check

i check in live but when I click, it opens in a new tab, but I need it to open with a single click.

are check this?

wait i will share you video

👍

now we have to double click, i need a single click like this site

this is doument i have in a document in html but i need a

so I explained to you that in nextJS when you use RSC ( react server components ) it always retun your code after compilation so it not in html formate

plaese select fetch not All respone

The rendered result of Server Components, is not html formate

how to work on the video I shared with you above, and the complete HTML in rsc

may be the different framework

?

no it is a nextjs

const test = await fetch(http://localhost:3000/);
console.log(test);

😁😁😁

where is added

/* eslint-disable react-hooks/exhaustive-deps */
"use client";

import React, { useEffect, useState } from "react";

export const ToDoDetails = ({ params }: { params: any }) => {
const [data, setData] = useState<any>(null);

const getData = async (id: any) => {
try {
const response = await fetch(
https://jsonplaceholder.typicode.com/todos/${id},
{
next: { revalidate: 1 },
headers: {
cache: "no-store",
},
}
);

const test = await fetch(http://localhost:3000/);
console.log(test);
const data = await response.json();
return data;
} catch (error) {
return [];
}
};

useEffect(() => {
getData(params?.id).then((data) => setData(data));
}, []);

return (
<div>
<p>{data?.id}</p>
<p>{data?.title}</p>
</div>
);
};

i make it client component

Thanks for responding i will try'