GitHub's Client-Side Architecture for Instant Navigation
GitHub re-engineered its client-side architecture for GitHub Issues to significantly improve navigation performance, moving more work to the browser. This involved implementing client-side caching, predictive prefetching, and service workers, resulting in a substantial increase in instant navigation experiences. The changes address common challenges in large web applications by reducing network dependencies and enabling a local-first rendering approach.
Read original on InfoQ ArchitectureGitHub's engineering team tackled the challenge of perceived latency in its Issues product by shifting from a server-centric to a more client-side focused architecture. The goal was to minimize delays caused by repeated network requests and client initialization, especially in workflows where users frequently navigate between issues and related views.
Key Architectural Components
- Client-Side Caching: Utilizes multiple storage layers, including IndexedDB for persistent storage and in-memory caches for data frequently accessed within a session. This enables a local-first approach, rendering available data immediately from the browser.
- Stale-While-Revalidate: The caching model employs a stale-while-revalidate strategy. This means users see locally cached data instantly, while background processes asynchronously fetch newer information to update the cache.
- Predictive Prefetching: The system uses navigation patterns to anticipate likely required data and pre-populates relevant cache entries, enhancing the effectiveness of the cache.
- Service Workers: These intercept browser requests, serving cached resources immediately when available. For unavailable or stale data, requests proceed through the normal backend path, with background updates synchronizing newer information.
Trade-offs and Design Philosophy
A crucial architectural decision was balancing responsiveness with data freshness. GitHub opted to display some content immediately from the cache, even if it might be slightly stale, and then update it asynchronously. This approach prioritizes reducing user waiting time while ensuring eventual consistency with backend systems. The article highlights that "latency isn [GitHub Increased Instant Navigation from 4% to 22% by Rethinking Client Side Architecture - InfoQ](https://www.infoq.com/news/2024/07/github-client-side-architecture/)
Key Takeaway for System Designers
This case study demonstrates the power of shifting computation closer to the user to improve perceived performance. While useful for read-heavy applications like issue trackers, applying prefetching and aggressive caching patterns requires careful consideration of data consistency for write-heavy applications. The key is to distinguish between shell-first render + cache-hit hydration, which is broadly reusable, and prefetching itself, which is more context-dependent.