DEV Community

Cover image for GRPC Node + NextJs + Prisma + Envoy Proxy
Ozair
Ozair

Posted on

GRPC Node + NextJs + Prisma + Envoy Proxy

#node #grpc #nextjs #prisma

GRPC Node + NextJs + Prisma + Envoy Proxy

This is a simple CRUD for task management app built with below techs:

  1. GRPC-Node
  2. NextJs
  3. Prisma
  4. Envoy Proxy

Currently, I have used 4 Unary RPCs and 1 Server streaming RPC for streaming real-time data, and in the future will implement Client streaming RPCs and Bidirectional streaming RPCs🫡.

I have also used Prisma to store tasks in the database.
The tasks list route("/tasks") will be real-time using GRPC Server streaming RPC, upon adding a new task a trigger will be fired at connected clients.

As well I have added a Unary RPC route to destroy unused clients, maybe you can use a Cron job to trigger that route every 30min or based on your requirements.

GitHub repo: Real-Time Task Management App

Top comments (5)

Collapse
 
lwhiteley profile image
Layton Whiteley • • Edited

Thanks for the post.

I used gRPC for a client-side application and ran into a few issues. It would be interesting to know if you have stumbled upon these as well and also how you resolve them.

  1. gRPC-web only supports one-directional streams currently. Therefore, we had to design the protobuf services in a way that only considered one-directional streaming.
  2. Many benefits of HTTP2 were not realised due to many browsers not yet supporting it properly. Therefore there was a connection limit and each browser had their own limit, I found 6 connections were a sweet spot. However, We still had to group all services into one protobuf file so only one connection was created. Bad architecture but those were the limitations. Envoy proxy only acts as an HTTP2 mediator so the connection in the browser is still HTTP1.x
  3. gRPC-web has a memory leak issue for long running streams and we had to periodically kill and reopen the connection due to its dependency on XMLHTTPRequest. This wasnt very ideal but it somehow worked.
  4. Debugging was also a pain. We had to create a custom logger as the browser extensions also opened connections which would sometimes go over the limit and freeze the browser

Ultimately my team ended up starting to put a websocket layer above grpc so the client didnt need to use it.

Let me know if you had these issues and how you solve them. would be interesting to see

Useful links:

I also came across buf.build/blog/connect-a-better-grpc

It should be available now but never got a chance to use it

Collapse
 
ozair0 profile image
Ozair • • Edited

1: Yes currently we don't have the glories of GRPC which is two-directional streams.

2: If you use docker-compose or Kubernetes you can make the envoy proxy use http2 for frontend and backend, will implement that in future maybe for this repo.

3: Yeah, 😅 I have used Cron jobs to trigger the GRPC endpoint every 30min to delete unused streams.

4: For debugging, you have to enable debug mode in envoy to show debug log for every request, there is no other way I have found so far🫤.

Will we have to wait patiently for GRPC-Web to fix these issues!

Collapse
 
jellydn profile image
Dung Huynh •

I also came across buf.build/blog/connect-a-better-grpc

Hi Layton. Just FYI, github.com/jellydn/grpc-demo-monorepo I've implemented the monorepo which is kind of solve some issues which you mentioned above (e.g: proxy with Envoy).

Collapse
 
lwhiteley profile image
Layton Whiteley •

Thanks ill have a look

Thread Thread
 
jellydn profile image
Dung Huynh •

Cool. Let me know if you have any feedback.

Read next

designly profile image

How to Create a Scroll Progress Bar in Next.js/React

Jay @ Designly -

awalias profile image

Prisma + Postgres

awalias -

lucaspereiradesouzat profile image

Autenticação com JWT no Frontend e Backend: Implementando com Node.js e ReactJS (em TypeScript)

Lucas Pereira de Souza -

mrrishimeena profile image

Node.js: Struggling with Winston Logging?

Rishi Kumar -