Концепції, цінність і типові сценарії
Концепції, цінність і типові сценарії
Preparing Ring content
Preparing Ring content
Preparing Ring content
Фільтруйте за Засновник / Розробник у боковому меню документації. Ця сторінка замінює старий вигаданий контент (наприклад, $2.8M revenue, вигадані приклади dashboard, фейкові SLA Lighthouse). Вказані нижче патерни підтверджені у next.config.mjs, lib/cached-data.ts, components/providers/web-vitals-provider.tsx, features/analytics/lib/analytics-db.ts, а також актуальними висновками з деплою в Docker.
Ring Platform фокусується на швидкому першому рендері (React 19 Server Components за замовчуванням), завжди актуальних списках на маркетплейсі (теги кешу + синхронізація мутацій) та вимірюваному UX (інжест Core Web Vitals). Продуктивність — це питання деплою: тайм-аути білду, SSR-підводні камені та інвалідація кешу важливі не менше, ніж фронт-ендова "поліровка".
| Рівень | Механізм | Де реалізовано |
|---|---|---|
| Фреймворк | Next.js 16 App Router, cacheComponents: true | next.config.mjs |
| Кешування списків | unstable_cache + revalidateTag | lib/cached-data.ts |
| Дедуплікація запитів | React.cache() на серверних читаннях | lib/services/firebase-service-manager.ts, actions |
| read-after-write | 30с процесний кеш сутності | DatabaseService EntityCache |
| Важкий клієнтський UI | dynamic(..., { ssr: false }) | components/docs/mdx-heavy-components.tsx |
| Код у документації | Серверний Shiki (highlightCodeToHtml) | components/docs/code.tsx |
| Зображення | next/image WebP/AVIF | next.config.mjs → images.formats |
| UX-метрики | useReportWebVitals → POST /api/analytics/web-vitals | components/providers/web-vitals-provider.tsx, features/analytics/lib/analytics-db.ts |
| Ресурсні підказки | prefetchDNS / preinit скрипти | contexts/app-context.tsx |
Повільні сторінки опортюніті та стору безпосередньо б'ють по конверсіях: користувачі залишають кошик, продавці бачать порожні дашборди, AI-меджер надсилає сповіщення “зі запізненням”, навіть коли дані актуальні.
В адмінці → Аналітика показує медіани Web Vitals і клієнтські помилки — зафіксуйте базову лінію до ребрендингу або додавання важких hero‑зображень.
Зображення товарів та сутностей — тільки Blob/CDN URL через next/image. Перегруз PNG-графіки hero найчастіше псують LCP у нових клонах.
Після публікації оголошень кеші повинні інвалідовуватись — якщо списки застарілі, налагодьте синхронізацію перед масштабуванням серверів.
Наступний крок: health checks, Web Vitals API і аналітика для адмінів.
За тим же флоу: інциденти мермейд SSR та health-проби.
Детальніше: інвалідація кешу після CRUD по сутностях або опортюніті.
До матеріалів: патерни cache(), SSG і edge-примітки для розробників.
Фільтруйте за Засновник / Розробник у боковому меню документації. Ця сторінка замінює старий вигаданий контент (наприклад, $2.8M revenue, вигадані приклади dashboard, фейкові SLA Lighthouse). Вказані нижче патерни підтверджені у next.config.mjs, lib/cached-data.ts, components/providers/web-vitals-provider.tsx, features/analytics/lib/analytics-db.ts, а також актуальними висновками з деплою в Docker.
Ring Platform фокусується на швидкому першому рендері (React 19 Server Components за замовчуванням), завжди актуальних списках на маркетплейсі (теги кешу + синхронізація мутацій) та вимірюваному UX (інжест Core Web Vitals). Продуктивність — це питання деплою: тайм-аути білду, SSR-підводні камені та інвалідація кешу важливі не менше, ніж фронт-ендова "поліровка".
| Рівень | Механізм | Де реалізовано |
|---|---|---|
| Фреймворк | Next.js 16 App Router, cacheComponents: true | next.config.mjs |
| Кешування списків | unstable_cache + revalidateTag | lib/cached-data.ts |
| Дедуплікація запитів | React.cache() на серверних читаннях | lib/services/firebase-service-manager.ts, actions |
| read-after-write | 30с процесний кеш сутності | DatabaseService EntityCache |
| Важкий клієнтський UI | dynamic(..., { ssr: false }) | components/docs/mdx-heavy-components.tsx |
| Код у документації | Серверний Shiki (highlightCodeToHtml) | components/docs/code.tsx |
| Зображення | next/image WebP/AVIF | next.config.mjs → images.formats |
| UX-метрики | useReportWebVitals → POST /api/analytics/web-vitals | components/providers/web-vitals-provider.tsx, features/analytics/lib/analytics-db.ts |
| Ресурсні підказки | prefetchDNS / preinit скрипти | contexts/app-context.tsx |
Повільні сторінки опортюніті та стору безпосередньо б'ють по конверсіях: користувачі залишають кошик, продавці бачать порожні дашборди, AI-меджер надсилає сповіщення “зі запізненням”, навіть коли дані актуальні.
В адмінці → Аналітика показує медіани Web Vitals і клієнтські помилки — зафіксуйте базову лінію до ребрендингу або додавання важких hero‑зображень.
Зображення товарів та сутностей — тільки Blob/CDN URL через next/image. Перегруз PNG-графіки hero найчастіше псують LCP у нових клонах.
Після публікації оголошень кеші повинні інвалідовуватись — якщо списки застарілі, налагодьте синхронізацію перед масштабуванням серверів.
Наступний крок: health checks, Web Vitals API і аналітика для адмінів.
За тим же флоу: інциденти мермейд SSR та health-проби.
Детальніше: інвалідація кешу після CRUD по сутностях або опортюніті.
До матеріалів: патерни cache(), SSG і edge-примітки для розробників.
Фільтруйте за Засновник / Розробник у боковому меню документації. Ця сторінка замінює старий вигаданий контент (наприклад, $2.8M revenue, вигадані приклади dashboard, фейкові SLA Lighthouse). Вказані нижче патерни підтверджені у next.config.mjs, lib/cached-data.ts, components/providers/web-vitals-provider.tsx, features/analytics/lib/analytics-db.ts, а також актуальними висновками з деплою в Docker.
Ring Platform фокусується на швидкому першому рендері (React 19 Server Components за замовчуванням), завжди актуальних списках на маркетплейсі (теги кешу + синхронізація мутацій) та вимірюваному UX (інжест Core Web Vitals). Продуктивність — це питання деплою: тайм-аути білду, SSR-підводні камені та інвалідація кешу важливі не менше, ніж фронт-ендова "поліровка".
| Рівень | Механізм | Де реалізовано |
|---|---|---|
| Фреймворк | Next.js 16 App Router, cacheComponents: true | next.config.mjs |
| Кешування списків | unstable_cache + revalidateTag | lib/cached-data.ts |
| Дедуплікація запитів | React.cache() на серверних читаннях | lib/services/firebase-service-manager.ts, actions |
| read-after-write | 30с процесний кеш сутності | DatabaseService EntityCache |
| Важкий клієнтський UI | dynamic(..., { ssr: false }) | components/docs/mdx-heavy-components.tsx |
| Код у документації | Серверний Shiki (highlightCodeToHtml) | components/docs/code.tsx |
| Зображення | next/image WebP/AVIF | next.config.mjs → images.formats |
| UX-метрики | useReportWebVitals → POST /api/analytics/web-vitals | components/providers/web-vitals-provider.tsx, features/analytics/lib/analytics-db.ts |
| Ресурсні підказки | prefetchDNS / preinit скрипти | contexts/app-context.tsx |
Повільні сторінки опортюніті та стору безпосередньо б'ють по конверсіях: користувачі залишають кошик, продавці бачать порожні дашборди, AI-меджер надсилає сповіщення “зі запізненням”, навіть коли дані актуальні.
В адмінці → Аналітика показує медіани Web Vitals і клієнтські помилки — зафіксуйте базову лінію до ребрендингу або додавання важких hero‑зображень.
Зображення товарів та сутностей — тільки Blob/CDN URL через next/image. Перегруз PNG-графіки hero найчастіше псують LCP у нових клонах.
Після публікації оголошень кеші повинні інвалідовуватись — якщо списки застарілі, налагодьте синхронізацію перед масштабуванням серверів.
Наступний крок: health checks, Web Vitals API і аналітика для адмінів.
За тим же флоу: інциденти мермейд SSR та health-проби.
Детальніше: інвалідація кешу після CRUD по сутностях або опортюніті.
До матеріалів: патерни cache(), SSG і edge-примітки для розробників.
| Метрика | Добре (≤) | Погано (>) |
|---|---|---|
| LCP | 2.5s | 4s |
| INP | 200ms | 500ms |
| CLS | 0.1 | 0.25 |
| TTFB | 800ms | 1.8s |
| FCP | 1.8s | 3s |
| FID | 100ms | 300ms |
Пороги використовуються у ratingForMetric із features/analytics/lib/analytics-db.ts. Клієнт надсилає рейтинг кожної метрики з next/web-vitals (буферизує і POSTить всі разом на /api/analytics/web-vitals).
Ставте продуктивність як критерій релізу для нових запусків: пройдіться Lighthouse по /, /opportunities і /store одразу після деплою — тиждень потому звірте з аналітикою в Адмінці.
useActionState |
features/reviews/components/review-form.tsx |
useOptimistic | hooks/use-realtime.ts, hooks/use-realtime-opportunities.ts |
Server Actions + revalidatePath | app/_actions/*.ts |
Використовуйте Server Components для контейнерів списків і сутностей; 'use client' залишайте тільки для форм, тунеля, гаманця, та візуалізацій.
Документаційні і маркетингові графіки підтягуються через dynamic(..., { ssr: false }) у mdx-heavy-components.tsx. Верхньорівневі Mermaid або Shiki сервером викликали 30 секунд завантаження та 503 у production — див. Docker deployment.
<Code> у документації — асинхронний серверний Shikicomponents/docs/code.tsx використовує highlightCodeToHtml на кожному блоці — не додавайте на ту ж сторінку клієнтські хайлайтери.
staticPageGenerationTimeout: 180 у next.config.mjs — великі дерева документації чи багато мов вимагають акуратної інкрементальної генерації: зменшіть охоплення у scanDocsStaticParams, якщо білди не встигають в CI.
next.config.mjs задає output: 'standalone' із outputFileTracingRoot, serverExternalPackages (Firebase, Auth.js, Solana, nodemailer) і outputFileTracingIncludes (i18n, локалі, доки, ring-config, server.ts): контейнерні іміджі містять лише потрібні серверні бандли.
У next.config.mjs: WebP/AVIF (images.formats) та remote patterns для Google avatars, Google Fonts, Vercel Blob і cdn.ring-platform.org; специфічні клієнтські патерни — через collectCloneImageRemotePatterns. Додавайте нові CDN хости до images.remotePatterns при підключенні нового клону.
WebVitalsProvider (components/providers/web-vitals-provider.tsx), вставлений у app-client-shell.tsx017_ring_analytics_schema.sqlGET /api/analytics/web-vitals?scope=platform (admin)ANALYTICS_DISABLE_STORAGE=true для навантажувальних тестівПовний огляд інструментів: Моніторинг і аналітика.
Реалізаційні патерни (Firebase cache(), статична генерація, edge-прийоми) — у Розробка: продуктивність та Фічі: продуктивність. Перед копіюванням зразків із cache()/Firebase завжди звіряйте приклади з тими, що перевірені на postgres‑primary-клонах.
| Метрика | Добре (≤) | Погано (>) |
|---|---|---|
| LCP | 2.5s | 4s |
| INP | 200ms | 500ms |
| CLS | 0.1 | 0.25 |
| TTFB | 800ms | 1.8s |
| FCP | 1.8s | 3s |
| FID | 100ms | 300ms |
Пороги використовуються у ratingForMetric із features/analytics/lib/analytics-db.ts. Клієнт надсилає рейтинг кожної метрики з next/web-vitals (буферизує і POSTить всі разом на /api/analytics/web-vitals).
Ставте продуктивність як критерій релізу для нових запусків: пройдіться Lighthouse по /, /opportunities і /store одразу після деплою — тиждень потому звірте з аналітикою в Адмінці.
useActionState |
features/reviews/components/review-form.tsx |
useOptimistic | hooks/use-realtime.ts, hooks/use-realtime-opportunities.ts |
Server Actions + revalidatePath | app/_actions/*.ts |
Використовуйте Server Components для контейнерів списків і сутностей; 'use client' залишайте тільки для форм, тунеля, гаманця, та візуалізацій.
Документаційні і маркетингові графіки підтягуються через dynamic(..., { ssr: false }) у mdx-heavy-components.tsx. Верхньорівневі Mermaid або Shiki сервером викликали 30 секунд завантаження та 503 у production — див. Docker deployment.
<Code> у документації — асинхронний серверний Shikicomponents/docs/code.tsx використовує highlightCodeToHtml на кожному блоці — не додавайте на ту ж сторінку клієнтські хайлайтери.
staticPageGenerationTimeout: 180 у next.config.mjs — великі дерева документації чи багато мов вимагають акуратної інкрементальної генерації: зменшіть охоплення у scanDocsStaticParams, якщо білди не встигають в CI.
next.config.mjs задає output: 'standalone' із outputFileTracingRoot, serverExternalPackages (Firebase, Auth.js, Solana, nodemailer) і outputFileTracingIncludes (i18n, локалі, доки, ring-config, server.ts): контейнерні іміджі містять лише потрібні серверні бандли.
У next.config.mjs: WebP/AVIF (images.formats) та remote patterns для Google avatars, Google Fonts, Vercel Blob і cdn.ring-platform.org; специфічні клієнтські патерни — через collectCloneImageRemotePatterns. Додавайте нові CDN хости до images.remotePatterns при підключенні нового клону.
WebVitalsProvider (components/providers/web-vitals-provider.tsx), вставлений у app-client-shell.tsx017_ring_analytics_schema.sqlGET /api/analytics/web-vitals?scope=platform (admin)ANALYTICS_DISABLE_STORAGE=true для навантажувальних тестівПовний огляд інструментів: Моніторинг і аналітика.
Реалізаційні патерни (Firebase cache(), статична генерація, edge-прийоми) — у Розробка: продуктивність та Фічі: продуктивність. Перед копіюванням зразків із cache()/Firebase завжди звіряйте приклади з тими, що перевірені на postgres‑primary-клонах.
| Метрика | Добре (≤) | Погано (>) |
|---|---|---|
| LCP | 2.5s | 4s |
| INP | 200ms | 500ms |
| CLS | 0.1 | 0.25 |
| TTFB | 800ms | 1.8s |
| FCP | 1.8s | 3s |
| FID | 100ms | 300ms |
Пороги використовуються у ratingForMetric із features/analytics/lib/analytics-db.ts. Клієнт надсилає рейтинг кожної метрики з next/web-vitals (буферизує і POSTить всі разом на /api/analytics/web-vitals).
Ставте продуктивність як критерій релізу для нових запусків: пройдіться Lighthouse по /, /opportunities і /store одразу після деплою — тиждень потому звірте з аналітикою в Адмінці.
useActionState |
features/reviews/components/review-form.tsx |
useOptimistic | hooks/use-realtime.ts, hooks/use-realtime-opportunities.ts |
Server Actions + revalidatePath | app/_actions/*.ts |
Використовуйте Server Components для контейнерів списків і сутностей; 'use client' залишайте тільки для форм, тунеля, гаманця, та візуалізацій.
Документаційні і маркетингові графіки підтягуються через dynamic(..., { ssr: false }) у mdx-heavy-components.tsx. Верхньорівневі Mermaid або Shiki сервером викликали 30 секунд завантаження та 503 у production — див. Docker deployment.
<Code> у документації — асинхронний серверний Shikicomponents/docs/code.tsx використовує highlightCodeToHtml на кожному блоці — не додавайте на ту ж сторінку клієнтські хайлайтери.
staticPageGenerationTimeout: 180 у next.config.mjs — великі дерева документації чи багато мов вимагають акуратної інкрементальної генерації: зменшіть охоплення у scanDocsStaticParams, якщо білди не встигають в CI.
next.config.mjs задає output: 'standalone' із outputFileTracingRoot, serverExternalPackages (Firebase, Auth.js, Solana, nodemailer) і outputFileTracingIncludes (i18n, локалі, доки, ring-config, server.ts): контейнерні іміджі містять лише потрібні серверні бандли.
У next.config.mjs: WebP/AVIF (images.formats) та remote patterns для Google avatars, Google Fonts, Vercel Blob і cdn.ring-platform.org; специфічні клієнтські патерни — через collectCloneImageRemotePatterns. Додавайте нові CDN хости до images.remotePatterns при підключенні нового клону.
WebVitalsProvider (components/providers/web-vitals-provider.tsx), вставлений у app-client-shell.tsx017_ring_analytics_schema.sqlGET /api/analytics/web-vitals?scope=platform (admin)ANALYTICS_DISABLE_STORAGE=true для навантажувальних тестівПовний огляд інструментів: Моніторинг і аналітика.
Реалізаційні патерни (Firebase cache(), статична генерація, edge-прийоми) — у Розробка: продуктивність та Фічі: продуктивність. Перед копіюванням зразків із cache()/Firebase завжди звіряйте приклади з тими, що перевірені на postgres‑primary-клонах.