Bug: Flood of Requests When in Preview But Navigate Away from Preview Path -- Nextjs 14 Using Pages Router

[rpsulli (Ryan Sullivan)]

Hello -- found a nasty (potentially costly) bug, curious if others can reproduce.

Problem:
When using the Preview mode and I navigate away from the preview path, the browser makes a flood of requests to my server host, preview api route (/preview) and the prismic subdomain for the project (/toolbar/predict & /toolbar/devMode).

I noticed this when seeing outlier spikes in my Vercel usage on days that we were creating and editing content.

Reproduction steps:

1. In Chrome, go to the prismic dash and open a page type, click "Preview the page".
2. Open network tab on Chrome browser.
3. Navigate away from the page (e.g. from "/page" to root "/").
4. Watch the insane number of requests being fired off.

Note: As soon as the "X" is clicked on the preview indicator, it stops.

My setup:
Nextjs 14 (pretty vanilla setup)
Using pages router.
In _app.tsx using <PrismicPreview repositoryName={repositoryName} />
@prismicio/next v1.5.0

Possible solution: Disable preview when user navigates away from intended preview page.

[nf_mastroianni (Neil)]

Hi, @rpsulli

I no longer have pages router projects as I decided to dive right in to the app router. I say this to acknowledge that I'm not comparing apples to apples here. For me, when I'm previewing a page (whether or not I stay on the page or navigate away), the preview toolbar regularly pings and looks for content. I have just assumed this is how it is able to update "on the fly" when I save content in the page builder (legacy also).

Are you saying that you see the normal influx of pings while previewing your page, but see a dramatic increase in network pings once you navigate away? I just tried to replicate the preview and navigate away steps you provided, and I didn't get the behavior. Here's my project dependencies:

"dependencies": {
    "@headlessui/react": "^1.7.17",
    "@prismicio/client": "^7.3.1",
    "@prismicio/helpers": "^2.3.8",
    "@prismicio/next": "^1.5.0",
    "@prismicio/react": "^2.7.3",
    "@tailwindcss/aspect-ratio": "^0.4.2",
    "@tailwindcss/typography": "^0.5.10",
    "@types/react-headroom": "^3.2.3",
    "axios": "^1.6.2",
    "eslint": "^8.56.0",
    "eslint-config-next": "^14.0.4",
    "googleapis": "^129.0.0",
    "next": "^14.0.4",
    "nodemailer": "^6.9.7",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-headroom": "^3.2.1",
    "react-hook-form": "^7.49.2",
    "react-icons": "^4.12.0",
    "sharp": "^0.33.1"
  },
  "devDependencies": {
    "@emotion/babel-plugin": "^11.11.0",
    "@emotion/react": "^11.11.1",
    "@prismicio/types": "^0.2.8",
    "@slicemachine/adapter-next": "^0.3.31",
    "@tailwindcss/forms": "^0.5.7",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.4.16",
    "clsx": "latest",
    "concurrently": "^8.2.2",
    "postcss": "^8.4.32",
    "prettier": "^3.1.1",
    "prettier-plugin-tailwindcss": "^0.5.9",
    "slice-machine-ui": "^1.22.1",
    "tailwind-merge": "latest",
    "tailwindcss": "^3.4.0",
    "typescript": "^5"
  }

[rpsulli (Ryan Sullivan)]

Hey @nf_mastroianni

This is not ping traffic. Thanks for asking so I have the opportunity to clarify.

Here's what my network tab looks like when this happens:

Are you saying that you see the normal influx of pings while previewing your page, but see a dramatic increase in network pings once you navigate away?

Edit --> No, in this case, it's not ping traffic.

It could be something in the way I set it up, but I followed the basic instructions.

[nf_mastroianni (Neil)]

Hi again @rpsulli ,

Below is a screenshot of what I get in my preview's network tab once the preview page has loaded.

The same is true when I navigate to a non-previewed page. I wonder if this is anyway related to the pages router. May I ask about the Next version you're running in this project?

[rpsulli (Ryan Sullivan)]

Sorry, I'm seeing traffic other than ping traffic. I may have mislead you in one of my responses.

I might be on to something here... I'll report back in a few, if I figure out what's causing this.

Appreciate the help.

[rpsulli (Ryan Sullivan)]

Okay, I fixed it. Interesting update here:

I found that the flood of requests was occurring for pages (in preview mode) that were not managed by prismic.

Those pages (including my homepage) were hardcorded and did not include getStaticProps, because there's nothing to fetch at build time.

Anyways, for those pages (not using prismic), I added a getStaticProps and those pages now behave properly in preview mode.

export async function getStaticProps({ previewData: _previewData }) {
  return {
    props: {}
  };
}

I don't know if this is a Nextjs preview bug or a Prismic preview bug, but I'm moving on. Since Prismic is controlling the preview, I'd expect it to only try to fetch data in preview for page routes defined in prismicio.ts config.

[nf_mastroianni (Neil)]

That's great @rpsulli that you diagnosed and resolved your own issue. Don't forget to come back and mark your own post as the solution! This isn't an issue I've run across as I use Prismic to control all my pages.

[rpsulli (Ryan Sullivan)]

Thanks for jumping in on this :)

[james.hyatt]

I also have the same issue using Next.js 14.1.0 using App router. If I enable the slice previews it's fine until I preview a page, at which point each slice preview endlessly hammers my site until the preview Errors.

This is vercel hosted and I can see in the logs that the root page errors with a 500 (I don't know why the home page is being accessed as my preview is for a nested page).

Error: Invariant: expected pageData to be a string, got undefined
    at r3.renderToResponseWithComponentsImpl (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:17:3521)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async r3.renderPageComponent (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:17:4780)
    at async r3.renderToResponseImpl (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:17:5363)
    at async r3.pipeImpl (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:16:17297)
    at async r3.handleCatchallRenderRequest (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:17:36510)
    at async r3.runImpl (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:16:17030)
    at async r3.handleRequestImpl (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:16:16123)
    at async Server.<anonymous> (/var/task/___next_launcher.cjs:30:5)
    at async Server.<anonymous> (/opt/node-bridge/bridge-server-4GP2M4NJ.js:1:8806) {
  page: '/'
}
Error: Runtime exited with error: exit status 1
Runtime.ExitError

UPDATE: Looking at the full preview page I can see it makes a call to /?_rsc=9vzw7 which is returning the 500 error and seems to cause the slice previews to retry and end up generating a ton of traffic before giving up.

Any ideas as I am new to both Prismic and Next.js hosted on Vercel.

[nf_mastroianni (Neil)]

Hi @james.hyatt ,
Do you mind if I ask a few questions?

If I enable the slice previews, it's fine until I preview a page, at which point each slice preview endlessly hammers my site until the preview Errors.

When you speak of previews, are you discussing the previews that appear in the new page builder, or are you talking about the page preview feature at the bottom of the page builder?

I ask because you say, "...each slice preview."

If you're referring to the page preview, have you seen whatthe OP figured out? It looks like the error you sent is referring to the homepage. Are you fetching data from Prismic on this page? The OP noticed that the preview went "bonkers" when he navigated to a page that wasn't fetching data from Prismic.

[james.hyatt]

@nf_mastroianni Apologies that my initial comment was a little confusing so I'll try and explain more carefully

I set the 'Live preview setting' as follows:

this worked as expected (after I found out how to set-up for multiple slice libraries) which allows me to see the preview slices as follows:

This works fine until I select to preview the page:

which opens a new case study page which again correctly works and I can see any saved content. However I notice this page throws a 500 error in the Network tab as follows:

and when I return back to the editor the slice previews are now causing an error and investigating the Vercel logs and the iFrame console logs for each preview I can see they are calling the slice simulator over and over each time throwing the 500 error.

and checking the dev tools I can see thousands of errors and that it's constantly calling the slice simulator.

As soon as I goto the preview page and exit preview mode everything works again.

[nf_mastroianni (Neil)]

Wow, @james.hyatt

You have to see my most recent update to an unintentionally similar post.

I think you and I have stumbled upon the same problem. I do offer the same "workaround" in my update.

[james.hyatt]

In the page.tsx for my Index page I have the following:

export async function generateMetadata({
  params,
}: {
  params: Params;
}): Promise<Metadata> {
  const client = createClient();
  const page = aw`ait client.getByUID("page", "home").catch(() => notFound());

  return {
    title: page.data.meta_title,
    description: page.data.meta_description,
  };
}

export default async function Page() {
  const client = createClient();
  const page = await client.getByUID("page", "home").catch(() => notFound());
  return (
    <>
      <Spacer className="h-55 md:h-75 2xl:h-112" />
      <HeroTitle>{page.data.title}</HeroTitle>
      <SliceZone slices={page.data.slices} components={components} />

and in the prismicio.ts

`const routes: prismic.ClientConfig["routes"] = [
  {
    type: "page",
    path: "/",
  },
  {
    type: "page",
    path: "/:uid",
  },
  {
    type: "case_study",
    path: "/work/:uid",
  },
];

I am early into development for now I just set the homepage as the default page type and return some basic details.

I originally had this issue before I'd added prismic into the root (home) page but I have the same issue even after integrating the basic client.

I believe the OP is using the Next.js Pages route?

[james.hyatt]

To add further detail, when previewing any page I can see that any other page linked to is throwing a 500 error:

/?_rsc=9vzw7
/work?_rsc=9vzw7
/news?_rsc=9vzw7

etc.

Each of those pages has an error like:

    at r3.renderToResponseWithComponentsImpl (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:17:3521)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async r3.renderPageComponent (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:17:4780)
    at async r3.renderToResponseImpl (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:17:5363)
    at async r3.pipeImpl (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:16:17297)
    at async r3.handleCatchallRenderRequest (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:17:36510)
    at async r3.runImpl (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:16:17030)
    at async r3.handleRequestImpl (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:16:16123)
    at async Server.<anonymous> (/var/task/___next_launcher.cjs:30:5)
    at async Server.<anonymous> (/opt/node-bridge/bridge-server-4GP2M4NJ.js:1:8806) {
  page: '/work/pirate'
}
Error: Invariant: expected pageData to be a string, got undefined
    at r3.renderToResponseWithComponentsImpl (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:17:3521)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async r3.renderPageComponent (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:17:4780)
    at async r3.renderToResponseImpl (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:17:5363)
    at async r3.pipeImpl (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:16:17297)
    at async r3.handleCatchallRenderRequest (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:17:36510)
    at async r3.runImpl (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:16:17030)
    at async r3.handleRequestImpl (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:16:16123)
    at async Server.<anonymous> (/var/task/___next_launcher.cjs:30:5)
    at async Server.<anonymous> (/opt/node-bridge/bridge-server-4GP2M4NJ.js:1:8806) {
  page: '/work/pirate'
}
Error: Runtime exited with error: exit status 1
Runtime.ExitError

[nf_mastroianni (Neil)]

While I think this is a bug in the current page builder / slice simulator / preview system, I think the vision of the page builder is that you wouldn't really need the page preview as much until you were ready to share it with non-editors for approval. At least we know now how to get the slice previews working again in our page builder.

Additionally, this topic has been marked solved so we're unlikely to get much traction in this topic. Would you be interested in adding your updates to the post I linked above? I believe they're really the same issue, and that topic is still open. Thoughts @james.hyatt ?

[james.hyatt]

Yes sure, I'll follow up in your thread and hopefully someone can take a look.

[Phil (Phil Snow)]

Do you have content relationship links in all these Slices?

[nf_mastroianni (Neil)]

Speaking for myself, none of my slices have content relationships at the moment. The page builder previews “break” once a page preview is initiated.

[Phil (Phil Snow)]

Thanks Neil

[Phil (Phil Snow)]

I've made a bug report you can follow here

Log in with Atlassian account