Next.jsでgrpc-webを使う

By kkoudev

Next.jsでgrpc-webを使う場合の注意点

grpc-webには2つの実装があります。
前回紹介させていただいたgrpc-webの記事はgRPC公式の実装(grpc/grpc-web)なのですが、
この公式の実装については以下の問題点があります。

  1. ブラウザにしか対応していない (＝SSR非対応)
  2. Next.jsやNuxt.jsのようなUniversalアプリケーションフレームワークで使う場合、SSRが使えなくなる
  3. client streamingやbi-directional streamingに非対応
  4. Protocol Buffer生成コードのTypeScript対応が中途半端 (@ts-ignoreで無理矢理 tsc を通しているなど)

要するに公式のgrpc-webは、gRPCとしての実装を全て再現できていません。
client streamingとbi-directional streamingについてはブラウザがストリーミング通信をサポートしていないといった理由があるようですが、
そのような理由をつけてgRPCとしてのいくつかの実装がされていない以上、中途半端なgRPCの実装であるということは残念ながら否めないです。

公式よりも進んだgrpc-web

公式がリリースされる以前より存在する improbable-eng/grpc-web というもう１つのgrpc-webの実装があります。
こちらの実装は公式よりも開発が積極的に行われており、client streamingやbi-directional streamingについてもWebSocketを使って実装されています。
また、ブラウザとSSRの両方に対応しており、Transportという通信形式を切り替えるだけで対応可能となっています。
公式同様Envoy Proxyも利用可能で、TypeScript対応もしっかりされています。
こうなると公式の実装を使うのが馬鹿らしくなってくるくらい扱いやすいです。

そのため現状、grpc-webを扱うなら improbable-eng/grpc-web 一択となります。

まとめ

Next.jsを使う場合でもそれ以外の場合でも、
grpc-webを使う場合は、 improbable-eng/grpc-web を使うようにしましょう。