NextJs Preview Mode Causing Lags and Timeouts with Browser Unresponsive Error

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!