Идеально размещённые тултипы: все четыре стороны 🧑‍🎓

Продолжаем прокачивать Anchor Positioning API 🚀

https://habr.com/ru/articles/966998/

P.S. если не читал первую часть, то начни с неё 👈

Знаю, что ты скучаешь на работе, думаю тебе стоит сделать паузу и решить кроссворд😏

Идеально размещённые тултипы: по углам 🧑‍🎓

Наконец-то добрался до перевода 3-ей части, приятного тебе чтения ❤️

https://habr.com/ru/articles/972190/

1 часть — Идеально Размещённые Тултипы: База
2 часть — Идеально размещённые тултипы: все четыре стороны

В каждой шутке есть доля неправды 😉

Теперь можно тротлить или блочить отдельный запрос через девтулзы хрома, мега удобно 🔥

https://developer.chrome.com/blog/throttle-individual-network-requests

P.S. извини что пропал, возвращаюсь в строй, всех с прошедшим НГ 🫡

Cache Components в Next.js 16 — новая модель кэширования 👨‍💻

В Next.js 16 появился Cache Components — новый подход к кэшированию, построенный вокруг директивы 'use cache'. Главное изменение: кэширование теперь полностью opt-in. Никакого неявного кэширования — весь динамический код выполняется в момент запроса по умолчанию

Как включить?

// next.config.ts
const nextConfig = {
  cacheComponents: true,
};

export default nextConfig;

Как работает?
Директива 'use cache' применяется к страницам, компонентам или функциям. Компилятор автоматически генерирует ключи кэша — не нужно вручную прописывать зависимости
Cache Components дополняет Partial Pre-Rendering (PPR), который появился ещё в 2023. PPR позволял рендерить части страницы статически, а части — динамически через Suspense. Теперь эта концепция получила полноценный API

Есть 3 варианта где будет храниться кэш в зависимости от директивы
'use cache' — in-memory на сервере
'use cache: remote' — внешнее хранилище (Redis)
'use cache: private' — память браузера


Пример 1: Кэширование функции получения данных

import { cacheLife, cacheTag } from 'next/cache';

async function getProducts() {
  'use cache';
  cacheLife('hours'); // кэш на несколько часов
  cacheTag('products'); // тег для инвалидации
  
  const res = await fetch('https://api.store.com/products');
  return res.json();
}

Теперь getProducts() вернёт закэшированный результат. Компилятор автоматически сгенерирует ключ кэша на основе аргументов функции

Пример 2: Кэширование целого компонента

async function ProductCard({ id }: { id: string }) {
  'use cache';
  cacheLife('days');
  cacheTag(`product-${id}`);
  
  const product = await getProduct(id);
  
  return (
    <div className="card">
      <h2>{product.name}</h2>
      <p>{product.price} ₽</p>
    </div>
  );
}

Каждый ProductCard с уникальным id получит свой кэш. При изменении товара инвалидируем только его: revalidateTag('product-123', 'max')

Пример 3: Partial Pre-Rendering (PPR)
Cache Components отлично работает с PPR — можно комбинировать статику и динамику на одной странице:

import { Suspense } from 'react';

export default async function ProductPage({ params }) {
  const { id } = await params;
  
  return (
    <div>
      {/* Статическая часть — закэширована */}
      <ProductDetails id={id} />
      
      {/* Динамическая часть — рендерится на лету */}
      <Suspense fallback={<div>Загрузка...</div>}>
        <PersonalizedRecommendations productId={id} />
      </Suspense>
    </div>
  );
}

async function ProductDetails({ id }: { id: string }) {
  'use cache';
  cacheLife('max');
  
  const product = await fetchProduct(id);
  return <div>{product.description}</div>;
}

Статическая оболочка страницы отдаётся мгновенно, а персонализированные рекомендации подгружаются стримингом

Документация и анонс 👇
https://nextjs.org/docs/app/api-reference/config/next-config-js/cacheComponents
https://nextjs.org/blog/next-16#cache-components