Return page as Response
Unanswered
Black Turnstone posted this in #help-forum
Black TurnstoneOP
Hello. I searched on googles and asked GPT. But haven't found any reliable solution. I want to achieve the following:
Essentially, I want to return a custom status page I created as an response to a POST request in route.tsx. The page I want can also be accessed directly at /status/success, this page is like any other page in my app (styled, ShadCN, tailwind, etc).
I tried
1. I tried to just fetch this page directly using fetch API before send a response back with response.blob(). This works. However I'm worried that somewhere in the HTML server data is somehow leaked because the HTML was originally requested on the server.
2. Importing a react component and responding with Response(renderToString()), but as expected, all css that was originally being handled by the layouts, is not there.
I don't need the /status/success to be directly available, just the page as a separate component is fine. But how would I handle the CSS? Essentially acting the same as it were a page.
Thank you in advance!
Essentially, I want to return a custom status page I created as an response to a POST request in route.tsx. The page I want can also be accessed directly at /status/success, this page is like any other page in my app (styled, ShadCN, tailwind, etc).
I tried
1. I tried to just fetch this page directly using fetch API before send a response back with response.blob(). This works. However I'm worried that somewhere in the HTML server data is somehow leaked because the HTML was originally requested on the server.
2. Importing a react component and responding with Response(renderToString()), but as expected, all css that was originally being handled by the layouts, is not there.
I don't need the /status/success to be directly available, just the page as a separate component is fine. But how would I handle the CSS? Essentially acting the same as it were a page.
Thank you in advance!
7 Replies
@Black Turnstone Hello. I searched on googles and asked GPT. But haven't found any reliable solution. I want to achieve the following:
Essentially, I want to return a custom status page I created as an response to a POST request in route.tsx. The page I want can also be accessed directly at /status/success, this page is like any other page in my app (styled, ShadCN, tailwind, etc).
**I tried**
1. I tried to just fetch this page directly using fetch API before send a response back with response.blob(). This works. However I'm worried that somewhere in the HTML server data is somehow leaked because the HTML was originally requested on the server.
2. Importing a react component and responding with Response(renderToString()), but as expected, all css that was originally being handled by the layouts, is not there.
I don't need the /status/success to be directly available, just the page as a separate component is fine. But how would I handle the CSS? Essentially acting the same as it were a page.
Thank you in advance!
it's quite weird to see this, because typically when you get a POST request, it's a script that is sending the request and not a human user so a json response is more beneficial than a styled html response, but...
method 1 should work fine. or you can also use [rewrite](https://nextjs.org/docs/app/api-reference/functions/next-response#rewrite), not sure if it works in route handlers though.
method 1 should work fine. or you can also use [rewrite](https://nextjs.org/docs/app/api-reference/functions/next-response#rewrite), not sure if it works in route handlers though.
if you are doing something like
then don't do that, that's not how we do it in nextjs world. instead use server actions
which automatically uses POST method under the hood
<form action="/dostuff" method="post">then don't do that, that's not how we do it in nextjs world. instead use server actions
<form action={doStuff}>which automatically uses POST method under the hood
Black TurnstoneOP
I understand that this is not how you do it in NextJS world. However, the post endpoint is used by an external site, a plain HTML site with an HTML form, like your first code snipped. And no rewrites don't work in route handlers.
I know that method 1 works fine, but how can I be sure that it's safe?
I know that method 1 works fine, but how can I be sure that it's safe?
@Black Turnstone I understand that this is not how you do it in NextJS world. However, the post endpoint is used by an external site, a plain HTML site with an HTML form, like your first code snipped. And no rewrites don't work in route handlers.
I know that method 1 works fine, but how can I be sure that it's safe?
hmm that's interesting.
method should be fine, it's just rewrites with more steps
method should be fine, it's just rewrites with more steps
Black TurnstoneOP
const res = await fetch(${APP_BASE_URL}/success, {
method: req.method,
headers: {
...req.headers,
},
})
return new Response(await res.blob(), {
status: res.status,
statusText: res.statusText,
headers: {
...res.headers,
},
})This is what I mean with method 1 btw
Yeah this is fine