Prisma•13mo 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:

Set up a subscription when the page loads
Listen for any changes to posts
Revalidate the page when changes occur
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

Nurul•11/27/24, 4:15 PM

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•11/27/24, 4:36 PM

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•11/28/24, 1:29 PM

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•11/28/24, 4:22 PM

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•11/29/24, 7:35 AM

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.