Влияние 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}`));
    });
  });
}