Prisma•7d ago

How to use Pulse with Next.js

I’m trynna figure out what’s the best approach to use Prisma pulse with Next.js (app router), so I came up with this but im not sure if this is the right way to do it

async function setupAllPostsSubscription() {
  const subscription = await prisma.post.subscribe()

  for await (const event of subscription) {
    revalidatePath('/posts')
  }
}

async function setupAllPostsSubscription() {
  const subscription = await prisma.post.subscribe()

  for await (const event of subscription) {
    revalidatePath('/posts')
  }
}

export default async function PostsPage() {

 // Call subscription
 setupSinglePostSubscription()
  
 // Call query
 const posts = await prisma.post.findMany()

  return (
    <article>
      {/* Display posts */}
    </article>
  )
}

export default async function PostsPage() {

 // Call subscription
 setupSinglePostSubscription()
  
 // Call query
 const posts = await prisma.post.findMany()

  return (
    <article>
      {/* Display posts */}
    </article>
  )
}

My understanding is that this will: 1. Set up a subscription when the page loads 2. Listen for any changes to posts 3. Revalidate the page when changes occur 4. Show updated data to all users viewing the page Is this a good approach? I'm particularly wondering about: - Whether putting the subscription directly in the page component is optimal - If there are any issues with connection management I should consider - Whether I should handle the subscription in a route handler instead - Or is there a better way to handle this overall

5 Replies

Nurul•7d ago

Hi @isagi 👋 I would recommend you to take a look at this official Next.js with Pulse example: https://github.com/prisma/prisma-examples/tree/latest/pulse/fullstack-leaderboard There are some other Pulse examples here as well: https://www.prisma.io/docs/pulse/examples Prisma Pulse streams cannot be initiated directly within client-side code. To receive events in real-time, Prisma Client needs to open a stream on a long-running server.

GitHub

prisma-examples/pulse/fullstack-leaderboard at latest · prisma/pris...

🚀 Ready-to-run Prisma example projects. Contribute to prisma/prisma-examples development by creating an account on GitHub.

Prisma Pulse: Examples | Prisma Documentation

Check out ready-to-run examples for Prisma Pulse.

isagiOP•7d ago

Thank you @Nurul. I actually found that repo earlier. it's a good approach, But I believe my server component implementation could work as well since we're not initiating Pulse client side - it's all happening server side. My main concern with the Socket.IO approach is that it might become more complex when handling specific scenarios like individual post pages or filtered subscriptions or just a lof of subscriptions. With server components, we could set up targeted subscriptions right where they're needed using Prisma's filtering. I'd love to understand if there are specific technical limitations that would make the Socket.IO approach necessary, or if my server components approach could work with proper implementation?

Nurul•6d ago

It could work if you are using NextJS API routes or React Server Components. As long as it's on server, you shouldn't face any issues. I would recommend using streams in this case, so that all of your generated events can be replayed in case no subscription is active, and no generated events are lost. Using socket.io approach is optional, dependent on the use case, so it would be okay if you don't go with that approach. https://www.prisma.io/docs/pulse/api-reference#stream If you are okay with events being lost if there is no active subscriber, then you can use subscribe as well. https://www.prisma.io/docs/pulse/api-reference#subscribe

Pulse: API reference | Prisma Documentation

API reference documentation for Pulse.

isagiOP•6d ago

But doesn't this mean I won't have real-time updates? Since the subscription/stream needs to be continuously running and server components/Route handlers are request-scoped, the server process ends after the subscription is set, so if an event is sent there will be no running server that receives it so I won't get real-time updates?

Nurul•6d ago

You will not lose any events, as when a subscription is reconnected. Pulse replays all the message which are not acknowledged. However you are correct that it won't work as you are expecting, as your subscriptions would be request scoped, a lot of times there would be no active subscriptions which would mean that events won't be received in real time.

Gaming

Programming

How to use Pulse with Next.js