Error with Suspense?

[silver obsidian]

The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.

[arctic parcel]

Hi @silver obsidian. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

This error message indicates that there was an issue during server-side rendering of a Suspense boundary in your Next.js application. As a result, Next.js switched to client-side rendering for this Suspense boundary.

In Next.js, you can manually create Suspense boundaries for your own UI components. The App Router supports streaming with Suspense for both Node.js and Edge runtimes. If a route is statically rendered, calling useSearchParams() will cause the tree up to the closest Suspense boundary to be client-side rendered. This allows a part of the page to be statically rendered while the dynamic part that uses searchParams is client-side rendered. You can reduce the portion of the route that is client-side rendered by wrapping the component that uses useSearchParams in a Suspense boundary.

Here's an example of how to use Suspense with useSearchParams:

'use client'
 
import { useSearchParams } from 'next/navigation'
 
export default function SearchBar() {
 const searchParams = useSearchParams()
 
 const search = searchParams.get('search')
 
 // This will not be logged on the server when using static rendering
 console.log(search)
 
 return <>Search: {search}</>
}

If an error occurs during server-side rendering within a Suspense boundary, it's possible that there's an issue with the component that's being rendered. You might want to check the component for any potential issues.

For more information, you can refer to the Next.js documentation on Loading UI and Streaming (https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming) and useSearchParams (https://nextjs.org/docs/app/api-reference/functions/use-search-params).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: