UCD.js Docs

Web

Architecture notes for apps/web

apps/web is the end-user web interface for browsing Unicode data and store-backed content.

Role

  • Renders the public frontend with TanStack Router and React Query.
  • Uses server functions to talk to ucd-store from the server side.
  • Bridges user navigation, SSR context, and data access without exposing store internals directly to the browser.

Mental Model

The web app splits into two halves:

  • client-side routing, React Query, and view composition
  • server-side functions that create and cache HTTP ucd-store instances

That keeps file access on the server while still giving the browser a modern router/query model.

Request Flows

App bootstrap

QueryClientgetRouter()server.tsQueryClientgetRouter()server.tsBrowserrequest pageinject request context { apiBaseUrl }create TanStack routercreate QueryClient and wire SSR integrationrouted app shellBrowser

Server-side store access

hosted storecreateHTTPUCDStore()storeCachehosted storecreateHTTPUCDStore()storeCachealt[cached store exists][cache miss]server functionlookup store by apiBaseUrlexisting promisecreateHTTPUCDStore({ baseUrl, verify: false })memoized promiseuse store.files.list/get(..., allowApi: true)file data or errorserver function

listVersionFiles and getVersionFile

cached HTTP storecreateServerFn handlerReact Querycached HTTP storecreateServerFn handlerReact Queryalt[store returns error][success]Browserrun queryOptions()invoke server functionfiles.list() or files.get()errorthrow errordataresultcached UI dataBrowser

Design Notes

  • The app prefers ucd-store over raw client calls for file-oriented reads.
  • Store instances are cached per base URL to avoid rebuilding them on every server-function call.
  • The browser does not need direct knowledge of store topology or file-serving details.
  • verify: false keeps remote read access cheap for request-time usage.

Testing Use

  • server-function success and error behavior
  • router/query integration with SSR context
  • store caching per apiBaseUrl
  • page flows that depend on file list and file content resolution

On this page