Вплив Streaming SSR та Partial Prerendering (PPR) на пошукових ботів

МОНОЛІТНИЙ SSR (Буферизація):
Бот ──── GET /catalog ────► Сервер
                              ├─ fetch(Metadata) ... 50ms
                              ├─ fetch(Products) ... 150ms
                              └─ fetch(Reviews) .... 1200ms  ◄── Блокує всю відповідь!
                              ┌─────────────────────────────┐
                              │ Генерація єдиного HTML-буфера│
                              └─────────────────────────────┘
Бот ◄─── HTTP 200 OK + Весь HTML (TTFB = 1450ms) ───────────┘

+-----------------------------------------------------------------------------------------+
|                                    ВХІДНИЙ HTTP-ЗАПИТ                                   |
+-----------------------------------------------------------------------------------------+
                                             │
                                             ▼
+-----------------------------------------------------------------------------------------+
| ЧАНК 1: МИТТЄВИЙ СКИД (TTFB < 30ms з Edge CDN)                                          |
| HTTP/1.1 200 OK (або HTTP/2 200)                                                        |
| Transfer-Encoding: chunked (або DATA frames)                                            |
| <!DOCTYPE html><html><head>                                                             |
|   <title>Серверні компоненти | Fullstack Agentic Lab</title>                            |
|   <meta name="robots" content="index, follow" />                                        |
|   <link rel="canonical" href="https://agenticlab.dev/catalog" />                       |
|   <script type="application/ld+json">{...}</script> <!-- Schema.org -->                |
| </head><body>                                                                           |
|   <header>Статична навігація</header>                                                   |
|   <main>                                                                                |
|     <div id="P:1"><!-- Скелетон fallback для каталогу --></div>                         |
+-----------------------------------------------------------------------------------------+
                                             │
                          [WRS / Googlebot зчитує <head>]
                          [Продовжує слухати відкритий сокет]
                                             │
                                             ▼
+-----------------------------------------------------------------------------------------+
| ЧАНК 2: АСИНХРОННИЙ ПОТОКОВИЙ СЛОТ (Dynamic Hole вирішено за 180ms)                     |
| <div hidden id="S:1">                                                                   |
|   <div class="product-grid">...реальні товари з бази даних...</div>                     |
| </div>                                                                                  |
| <script>$RC("B:1","S:1")</script>                                                       |
+-----------------------------------------------------------------------------------------+
                                             │
                                             ▼
+-----------------------------------------------------------------------------------------+
| ЧАНК 3: ТЕРМІНАЛЬНИЙ СИГНАЛ (Stream Termination)                                        |
| </body></html>                                                                          |
| 0\r\n\r\n (HTTP/1.1) або прапорець END_STREAM (HTTP/2)                                  |
+-----------------------------------------------------------------------------------------+

import { Suspense } from 'react';
import { notFound, redirect } from 'next/navigation';
import type { Metadata } from 'next';
import { ProductHeroSkeleton, ProductReviewsSkeleton } from '@/components/skeletons';

interface ProductPageProps {
  params: Promise<{ slug: string }>;
}

interface ProductEntity {
  id: string;
  slug: string;
  title: string;
  price: number;
  isPublished: boolean;
  canonicalSlug?: string;
}

// 1. Ізольований шар перевірки існування сутності
async function getProductRecord(slug: string): Promise<ProductEntity | null> {
  const res = await fetch(`https://api.internal.agenticlab.dev/v1/products/${slug}`, {
    next: { tags: [`product-${slug}`], revalidate: 3600 },
  });

  if (res.status === 404) return null;
  if (!res.ok) throw new Error(`Internal service error: ${res.statusText}`);

  return (await res.json()) as ProductEntity;
}

// 2. Метадані виконуються ДО старту стріму
export async function generateMetadata({ params }: ProductPageProps): Promise<Metadata> {
  const { slug } = await params;
  const product = await getProductRecord(slug);

  if (!product || !product.isPublished) {
    return {
      title: 'Товар не знайдено | Fullstack Agentic Lab',
      robots: { index: false, follow: false },
    };
  }

  return {
    title: `${product.title} — придбати онлайн | Fullstack Agentic Lab`,
    alternates: {
      canonical: `https://agenticlab.dev/products/${product.slug}`,
    },
  };
}

// 3. Головний компонент сторінки (Кореневий Shell)
export default async function ProductPage({ params }: ProductPageProps) {
  const { slug } = await params;

  // КРИТИЧНИЙ КРОК: Валідація ДО межі Suspense!
  // Цей код виконується синхронно до скидання HTTP-заголовків.
  const product = await getProductRecord(slug);

  if (!product) {
    // Виклик notFound() тут ГАРАНТОВАНО повертає повноцінний HTTP 404
    // у первинному заголовку відповіді до відправки будь-якого HTML-чанка.
    notFound();
  }

  if (product.canonicalSlug && product.canonicalSlug !== slug) {
    // Гарантований 308/301 Permanent Redirect до початку стрімінгу
    redirect(`/products/${product.canonicalSlug}`);
  }

  return (
    <main className="max-w-7xl mx-auto px-4 py-8 space-y-8">
      {/* Статична частина оболонки сторінки */}
      <h1 className="text-3xl font-extrabold tracking-tight text-slate-100">
        {product.title}
      </h1>

      {/* Динамічний слот 1: Основна інформація про товар */}
      <Suspense fallback={<ProductHeroSkeleton />}>
        <ProductHeroAsync productId={product.id} />
      </Suspense>

      {/* Динамічний слот 2: Важкі відгуки користувачів */}
      <Suspense fallback={<ProductReviewsSkeleton />}>
        <ProductReviewsAsync productId={product.id} />
      </Suspense>
    </main>
  );
}

// Асинхронний компонент всередині Suspense: не блокує TTFB та <head>
async function ProductHeroAsync({ productId }: { productId: string }) {
  const res = await fetch(`https://api.internal.agenticlab.dev/v1/pricing/${productId}`, {
    cache: 'no-store',
  });
  const data = (await res.json()) as { livePrice: number; inStock: boolean };

  return (
    <section className="p-6 rounded-xl border border-border bg-bg-surface">
      <p className="text-2xl font-bold text-accent-cyan">
        {data.livePrice} ₴ {data.inStock ? '— В наявності' : '— Під замовлення'}
      </p>
    </section>
  );
}

async function ProductReviewsAsync({ productId }: { productId: string }) {
  const res = await fetch(`https://api.internal.agenticlab.dev/v1/reviews/${productId}`, {
    next: { revalidate: 60 },
  });
  const reviews = (await res.json()) as Array<{ id: string; author: string; text: string }>;

  return (
    <section className="space-y-4">
      <h2 className="text-xl font-semibold text-slate-200">Відгуки клієнтів</h2>
      {reviews.map((rev) => (
        <div key={rev.id} className="p-4 rounded-lg border border-border bg-bg-elevated/40">
          <p className="text-sm font-bold text-slate-300">{rev.author}</p>
          <p className="text-sm text-text-muted mt-1">{rev.text}</p>
        </div>
      ))}
    </section>
  );
}

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  experimental: {
    // Увімкнення інкрементального режиму Partial Prerendering
    ppr: 'incremental',
  },
};

export default nextConfig;

import { Suspense } from 'react';
import { connection } from 'next/server';
import { CatalogFiltersSkeleton, CatalogListSkeleton } from '@/components/skeletons';

// Активація PPR для даного сегмента маршруту
export const experimental_ppr = true;

export default function CatalogPage() {
  return (
    <div className="container mx-auto p-6 grid grid-cols-12 gap-6">
      {/* Статична частина: компілюється в Static Shell на етапі збірки */}
      <aside className="col-span-3">
        <h2 className="text-lg font-bold text-slate-100 mb-4">Категорії</h2>
      </aside>

      <section className="col-span-9 space-y-6">
        {/* Динамічний слот: відкладається до рантайму через connection() */}
        <Suspense fallback={<CatalogListSkeleton />}>
          <DynamicProductFeed />
        </Suspense>
      </section>
    </div>
  );
}

async function DynamicProductFeed() {
  // connection() явно повідомляє компілятору Next.js перервати збірку (React.postpone)
  // та винести рендеринг цього компонента в динамічний запит
  await connection();

  const res = await fetch('https://api.internal.agenticlab.dev/v1/feed', {
    cache: 'no-store',
  });
  const items = (await res.json()) as Array<{ id: string; name: string }>;

  return (
    <div className="grid grid-cols-3 gap-4">
      {items.map((item) => (
        <article key={item.id} className="p-4 border border-border rounded-lg bg-bg-surface">
          <h3 className="font-semibold text-slate-200">{item.name}</h3>
        </article>
      ))}
    </div>
  );
}

import http from 'node:http';

interface StreamVerificationResult {
  statusCode: number;
  headers: http.IncomingHttpHeaders;
  firstChunkMs: number;
  hasHeadInFirstChunk: boolean;
  totalDurationMs: number;
  chunkCount: number;
}

export async function verifyStreamingUrl(targetUrl: string): Promise<StreamVerificationResult> {
  return new Promise((resolve, reject) => {
    const startTime = performance.now();
    let firstChunkTime = 0;
    let chunkCount = 0;
    let firstChunkPayload = '';
    let isFirst = true;

    const req = http.get(targetUrl, (res) => {
      res.on('data', (chunk: Buffer) => {
        chunkCount++;
        if (isFirst) {
          firstChunkTime = performance.now() - startTime;
          firstChunkPayload = chunk.toString('utf-8');
          isFirst = false;
        }
      });

      res.on('end', () => {
        const totalDurationMs = performance.now() - startTime;
        const hasHeadInFirstChunk =
          firstChunkPayload.includes('<head>') &&
          firstChunkPayload.includes('<title>') &&
          firstChunkPayload.includes('rel="canonical"');

        resolve({
          statusCode: res.statusCode ?? 0,
          headers: res.headers,
          firstChunkMs: Math.round(firstChunkTime),
          hasHeadInFirstChunk,
          totalDurationMs: Math.round(totalDurationMs),
          chunkCount,
        });
      });
    });

    req.on('error', (err: unknown) => {
      const message = err instanceof Error ? err.message : 'Unknown network failure';
      reject(new Error(`Stream check failed: ${message}`));
    });
  });
}