Documentation

    Documentation

    Documentation

    Ring Platform Logo

    Завантаження документації...

    Підготовка контенту платформи Ring

    Ring Platform Logo

    Завантаження документації...

    Підготовка контенту платформи Ring

    Ring Platform Logo

    Завантаження документації...

    Підготовка контенту платформи Ring

    1. /
    2. /Performance Optimization

    Updated Jun 22, 20264 min listen

    1. /
    2. /Performance Optimization

    Updated Jun 22, 20264 min listen

    1. /
    2. /Performance Optimization

    Updated Jun 22, 20264 min listen

    Concepts, value, and typical clone scenarios — less code.

    Welcome to Ring
    Quick Reference
    Getting Started
    Prerequisites
    Installation
    First Success Validation
    Next Steps
    Architecture
    Data Model
    Real Time
    Discovery Mutation Sync
    Security
    Backend Services
    k8s-postgres-fcm Mode
    Firebase Integration
    Features
    Authentication
    Email AI-CRM
    Entities
    Opportunities
    Notifications
    Push Notifications with FCM (Ring-Powered)
    Tunnel Protocol
    Wallet & Credit System
    Multi-Vendor Store
    Referral Codes (Refcodes)
    Affiliate & Referral Enablement
    Payments Overview
    PaymentConductor
    SubscriptionConductor
    VideoConductor
    News Module - Digital Newspaper Experience
    Member Blogs
    Public Profile Pages
    Username Reservation System
    Scientific Editor
    Locale System
    Security & Compliance
    NFT Marketplace
    Token Staking System
    Performance Optimization Patterns
    Mobile Experience
    Wallet
    Wallet Security Tips
    API
    Authentication
    Email AI-CRM API
    Entities
    Opportunities
    Messaging API
    Notifications API
    Wallet API
    Store API
    Admin API
    Customization
    Quick Start — Your First Ring Clone
    Customization Guide
    Token Economics Setup
    Payment Gateway Integration
    Reference Ring deployments
    Branding
    Themes
    Web3
    Token launch jurisdictions
    Deployment
    Self-hosted deployment
    Vercel
    Docker
    Monitoring & Analytics
    Performance Optimization
    Backup & Recovery
    Development
    Local Setup
    Code Structure
    Documentation components
    Community tooling
    Ring MCP Server
    Generative Images (ImageConductor)
    Autonomous Newsroom (Grok)
    OSS vs enterprise
    Whitelabel Navigation
    Best Practices
    Workflow
    Code Style
    Performance
    Testing
    Deployment
    Debugging
    Contributing
    MCP
    ring-image-create
    ring-video-create
    Examples
    Quick Start
    White Label
    Real World
    Integrations
    Ethereum wallets (Wagmi v3)

    Quick entry (CTOs · auditors · agents)

    Welcome — mission & audiences
    Quick Reference
    Getting started
    Architecture & Auth.js
    Backend modes & databases (DB_BACKEND_MODE)
    Self-hosted
    Ring MCP Tools
    Ring MCP Server
    Token economics
    Token launch jurisdictions
    Deploy (Docker · k8s)
    Security & compliance reads
    ringdom.org — LegioX homebase
    Source — MIT license (GitHub)

    Concepts, value, and typical clone scenarios — less code.

    Welcome to Ring
    Quick Reference
    Getting Started
    Prerequisites
    Installation
    First Success Validation
    Next Steps
    Architecture
    Data Model
    Real Time
    Discovery Mutation Sync
    Security
    Backend Services
    k8s-postgres-fcm Mode
    Firebase Integration
    Features
    Authentication
    Email AI-CRM
    Entities
    Opportunities
    Notifications
    Push Notifications with FCM (Ring-Powered)
    Tunnel Protocol
    Wallet & Credit System
    Multi-Vendor Store
    Referral Codes (Refcodes)
    Affiliate & Referral Enablement
    Payments Overview
    PaymentConductor
    SubscriptionConductor
    VideoConductor
    News Module - Digital Newspaper Experience
    Member Blogs
    Public Profile Pages
    Username Reservation System
    Scientific Editor
    Locale System
    Security & Compliance
    NFT Marketplace
    Token Staking System
    Performance Optimization Patterns
    Mobile Experience
    Wallet
    Wallet Security Tips
    API
    Authentication
    Email AI-CRM API
    Entities
    Opportunities
    Messaging API
    Notifications API
    Wallet API
    Store API
    Admin API
    Customization
    Quick Start — Your First Ring Clone
    Customization Guide
    Token Economics Setup
    Payment Gateway Integration
    Reference Ring deployments
    Branding
    Themes
    Web3
    Token launch jurisdictions
    Deployment
    Self-hosted deployment
    Vercel
    Docker
    Monitoring & Analytics
    Performance Optimization
    Backup & Recovery
    Development
    Local Setup
    Code Structure
    Documentation components
    Community tooling
    Ring MCP Server
    Generative Images (ImageConductor)
    Autonomous Newsroom (Grok)
    OSS vs enterprise
    Whitelabel Navigation
    Best Practices
    Workflow
    Code Style
    Performance
    Testing
    Deployment
    Debugging
    Contributing
    MCP
    ring-image-create
    ring-video-create
    Examples
    Quick Start
    White Label
    Real World
    Integrations
    Ethereum wallets (Wagmi v3)

    Quick entry (CTOs · auditors · agents)

    Welcome — mission & audiences
    Quick Reference
    Getting started
    Architecture & Auth.js
    Backend modes & databases (DB_BACKEND_MODE)
    Self-hosted
    Ring MCP Tools
    Ring MCP Server
    Token economics
    Token launch jurisdictions
    Deploy (Docker · k8s)
    Security & compliance reads
    ringdom.org — LegioX homebase
    Source — MIT license (GitHub)

    Concepts, value, and typical clone scenarios — less code.

    Welcome to Ring
    Quick Reference
    Getting Started
    Prerequisites
    Installation
    First Success Validation
    Next Steps
    Architecture
    Data Model
    Real Time
    Discovery Mutation Sync
    Security
    Backend Services
    k8s-postgres-fcm Mode
    Firebase Integration
    Features
    Authentication
    Email AI-CRM
    Entities
    Opportunities
    Notifications
    Push Notifications with FCM (Ring-Powered)
    Tunnel Protocol
    Wallet & Credit System
    Multi-Vendor Store
    Referral Codes (Refcodes)
    Affiliate & Referral Enablement
    Payments Overview
    PaymentConductor
    SubscriptionConductor
    VideoConductor
    News Module - Digital Newspaper Experience
    Member Blogs
    Public Profile Pages
    Username Reservation System
    Scientific Editor
    Locale System
    Security & Compliance
    NFT Marketplace
    Token Staking System
    Performance Optimization Patterns
    Mobile Experience
    Wallet
    Wallet Security Tips
    API
    Authentication
    Email AI-CRM API
    Entities
    Opportunities
    Messaging API
    Notifications API
    Wallet API
    Store API
    Admin API
    Customization
    Quick Start — Your First Ring Clone
    Customization Guide
    Token Economics Setup
    Payment Gateway Integration
    Reference Ring deployments
    Branding
    Themes
    Web3
    Token launch jurisdictions
    Deployment
    Self-hosted deployment
    Vercel
    Docker
    Monitoring & Analytics
    Performance Optimization
    Backup & Recovery
    Development
    Local Setup
    Code Structure
    Documentation components
    Community tooling
    Ring MCP Server
    Generative Images (ImageConductor)
    Autonomous Newsroom (Grok)
    OSS vs enterprise
    Whitelabel Navigation
    Best Practices
    Workflow
    Code Style
    Performance
    Testing
    Deployment
    Debugging
    Contributing
    MCP
    ring-image-create
    ring-video-create
    Examples
    Quick Start
    White Label
    Real World
    Integrations
    Ethereum wallets (Wagmi v3)

    Quick entry (CTOs · auditors · agents)

    Welcome — mission & audiences
    Quick Reference
    Getting started
    Architecture & Auth.js
    Backend modes & databases (DB_BACKEND_MODE)
    Self-hosted
    Ring MCP Tools
    Ring MCP Server
    Token economics
    Token launch jurisdictions
    Deploy (Docker · k8s)
    Security & compliance reads
    ringdom.org — LegioX homebase
    Source — MIT license (GitHub)
    Docs
    Deployment
    Docs
    Deployment
    Docs
    Deployment

    Performance Optimization

    Filter with Founder / Developer in the docs sidebar. This page replaces legacy fiction ($2.8M revenue, invented dashboard examples, fake Lighthouse SLAs). Patterns below are traced to next.config.mjs, lib/cached-data.ts, lib/web-vitals.tsx, and production Docker lessons.

    Ring Platform targets fast first paint (React 19 Server Components by default), fresh marketplace lists (cache tags + mutation sync), and measurable UX (Core Web Vitals ingest). Performance is a deploy concern — build timeouts, SSR traps, and cache invalidation — not only frontend polish.

    Performance stack (verified)

    LayerMechanismWhere
    FrameworkNext.js 16 App Router, cacheComponents: truenext.config.mjs
    List cachingunstable_cache + revalidateTaglib/cached-data.ts
    Request dedupReact.cache() on server readslib/services/firebase-service-manager.ts, actions
    Post-write reads30s in-process entity cacheDatabaseService EntityCache
    Heavy client UIdynamic(..., { ssr: false })components/docs/mdx-heavy-components.tsx
    Docs code blocksServer Shiki (highlightCodeToHtml)components/docs/code.tsx
    Imagesnext/image WebP/AVIFnext.config.mjs → images.formats
    UX metricsweb-vitals → /api/analytics/web-vitalslib/web-vitals.tsx
    Resource hintsprefetchDNS / preinit scriptscontexts/app-context.tsx

    Why performance matters for your clone

    Slow opportunity and store pages directly hit conversion: members abandon checkout, vendors see empty dashboards, and AI matcher notifications feel “late” even when data is correct.

    What founders can optimize without code

    Measure first

    Admin → Analytics shows Web Vitals medians and client errors — establish a baseline before rebranding or adding heavy hero media.

    Image discipline

    Product and entity images should use Blob/CDN URLs via next/image — oversized PNG heroes are the most common LCP regression on new clones.

    List freshness

    After vendors post listings, caches must invalidate — if lists look stale, fix sync before scaling servers.

    Caching and freshness

    List page cache lifecycle

    Role-scoped list cache

    Mutation services call syncOpportunityDiscovery / syncEntityDiscovery — see Discovery mutation sync. Never cache a write path; always invalidate after CRUD.

    Server read deduplication

    Wrap expensive server fetches with cache() from react so parallel Server Components share one DB round-trip per request (see getCachedDocument in lib/services/firebase-service-manager.ts).

    Read-after-write (30s)

    DatabaseService keeps a short-lived EntityCache (30s TTL) so creates are visible to immediate reads in the same process — not a substitute for revalidateTag.

    React 19 patterns in production code

    PatternExample location
    useActionStatefeatures/reviews/components/review-form.tsx
    useOptimistic,

    Related documentation

    Monitoring

    Health checks, Web Vitals API, admin dashboard.

    Docker deployment

    Mermaid SSR incident history and health probes.

    Discovery mutation sync

    Cache invalidation after entity/opportunity CRUD.

    Architecture hub

    System map — RSC, Tunnel, Postgres-primary default.

    Performance Optimization

    Filter with Founder / Developer in the docs sidebar. This page replaces legacy fiction ($2.8M revenue, invented dashboard examples, fake Lighthouse SLAs). Patterns below are traced to next.config.mjs, lib/cached-data.ts, lib/web-vitals.tsx, and production Docker lessons.

    Ring Platform targets fast first paint (React 19 Server Components by default), fresh marketplace lists (cache tags + mutation sync), and measurable UX (Core Web Vitals ingest). Performance is a deploy concern — build timeouts, SSR traps, and cache invalidation — not only frontend polish.

    Performance stack (verified)

    LayerMechanismWhere
    FrameworkNext.js 16 App Router, cacheComponents: truenext.config.mjs
    List cachingunstable_cache + revalidateTaglib/cached-data.ts
    Request dedupReact.cache() on server readslib/services/firebase-service-manager.ts, actions
    Post-write reads30s in-process entity cacheDatabaseService EntityCache
    Heavy client UIdynamic(..., { ssr: false })components/docs/mdx-heavy-components.tsx
    Docs code blocksServer Shiki (highlightCodeToHtml)components/docs/code.tsx
    Imagesnext/image WebP/AVIFnext.config.mjs → images.formats
    UX metricsweb-vitals → /api/analytics/web-vitalslib/web-vitals.tsx
    Resource hintsprefetchDNS / preinit scriptscontexts/app-context.tsx

    Why performance matters for your clone

    Slow opportunity and store pages directly hit conversion: members abandon checkout, vendors see empty dashboards, and AI matcher notifications feel “late” even when data is correct.

    What founders can optimize without code

    Measure first

    Admin → Analytics shows Web Vitals medians and client errors — establish a baseline before rebranding or adding heavy hero media.

    Image discipline

    Product and entity images should use Blob/CDN URLs via next/image — oversized PNG heroes are the most common LCP regression on new clones.

    List freshness

    After vendors post listings, caches must invalidate — if lists look stale, fix sync before scaling servers.

    Caching and freshness

    List page cache lifecycle

    Role-scoped list cache

    Mutation services call syncOpportunityDiscovery / syncEntityDiscovery — see Discovery mutation sync. Never cache a write path; always invalidate after CRUD.

    Server read deduplication

    Wrap expensive server fetches with cache() from react so parallel Server Components share one DB round-trip per request (see getCachedDocument in lib/services/firebase-service-manager.ts).

    Read-after-write (30s)

    DatabaseService keeps a short-lived EntityCache (30s TTL) so creates are visible to immediate reads in the same process — not a substitute for revalidateTag.

    React 19 patterns in production code

    PatternExample location
    useActionStatefeatures/reviews/components/review-form.tsx
    useOptimistic,

    Related documentation

    Monitoring

    Health checks, Web Vitals API, admin dashboard.

    Docker deployment

    Mermaid SSR incident history and health probes.

    Discovery mutation sync

    Cache invalidation after entity/opportunity CRUD.

    Architecture hub

    System map — RSC, Tunnel, Postgres-primary default.

    Performance Optimization

    Filter with Founder / Developer in the docs sidebar. This page replaces legacy fiction ($2.8M revenue, invented dashboard examples, fake Lighthouse SLAs). Patterns below are traced to next.config.mjs, lib/cached-data.ts, lib/web-vitals.tsx, and production Docker lessons.

    Ring Platform targets fast first paint (React 19 Server Components by default), fresh marketplace lists (cache tags + mutation sync), and measurable UX (Core Web Vitals ingest). Performance is a deploy concern — build timeouts, SSR traps, and cache invalidation — not only frontend polish.

    Performance stack (verified)

    LayerMechanismWhere
    FrameworkNext.js 16 App Router, cacheComponents: truenext.config.mjs
    List cachingunstable_cache + revalidateTaglib/cached-data.ts
    Request dedupReact.cache() on server readslib/services/firebase-service-manager.ts, actions
    Post-write reads30s in-process entity cacheDatabaseService EntityCache
    Heavy client UIdynamic(..., { ssr: false })components/docs/mdx-heavy-components.tsx
    Docs code blocksServer Shiki (highlightCodeToHtml)components/docs/code.tsx
    Imagesnext/image WebP/AVIFnext.config.mjs → images.formats
    UX metricsweb-vitals → /api/analytics/web-vitalslib/web-vitals.tsx
    Resource hintsprefetchDNS / preinit scriptscontexts/app-context.tsx

    Why performance matters for your clone

    Slow opportunity and store pages directly hit conversion: members abandon checkout, vendors see empty dashboards, and AI matcher notifications feel “late” even when data is correct.

    What founders can optimize without code

    Measure first

    Admin → Analytics shows Web Vitals medians and client errors — establish a baseline before rebranding or adding heavy hero media.

    Image discipline

    Product and entity images should use Blob/CDN URLs via next/image — oversized PNG heroes are the most common LCP regression on new clones.

    List freshness

    After vendors post listings, caches must invalidate — if lists look stale, fix sync before scaling servers.

    Caching and freshness

    List page cache lifecycle

    Role-scoped list cache

    Mutation services call syncOpportunityDiscovery / syncEntityDiscovery — see Discovery mutation sync. Never cache a write path; always invalidate after CRUD.

    Server read deduplication

    Wrap expensive server fetches with cache() from react so parallel Server Components share one DB round-trip per request (see getCachedDocument in lib/services/firebase-service-manager.ts).

    Read-after-write (30s)

    DatabaseService keeps a short-lived EntityCache (30s TTL) so creates are visible to immediate reads in the same process — not a substitute for revalidateTag.

    React 19 patterns in production code

    PatternExample location
    useActionStatefeatures/reviews/components/review-form.tsx
    useOptimistic,

    Related documentation

    Monitoring

    Health checks, Web Vitals API, admin dashboard.

    Docker deployment

    Mermaid SSR incident history and health probes.

    Discovery mutation sync

    Cache invalidation after entity/opportunity CRUD.

    Architecture hub

    System map — RSC, Tunnel, Postgres-primary default.

    Locale scope

    Fewer active locales (NEXT_PUBLIC_SUPPORTED_LOCALES) reduces build surface and static param work at deploy time.

    Web Vitals targets (Google thresholds used in code)

    MetricGoodNeeds work
    LCP≤ 2.5s> 4s
    INP≤ 200ms> 500ms
    CLS≤ 0.1> 0.25
    TTFB≤ 800ms> 1.8s

    Ratings come from PERFORMANCE_THRESHOLDS in lib/web-vitals.tsx. Poor ratings trigger immediate POST to analytics.

    Treat performance as release criteria for major clone launches: run Lighthouse on /, /opportunities, and /store after deploy — compare with Admin analytics the following week.

    hooks/use-realtime.ts
    hooks/use-realtime-opportunities.ts
    Server Actions + revalidatePathapp/_actions/*.ts

    Prefer Server Components for list/detail shells; isolate 'use client' to forms, tunnel, wallet, and viz widgets.

    Deploy and build pitfalls

    1. 1

      Do not SSR heavy viz on the server

      Docs and marketing widgets load via dynamic(..., { ssr: false }) in mdx-heavy-components.tsx. Top-level Mermaid/Shiki on the server caused 30s loads and 503s in production — see Docker deployment.

    2. 2

      Docs <Code> is async server Shiki

      components/docs/code.tsx calls highlightCodeToHtml once per block — do not add client-side highlighters on the same page.

    3. 3

      Build timeout budget

      staticPageGenerationTimeout: 180 in next.config.mjs — large doc trees or many locales need incremental static generation discipline; trim scanDocsStaticParams scope if builds exceed CI limits.

    4. 4

      Standalone output (optional)

      Set NEXT_OUTPUT_STANDALONE=1 for container images that trace server bundles — default OSS dev build omits standalone.

    Image optimization

    next.config.mjs enables WebP/AVIF and remote patterns for Google avatars, Vercel Blob, and cdn.ring-platform.org. Add clone-specific hostnames to images.remotePatterns when onboarding a new CDN.

    Measuring regressions

    • Ingest: WebVitalsProvider in components/providers/app-client-shell.tsx
    • Storage: migration 017_ring_analytics_schema.sql
    • Query: Admin analytics or GET /api/analytics/web-vitals?scope=platform (admin)
    • Disable writes: ANALYTICS_DISABLE_STORAGE=true for load tests

    Full monitoring reference: Monitoring & analytics.

    Deeper developer guide

    Implementation patterns (Firebase cache(), static generation, edge notes) live in Development: Performance and Features: Performance patterns — verify examples against postgres-primary clones before copying Firebase-specific snippets.

    Locale scope

    Fewer active locales (NEXT_PUBLIC_SUPPORTED_LOCALES) reduces build surface and static param work at deploy time.

    Web Vitals targets (Google thresholds used in code)

    MetricGoodNeeds work
    LCP≤ 2.5s> 4s
    INP≤ 200ms> 500ms
    CLS≤ 0.1> 0.25
    TTFB≤ 800ms> 1.8s

    Ratings come from PERFORMANCE_THRESHOLDS in lib/web-vitals.tsx. Poor ratings trigger immediate POST to analytics.

    Treat performance as release criteria for major clone launches: run Lighthouse on /, /opportunities, and /store after deploy — compare with Admin analytics the following week.

    hooks/use-realtime.ts
    hooks/use-realtime-opportunities.ts
    Server Actions + revalidatePathapp/_actions/*.ts

    Prefer Server Components for list/detail shells; isolate 'use client' to forms, tunnel, wallet, and viz widgets.

    Deploy and build pitfalls

    1. 1

      Do not SSR heavy viz on the server

      Docs and marketing widgets load via dynamic(..., { ssr: false }) in mdx-heavy-components.tsx. Top-level Mermaid/Shiki on the server caused 30s loads and 503s in production — see Docker deployment.

    2. 2

      Docs <Code> is async server Shiki

      components/docs/code.tsx calls highlightCodeToHtml once per block — do not add client-side highlighters on the same page.

    3. 3

      Build timeout budget

      staticPageGenerationTimeout: 180 in next.config.mjs — large doc trees or many locales need incremental static generation discipline; trim scanDocsStaticParams scope if builds exceed CI limits.

    4. 4

      Standalone output (optional)

      Set NEXT_OUTPUT_STANDALONE=1 for container images that trace server bundles — default OSS dev build omits standalone.

    Image optimization

    next.config.mjs enables WebP/AVIF and remote patterns for Google avatars, Vercel Blob, and cdn.ring-platform.org. Add clone-specific hostnames to images.remotePatterns when onboarding a new CDN.

    Measuring regressions

    • Ingest: WebVitalsProvider in components/providers/app-client-shell.tsx
    • Storage: migration 017_ring_analytics_schema.sql
    • Query: Admin analytics or GET /api/analytics/web-vitals?scope=platform (admin)
    • Disable writes: ANALYTICS_DISABLE_STORAGE=true for load tests

    Full monitoring reference: Monitoring & analytics.

    Deeper developer guide

    Implementation patterns (Firebase cache(), static generation, edge notes) live in Development: Performance and Features: Performance patterns — verify examples against postgres-primary clones before copying Firebase-specific snippets.

    Locale scope

    Fewer active locales (NEXT_PUBLIC_SUPPORTED_LOCALES) reduces build surface and static param work at deploy time.

    Web Vitals targets (Google thresholds used in code)

    MetricGoodNeeds work
    LCP≤ 2.5s> 4s
    INP≤ 200ms> 500ms
    CLS≤ 0.1> 0.25
    TTFB≤ 800ms> 1.8s

    Ratings come from PERFORMANCE_THRESHOLDS in lib/web-vitals.tsx. Poor ratings trigger immediate POST to analytics.

    Treat performance as release criteria for major clone launches: run Lighthouse on /, /opportunities, and /store after deploy — compare with Admin analytics the following week.

    hooks/use-realtime.ts
    hooks/use-realtime-opportunities.ts
    Server Actions + revalidatePathapp/_actions/*.ts

    Prefer Server Components for list/detail shells; isolate 'use client' to forms, tunnel, wallet, and viz widgets.

    Deploy and build pitfalls

    1. 1

      Do not SSR heavy viz on the server

      Docs and marketing widgets load via dynamic(..., { ssr: false }) in mdx-heavy-components.tsx. Top-level Mermaid/Shiki on the server caused 30s loads and 503s in production — see Docker deployment.

    2. 2

      Docs <Code> is async server Shiki

      components/docs/code.tsx calls highlightCodeToHtml once per block — do not add client-side highlighters on the same page.

    3. 3

      Build timeout budget

      staticPageGenerationTimeout: 180 in next.config.mjs — large doc trees or many locales need incremental static generation discipline; trim scanDocsStaticParams scope if builds exceed CI limits.

    4. 4

      Standalone output (optional)

      Set NEXT_OUTPUT_STANDALONE=1 for container images that trace server bundles — default OSS dev build omits standalone.

    Image optimization

    next.config.mjs enables WebP/AVIF and remote patterns for Google avatars, Vercel Blob, and cdn.ring-platform.org. Add clone-specific hostnames to images.remotePatterns when onboarding a new CDN.

    Measuring regressions

    • Ingest: WebVitalsProvider in components/providers/app-client-shell.tsx
    • Storage: migration 017_ring_analytics_schema.sql
    • Query: Admin analytics or GET /api/analytics/web-vitals?scope=platform (admin)
    • Disable writes: ANALYTICS_DISABLE_STORAGE=true for load tests

    Full monitoring reference: Monitoring & analytics.

    Deeper developer guide

    Implementation patterns (Firebase cache(), static generation, edge notes) live in Development: Performance and Features: Performance patterns — verify examples against postgres-primary clones before copying Firebase-specific snippets.