DICOM
LVRU
Связаться

Технический обзор

На этой странице кратко и по-техничному: из чего состоит сайт, как загружаются/кэшируются данные, и какие принципы доступны для SEO и безопасности.

Версии пакетов

Версии читаются на сервере из package.json (ничего не утекает на клиент).

  • next14.2.5
  • react18.3.1
  • react-dom18.3.1
  • typescript5.4.5
  • tailwindcss3.4.10
  • postcss8.4.38
  • autoprefixer10.4.19
  • swiper11.1.4

Фреймворк и рендеринг

  • Next.js App Router: серверные компоненты по умолчанию; клиентские — только там, где нужны (напр., слайдер).
  • SSR + SSG/ISR: рендер на сервере; часть секций — статично с переобновлением.
  • Динамический импорт (без SSR) для слайдера, чтобы исключить конфликты гидрации.

I18n и маршруты

  • Структура URL: /lv/... и /ru/... , например /lv/home, /ru/home.
  • Язык берём из URL-параметра [lang]; не используем клиентский стейт, чтобы избежать расхождений SSR/CSR.
  • Компоненты получают язык через props (всегда детерминированно на SSR).

Новости (Facebook Graph API)

  • Серверный компонент <News/>: `async` fetch из Graph API, фильтрация по тегу (#site-news-lv / #site-news-ru).
  • Кэш: используем Next revalidate или `cache: "no-store"` в зависимости от требований (rate-limits/латентность).
  • Секреты FB_PAGE_ID / FB_PAGE_TOKEN живут только на сервере (process.env).

Кэш и производительность

  • ISR revalidate (напр., 300–600s) для новостей; критические секции — SSR без кэша.
  • Картинки — Next/Image с оптимизацией и корректным `sizes` под грид.
  • Динамические импорты без SSR (например, слайдер), чтобы уменьшить стартовый JS.

UI-стек

  • Tailwind CSS + дизайн-утилиты (градиенты, тени, радиусы).
  • Загрузка шрифтов через next/font (Inter, Playfair_Display) — без FOUT/FOIT.
  • Чёткая декомпозиция: Header/Footer/News/Services и т.д.

Безопасность

  • Секреты (.env) — только на сервере; не попадают в клиентский бандл.
  • CSRF/XSS: защиты Next/React + не используем `dangerouslySetInnerHTML` с недоверенным контентом.
  • Рекомендуется добавить заголовки безопасности (CSP, Referrer-Policy) на уровне прокси/приложения.

SEO и метаданные

  • Next Metadata API: тайтлы/описания на страницу/язык.
  • Семантический HTML, структура h1/h2, alt у картинок.
  • Чистые URL с языковым префиксом.

Структура URL

/lv/home, /ru/home
/lv/privacy, /ru/privacy
/lv/tech, /ru/tech

Диаграмма потока данных (упрощённо)

Клиент → сервер (Next) → Graph API; кэширование — на стороне Next.

Browser ───────→ Next.js (SSR/Server Components)
                 ├─ fetch News → Facebook Graph API
                 └─ ISR cache / revalidate
HTML/JSON ←─────┘

Переменные окружения (.env)

  • FB_PAGE_IDID Facebook страницы
  • FB_PAGE_TOKENДолгоживущий Page Access Token
  • NEXT_PUBLIC_SITE_URLПубличный URL сайта

Чек-лист деплоя

  • Добавить/обновить .env (FB_PAGE_ID/FB_PAGE_TOKEN).
  • Проверить доступ к Graph API и лимиты.
  • Включить ISR revalidate, настроить заголовки безопасности.
  • Build + старт с NODE_ENV=production.

Roadmap

  • Redis-кэш для ответов Facebook (с учётом лимитов).
  • Sentry/логи для наблюдаемости.
  • CI/CD и бюджет Lighthouse.

Операционный runbook

  • Если пропали новости: проверить валидность FB-токена; обновить при истечении.
  • Если гидрационные ошибки: убедиться, что клиентские компоненты не SSR (dynamic(..., { ssr:false })).
  • Если просела производительность: проверить настройки ISR и размеры/sizes изображений.