Get help on Discord

Preview in Next.js makes Everything Slow with Timeouts

8 replies
Last updated: Jun 14, 2022
Hi! Preview in NextJs makes everything slowAnyone else struggling with big lags and timeouts when using the preview function? Happens when I use the preview button in the Studio and using the preview link to the site. Happens in both locally and production environment. If I wait long enough I get a "Page unresponsive" error from the browser
Only way to make it disappear is deleting the preview-cookie (and therefore not being in preview anymore)

Using the "NextJs with comments"-starter setup
AI Update

I can see you're experiencing the exact issue that was discussed in a community thread from 2022. The good news is there's a straightforward solution!

The Quick Fix

Update your next-sanity package to the latest version. The issue you're describing was caused by usePreviewSubscription running too aggressively in older versions of next-sanity (specifically version 0.4.0 and earlier). According to the community discussion, updating from 0.4.0 to 0.5.2 (or later) resolved this exact issue.

npm install next-sanity@latest
# or
yarn add next-sanity@latest

Why This Happens

The older implementation of usePreviewSubscription had performance issues where it would continuously query your content in an inefficient way, causing the browser to become unresponsive. This was particularly noticeable when using the preview button in Studio or accessing preview links.

Modern Approach: Consider Migrating to Live Content API

If you're still using the older preview setup with usePreviewSubscription, you might want to consider migrating to Sanity's newer Live Content API. This is the modern, production-ready approach that:

  • Eliminates the performance issues entirely
  • Provides real-time content updates without polling
  • Works seamlessly with Draft Mode in Next.js App Router
  • Offers better integration with Visual Editing features

The Live Content API uses sanityFetch and SanityLive utilities instead of usePreviewSubscription, providing a much more efficient implementation.

Immediate Steps

  1. Update next-sanity to the latest version
  2. Clear your preview cookie and test again
  3. If you're still having issues, check that your GROQ queries aren't overly complex or fetching too much data at once

If updating the package doesn't completely resolve the issue, feel free to share more details about your setup (Next.js version, how you're implementing preview mode) and the community can provide more specific guidance!

Do you have a link to the starter please? Looks like a query that keeps running permanently or something.
Sorry. It was this one: https://github.com/sanity-io/next-sanityThough (I wasn't the initial dev to set it up), so not complete sure if there's any major differences
I‘m thinking 
usePreviewSubscription
runs too aggressively.
OkI'll look into it! Thanks!

I was looking at what loads and maybe that would help me out
On a page load when preview is active the page doesn't respond to anything until theese two loads:
Looks like updating the "next-sanity" package from 0.4.0 to the newest (0.5.2 at this point) fixed the issue :)
Nice!

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?