Web Fundamentals

gRPC-Web Fundamentals: Browser Constraints and Proxy Model

Web Fundamentals Map

Rendering & Browser Architecture

Critical Rendering PathScript Loading Patterns (async/defer)Event Loop Deep DiveJavaScript Module Systems (CJS, ESM, UMD)Dynamic Module Loading (import())Import on InteractionImport on VisibilityBrowser Rendering Pipeline & Layout ThrashingRendering Strategies (CSR, SSR, SSG, ISR)Streaming SSR & Progressive HTMLIslands ArchitectureReact Server ComponentsFramework Reactivity (React, Vue, Svelte, Solid)HTTP/1.1 vs HTTP/2 vs HTTP/3 (QUIC)DNS Resolution & TTL Caching

Performance

Core Web Vitals: LCP, INP, CLSPerformance Optimization Trade-offsCritical Resource PrioritizationCode Splitting & Dynamic ImportsTree Shaking & Dead Code EliminationLazy LoadingResource Hints: Preload, Prefetch & PreconnectText Compression: Gzip & BrotliImage & Video OptimizationAdaptive LoadingList VirtualizationWeb Workers vs Main ThreadMemory Leaks: Detection & PreventionManaging Third-Party ScriptsHow CDNs WorkHTTP Caching Deep DiveService Workers & Offline StrategyPWA Fundamentals

Security

Cross-Site Scripting (XSS)Cross-Site Request Forgery (CSRF)CORS ExplainedCORS Preflight, Credentials & MisconfigurationsContent Security Policy (CSP)Why is HTTPS Secure? (TLS/SSL)Authorization Best PracticesCookie Security & Session Hardening

State & Data Architecture

State Management Guide (Context vs Zustand vs Redux)React Query & Server State CachingData Fetching PatternsCaching StrategiesPagination: Offset vs Cursor-BasedReal-time Communication (WebSocket, SSE, Polling)
mediumWeb Fundamentals

gRPC-Web Fundamentals: Browser Constraints and Proxy Model

Learn the interview-ready mental model, practical trade-offs, and production patterns for this web fundamentals topic.

Topic content

TL;DRgRPC-Web enables browser clients to talk to gRPC backends through a proxy. It adds operational complexity but provides strong typing and efficiency when the backend is already gRPC-based.
High Signal
Google
Meta
Netflix
Agoda
30-Second Answerstart every interview with this

gRPC-Web is a browser-compatible version of gRPC that uses a proxy (usually Envoy) to translate between browser-friendly transport and native gRPC. It brings protobuf contracts and type safety to frontend clients but introduces a new infrastructure layer.

Native gRPC is like speaking directly with the chef in their language. Browsers can't do that. gRPC-Web adds a translator (proxy) who converts your order into the chef's language and brings back the food. You get the benefits of the chef's expertise, but you now have an extra person (and potential point of failure) in the chain.

Browser Client
gRPC-Web (HTTP)
Proxy / Gateway (Envoy)
Native gRPC
Backend Service

1Native gRPC vs gRPC-Web

Native gRPC uses full HTTP/2 features. Browsers cannot open native gRPC channels, so gRPC-Web adds a proxy layer for translation.

2Browser Constraints

Browsers limit low-level networking. gRPC-Web works around this by using standard fetch/XHR + a proxy that handles protocol translation.

3Proxy and Transcoding Model

The proxy (e.g. Envoy) converts gRPC-Web requests to native gRPC and back. This adds latency, observability complexity, and another failure domain.

4Protobuf Contracts & Streaming Tradeoffs

Strong schema-first contracts with code generation. Streaming support is limited compared to native gRPC.

Key Takeaways
  • ✓gRPC-Web enables browser clients to use gRPC backends via a proxy
  • ✓Browsers cannot open native gRPC channels
  • ✓Proxy adds latency, observability, and failure surface
  • ✓Strong protobuf contracts are a major benefit
  • ✓Streaming support is more limited than native gRPC
  • ✓Adoption should be driven by backend alignment
  • ✓Operational complexity is a key consideration
PreviousNext

Topic Guide

On this page