What is gRPC-Web and how does it enable browser clients?
Learn what gRPC-Web is, why browsers need a translating proxy, and how it lets web apps reuse typed .proto contracts for fast, efficient RPC calls.
Expected Interview Answer
gRPC-Web is a JavaScript client library and wire protocol that lets browser applications call gRPC services, because browsers cannot speak native gRPC over HTTP/2 trailers or raw frames directly.
Browsers expose fetch and XHR but give JavaScript no control over HTTP/2 framing or trailing metadata, which native gRPC depends on for status codes. gRPC-Web defines a slightly different, base64- or binary-framed protocol that a proxy (Envoy or the grpc-web proxy) translates to and from native gRPC on its way to the backend. Clients are generated from the same .proto files, so the message contracts stay identical.
- Reuse existing .proto contracts in the browser
- Strongly typed, generated client stubs
- Smaller binary payloads than JSON
- Server-streaming support via the proxy
- Works over standard HTTP/1.1 and HTTP/2
AI Mentor Explanation
A native gRPC call is like two experienced umpires signalling with hand gestures only they fully understand. A junior scorer in the stands cannot read those signals, so a translator on the boundary converts each gesture into plain words the scorer writes down. gRPC-Web is that translator: the browser (the scorer) never learns the raw signalling, and the proxy on the edge turns the pro dialect into something it can record.
Step-by-Step Explanation
Step 1
Define the service
Write the same .proto service and message definitions you use for native gRPC backends.
Step 2
Generate the client
Run protoc with the grpc-web plugin to produce typed JavaScript or TypeScript client stubs.
Step 3
Deploy a proxy
Run Envoy or the grpc-web proxy to translate between the gRPC-Web wire format and native gRPC.
Step 4
Call from the browser
Invoke the generated stub; the library frames the request and handles base64 or binary encoding.
Step 5
Handle responses
Read unary results or subscribe to server-streaming callbacks, reading status from trailing metadata the proxy forwards.
What Interviewer Expects
- Why browsers cannot speak native gRPC
- Role of the Envoy or grpc-web proxy
- Same .proto contract reused for the client
- Which streaming modes are supported
- Difference between binary and text framing
Common Mistakes
- Claiming browsers can call native gRPC directly
- Forgetting the translating proxy is required
- Assuming client-side and bidirectional streaming are fully supported
- Confusing gRPC-Web with plain REST-over-HTTP
Best Answer (HR Friendly)
“gRPC-Web lets websites use the same fast, typed gRPC services that back-end systems use. Because browsers cannot speak gRPC directly, a small proxy sits in the middle and translates, so the web app still gets efficient, contract-based communication.”
Code Example
import { GreeterClient } from './generated/GreeterServiceClientPb'
import { HelloRequest } from './generated/greeter_pb'
const client = new GreeterClient('https://api.example.com')
const request = new HelloRequest()
request.setName('Ada')
client.sayHello(request, {}, (err, response) => {
if (err) {
console.error('gRPC-Web error:', err.message)
return
}
console.log('Reply:', response.getMessage())
})Follow-up Questions
- Why is a proxy like Envoy required for gRPC-Web?
- Which gRPC streaming modes does gRPC-Web support?
- How does gRPC-Web encode status codes without HTTP/2 trailers?
- When would you choose gRPC-Web over a JSON REST API?
MCQ Practice
1. Why can't browsers use native gRPC directly?
Browser JavaScript has no low-level control over HTTP/2 frames or trailing metadata, which native gRPC relies on.
2. What component translates gRPC-Web to native gRPC?
A proxy like Envoy or the grpc-web proxy converts the gRPC-Web wire format to and from native gRPC.
3. Which streaming mode is fully supported by gRPC-Web today?
gRPC-Web supports unary and server-streaming calls; client and bidirectional streaming are limited.
Flash Cards
What is gRPC-Web? — A client library and wire protocol letting browsers call gRPC services through a translating proxy.
Why is a proxy needed? — Browsers can't control HTTP/2 framing/trailers, so a proxy converts gRPC-Web to native gRPC.
What streaming does gRPC-Web support? — Unary and server-streaming; client and bidirectional streaming are limited.
Do you reuse .proto files? — Yes, the same definitions generate the browser client stubs.