Docs: Improve docs on how to enable preview content (draft)

[surjithctly]

I'm reading the docs with the section Rendering preview content server-side but I'm unable to understand how I should use this to show the draft content while fetching.

I have the following code now:

  if (fetchParam) {
    const absoluteUrl = new URL(`/${type}/${slug}`, baseOrigin).toString();

    const previewHtml = await fetch(absoluteUrl, { headers })
      .then((previewRes) => previewRes.text())
      .catch((err) => console.error(err));

    return new Response(previewHtml || null, {
      status: 200,
      headers: {
        "Content-Type": "text/html",
        ...Object.fromEntries(headers),
      },
    });
  }

but it fetches the "PreviewSuspense" Loading UI.

I'm using next 13.4 with /app router.

The Preview content looks like this:

  if (preview) {
    return (
      <PreviewSuspense fallback={<Loading />}>
        <PostPreview slug={params.slug} categories={categories} />
      </PreviewSuspense>
    );
  }

Help?

[SimeonGriggs]

I believe the example in this repo uses app router, there might be some useful code?

https://github.com/SimeonGriggs/showcase-seo-pane

[surjithctly]

The example uses pages/api and res.setPreviewData for the preview part, latest app router uses route and draftMode(). See: https://nextjs.org/docs/app/building-your-application/configuring/draft-mode

So, the new app requires to use previewSuspense which causes the issue.