Allow next.js page handler to respond to POST in draft mode

[CaptainN]

Goals

1. Rendering temporary, or "live preview" content from a CMS like payload, is super easy with client components, because they can be rendered directly client side from an iframe message with content state.
2. Rendering temporary or "live preview" content from a CMS in RSC is SLOW, and requires a fetch round trip to a temporary data store in the CMS to work.
3. This could be solves if app router page handlers could render from POST requests with the content in the POST body. Since draftMode is a kind of session driven dynamic mode, it should be relatively easy to support this, and would make "live preview" type functionality a lot more responsive, and much less simpler - less RubeGoldberg-esque.

Non-Goals

1. I don't want or need any kind of general POST handling in the page handler - this is just for draft mode, nothing else.
2. There may be an opportunity to add POST handling directly to page handlers, when using dynamic mode - I don't care either way, but it's not the goal.

Background

Many CMSs like Payload CMS or Tina CMS have robust client driven "live preview" functionality, and it'd be nice to support that in a more streamlined way in RSC components.

Proposal

Expand the page handler to support POST in draftMode (it already supports GET) so that we can pass larger data paylaods to the server for rendering.

[DevByRico]

You can enable POST support for draft mode in Next.js by using an API route to store preview data and reading it in your page.

`import { draftMode } from "next/headers";
import { NextResponse } from "next/server";

export async function POST(req: Request) {
  if (!draftMode().isEnabled) return NextResponse.json({ error: "Not in draft mode" }, { status: 403 });

  const data = await req.json();
  const response = NextResponse.json({ success: true });
  response.cookies.set("previewData", JSON.stringify(data)); // Store data in cookies

  return response;
}
`

2. Read Data in Page
   ts

`import { cookies } from "next/headers";

export default function PreviewPage() {
  const previewData = cookies().get("previewData")?.value;
  const data = previewData ? JSON.parse(previewData) : null;

  return <div>{data ? <pre>{JSON.stringify(data, null, 2)}</pre> : "No preview data"}</div>;
}
`

This lets you send larger preview payloads via POST, improving speed and reducing CMS fetches. 🚀

[DevByRico]

That's a great question! I understand your concern about URL length and potential data truncation when using GET. For small amounts of data, GET can be sufficient, but for larger payloads, POST is definitely the safer option since it doesn't have the same size limitations as GET requests. If you're planning to send larger preview data, POST would be the best choice to avoid issues with data loss or truncation. So, I wouldn't worry about using GET if the data size exceeds URL limits.

[CaptainN]

I'm going to be completely honest - your answers sound like they are generated by an LLM. Are you an LLM?

[DevByRico]

haha dude im a human lol

[CaptainN]

LOL - I had to check. These machines are going to ruin the internet. Although... that's exactly what an LLM would say.

[DevByRico]

Hahah yeah no cap its true tho, if this thread is completed mark it, and if you wanna keep the contact send a follow or smth let me know ^^