Headless Commerce на Next.js: как ускорить витрину и не переплачивать
Типичная ситуация: ваш интернет-магазин на монолитной CMS начинает тормозить при 1000 одновременных пользователей. TTFB растёт до 5 с, LCP — до 8 с. Вы решаете перейти на Headless Commerce архитектуру, но сталкиваетесь с проблемой интеграции — каждый бэкенд (Bagisto, Shopify, Medusa) требует своего формата данных. Мы решаем это с помощью единого Commerce Client, который абстрагирует различия и позволяет быстро переключать провайдера без переписывания фронта.
Наш опыт показывает, что headless подход с Next.js на 40–60% быстрее загружает страницы по сравнению с традиционным SSR на PHP, а согласно Core Web Vitals от Google, LCP и CLS улучшаются в среднем на 35%. В одном из проектов мы снизили LCP с 4.2 с до 1.8 с, а INP — с 300 мс до 150 мс. При этом экономия на инфраструктуре достигает 40% за счёт ISR и эффективного кэширования.
Как интегрировать любой Commerce API с Next.js?
Ключевой приём — единый интерфейс Commerce Client. Он абстрагирует конкретный бэкенд: будь то Bagisto, Shopify или Medusa, мы получаем одинаковые методы getProduct, getProducts, createCart и т.д. Это позволяет менять провайдера без переписывания всего фронта.
Такой подход также упрощает тестирование и поддержку: все запросы к бэкенду проходят через один слой, где можно добавить кэширование, ретраи и логирование.
// lib/commerce/types.ts
export interface Product {
id: string;
sku: string;
slug: string;
name: string;
description: string;
price: number;
compareAtPrice?: number;
images: ProductImage[];
variants: ProductVariant[];
categories: Category[];
}
export interface CommerceClient {
getProduct(slug: string): Promise<Product>;
getProducts(params: ProductsParams): Promise<PaginatedProducts>;
getCategories(): Promise<Category[]>;
createCart(): Promise<Cart>;
addToCart(cartToken: string, item: CartItem): Promise<Cart>;
checkout(cartToken: string, data: CheckoutData): Promise<Order>;
}
Реализация для Bagisto:
// lib/commerce/bagisto.ts
import { GraphQLClient } from 'graphql-request';
import type { CommerceClient, Product } from './types';
import { GET_PRODUCT, GET_PRODUCTS } from './queries';
export class BagistoClient implements CommerceClient {
private client: GraphQLClient;
constructor() {
this.client = new GraphQLClient(
process.env.NEXT_PUBLIC_BAGISTO_GRAPHQL_URL!,
{
headers: {
'Accept': 'application/json',
},
}
);
}
async getProduct(slug: string): Promise<Product> {
const { product } = await this.client.request(GET_PRODUCT, { slug });
return this.normalizeProduct(product);
}
private normalizeProduct(raw: any): Product {
return {
id: String(raw.id),
sku: raw.sku,
slug: raw.urlKey,
name: raw.name,
description: raw.description,
price: parseFloat(raw.priceHtml?.finalPrice ?? raw.price),
images: raw.images?.map(img => ({
url: img.path,
altText: raw.name,
})) ?? [],
variants: raw.variants ?? [],
categories: raw.categories ?? [],
};
}
}
Почему стоит выбрать Next.js для headless e-commerce?
Next.js — стандартный выбор для headless e-commerce витрины: SSG для SEO, ISR для актуальности данных, Server Components для уменьшения JS-бандла, Edge Middleware для персонализации. Связка с любым Commerce API выстраивается по единому паттерну.
Наш опыт показывает, что ISR сокращает время загрузки страниц каталога в 2-3 раза по сравнению с традиционным серверным рендерингом. А Server Components уменьшают размер клиентского бандла на 30–50% — это напрямую влияет на INP и взаимодействие с пользователем. Дополнительно, preloading шрифтов и next/image добавляют копилку улучшений.
Процесс работы над проектом
- Аналитика — изучаем ваш текущий бэкенд, требования к каталогу, корзине, checkout. Определяем метрики: целевой LCP < 2.5 с, CLS < 0.1, INP < 200 мс.
- Проектирование — проектируем слой абстракции Commerce API, определяем контракты. Согласовываем интерактивные прототипы.
- Реализация — пишем компоненты на React/Next.js, настраиваем ISR, корзину, checkout. Используем Zustand для клиентского состояния.
- Тестирование — проверяем метрики производительности, интеграцию с бэкендом. Прогоняем нагрузочное тестирование до 2000 RPS.
- Деплой — настраиваем CI/CD, деплоим на Vercel или ваш сервер. Предоставляем полную документацию.
Детали этапа аналитики
Мы собираем логи с текущего сервера, замеряем TTFB, LCP, CLS, INP с помощью Lighthouse CI. Анализируем структуру API бэкенда, выявляем N+1 запросы и узкие места. На выходе — техническое задание с описанием контрактов и планом миграции.Страницы каталога с ISR
// app/products/[slug]/page.tsx (App Router)
import { commerce } from '@/lib/commerce';
import { ProductGallery } from '@/components/product/Gallery';
import { AddToCartButton } from '@/components/cart/AddToCartButton';
import { VariantSelector } from '@/components/product/VariantSelector';
interface Props {
params: { slug: string };
}
export async function generateStaticParams() {
const slugs = await commerce.getAllProductSlugs();
return slugs.map(slug => ({ slug }));
}
export const revalidate = 3600;
export default async function ProductPage({ params }: Props) {
const product = await commerce.getProduct(params.slug);
return (
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
<ProductGallery images={product.images} />
<div>
<h1 className="text-3xl font-bold">{product.name}</h1>
<div className="mt-4 text-2xl">{product.price} ₽</div>
<VariantSelector variants={product.variants} />
<AddToCartButton productId={product.id} />
</div>
</div>
);
}
export async function generateMetadata({ params }: Props) {
const product = await commerce.getProduct(params.slug);
return {
title: product.name,
description: product.description.slice(0, 160),
openGraph: {
images: [product.images[0]?.url],
},
};
}
Управление состоянием корзины
Zustand для клиентского состояния корзины с персистентностью:
// stores/cart.ts
import { create } from 'zustand';
import { persist } from 'zustand/middleware';
interface CartState {
cartToken: string | null;
items: CartItem[];
total: number;
addItem: (productId: string, variantId?: string, qty?: number) => Promise<void>;
removeItem: (lineId: string) => Promise<void>;
clearCart: () => void;
}
export const useCartStore = create<CartState>()(
persist(
(set, get) => ({
cartToken: null,
items: [],
total: 0,
addItem: async (productId, variantId, qty = 1) => {
let { cartToken } = get();
if (!cartToken) {
const cart = await commerce.createCart();
cartToken = cart.token;
set({ cartToken });
}
const updatedCart = await commerce.addToCart(cartToken, {
productId,
variantId,
quantity: qty,
});
set({
items: updatedCart.items,
total: updatedCart.total,
});
},
removeItem: async (lineId) => {
const { cartToken } = get();
if (!cartToken) return;
const updatedCart = await commerce.removeFromCart(cartToken, lineId);
set({ items: updatedCart.items, total: updatedCart.total });
},
clearCart: () => set({ cartToken: null, items: [], total: 0 }),
}),
{ name: 'cart-storage', partialize: (state) => ({ cartToken: state.cartToken }) }
)
);
Checkout-поток
// app/checkout/page.tsx
'use client';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { checkoutSchema, CheckoutFormData } from '@/lib/validations/checkout';
import { useCartStore } from '@/stores/cart';
export default function CheckoutPage() {
const { cartToken, clearCart } = useCartStore();
const { register, handleSubmit, formState: { errors } } = useForm<CheckoutFormData>({
resolver: zodResolver(checkoutSchema),
});
const onSubmit = async (data: CheckoutFormData) => {
if (!cartToken) return;
await commerce.saveShippingAddress(cartToken, data.shipping);
const shippingMethods = await commerce.getShippingMethods(cartToken);
await commerce.saveShippingMethod(cartToken, shippingMethods[0].id);
const order = await commerce.placeOrder(cartToken, data.payment);
clearCart();
router.push(`/orders/${order.id}/success`);
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
{/* поля формы */}
</form>
);
}
Производительность: что влияет на Core Web Vitals
| Техника | LCP | CLS | INP |
|---|---|---|---|
| ISR для страниц товаров | + | ||
next/image с blur placeholder |
+ | + | |
| Предзагрузка шрифтов | + | + | |
| Server Components для каталога | + | ||
| Skeleton-заглушки для корзины | + | ||
| Prefetch для hover-состояний | + |
Что входит в работу
- Слой абстракции Commerce API с документацией
- Витрина на Next.js с ISR для каталога
- Корзина на Zustand с персистентностью
- Checkout-форма с валидацией (Zod)
- Интеграция поиска (Algolia/Typesense) — опционально
- Настройка SEO: структурированные данные (JSON-LD), метаданные, sitemap
- Деплой на хостинг (Vercel, AWS, Selectel) с CI/CD
- Документация, доступы, обучение команды заказчика
Получите консультацию по интеграции — мы поможем выбрать архитектуру и оценим объём работ.
Срок разработки витрины
| Компонент | Срок |
|---|---|
| Каталог + страница товара | 2-3 нед |
| Корзина + checkout | 1-2 нед |
| Личный кабинет | 1 нед |
| Поиск + фильтры | 1-2 нед |
| Интеграции (аналитика, пиксели) | 3-5 дней |
| Итого | 5-9 недель |
Закажите разработку витрины под ключ — мы оценим ваш проект за 1 рабочий день. Свяжитесь с нами, чтобы обсудить детали и получить консультацию.