Откройте для себя увлекательный мир хука useOptimistic, продвинутого инструмента, который позволяет легко внедрять оптимистичные обновления в ваше приложение. Используя эту функцию, ваше приложение может обеспечить удивительно отзывчивый пользовательский интерфейс, повышая его общую производительность. Оптимистичные обновления — это мощная техника, позволяющая пользователям видеть немедленные изменения, благодаря чему приложение выглядит более интерактивным и привлекательным. Воспользуйтесь этим передовым подходом, чтобы повысить производительность вашего приложения и поразить своих пользователей более плавным и интерактивным интерфейсом!

Давайте погрузимся прямо в часть кодирования! К концу этого урока у вас должна быть структура папок, подобная приведенной ниже:

Во-первых, мы собираемся создать API и серверные действия. Если вы не знаете, что такое серверные действия, вы можете узнать о них больше здесь: https://medium.com/@sener3/unleashing-next-js-13-revolutionizing-server-side-processing-with-server -действия-23dc2adf62bf

Давайте создадим два маршрута API — один для получения значения счетчика, а другой — для значения оптимистичного счетчика:

import db from "@/lib/db";
import { NextResponse } from "next/server";

const COUNTER_ID = /* insert your counter id here */;

export async function GET() {
    const counter = await db.counter.findUnique({
        where: {
            id: COUNTER_ID,
        },
    });

    return NextResponse.json({
        value: counter?.value,
    });
}
import db from "@/lib/db";
import { NextResponse } from "next/server";

const OPTIMISTIC_COUNTER_ID = /* insert your optimistic counter id here */ ;

export async function GET() {
    const counter = await db.counter.findUnique({
        where: {
            id: OPTIMISTIC_COUNTER_ID,
        },
    });

    return NextResponse.json({
        value: counter?.value,
    });
}

Далее давайте создадим действия сервера для увеличения значений счетчика:

"use server";

import db from "@/lib/db";
import { revalidateTag } from "next/cache";

const COUNTER_ID = /* insert your id here */;
const…