Next.js 15 Fullstack Web Apps · درس

التحديثات التفاؤلية وإبطال ذاكرة التخزين المؤقت

اجعل الطفرات تبدو فورية باستخدام واجهة مستخدم تفاؤلية، ثم حافظ على اتساق حالة الخادم والعميل باستخدام إبطال React Query وأدوات إعادة التحقق في Next.js.

الدرس 4 من 413 خطوة

التحديثات التفاؤلية وإبطال ذاكرة التخزين المؤقت درس مجاني في Next.js 15 Fullstack Web Apps على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Next.js 15 Fullstack Web Apps، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Next.js 15 Fullstack Web Apps 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

What Are Optimistic Updates

An optimistic update applies a mutation to the UI immediately, before the server confirms it. If the request fails, you roll back. This makes apps feel instant.

Update local cache right away.
Send the request.
Reconcile or roll back on the response.

The Tradeoff

Optimism improves perceived speed but risks showing stale or wrong data briefly. Use it for high-confidence actions like likes, toggles, and list edits, not for risky financial operations.

React Query useMutation Basics

useMutation exposes lifecycle hooks: onMutate, onError, onSuccess, and onSettled. Optimistic logic lives in onMutate.

const mutation = useMutation({
  mutationFn: updateTodo,
  onMutate: async (newTodo) => { /* optimistic */ },
  onError: (err, vars, context) => { /* rollback */ },
  onSettled: () => { /* refetch */ },
});

Snapshot Before Mutating

In onMutate, cancel in-flight queries, snapshot the current cache, then write the optimistic value. The snapshot enables rollback.

onMutate: async (newTodo) => {
  await queryClient.cancelQueries({ queryKey: ['todos'] });
  const previous = queryClient.getQueryData(['todos']);
  queryClient.setQueryData(['todos'], (old) => [...old, newTodo]);
  return { previous };
}

Rolling Back on Error

If the mutation fails, restore the snapshot you returned from onMutate. The context argument carries it.

onError: (err, newTodo, context) => {
  queryClient.setQueryData(['todos'], context.previous);
}

Reconciling with the Server

In onSettled, invalidate the query so React Query refetches the authoritative server state, replacing your optimistic guess with real data.

onSettled: () => {
  queryClient.invalidateQueries({ queryKey: ['todos'] });
}

A Pure Optimistic Reducer

The merge logic is just data transformation. Here is the add-and-rollback idea in plain JS.

let todos = [{ id: 1, text: 'A' }];
const snapshot = [...todos];
todos = [...todos, { id: 2, text: 'B (optimistic)' }];
console.log('optimistic', todos.length);
todos = snapshot;
console.log('rolled back', todos.length);

Server-Side: revalidatePath

When a Server Action mutates data, call revalidatePath to purge the Next.js cache for that route so the next render shows fresh data.

'use server';
import { revalidatePath } from 'next/cache';

export async function addTodo(text) {
  await db.todo.create({ data: { text } });
  revalidatePath('/todos');
}

Tag-Based Invalidation

revalidateTag targets cached fetches tagged with a label, regardless of which path used them. Tag your fetches, then invalidate by tag.

await fetch('https://api.example.com/todos', {
  next: { tags: ['todos'] },
});
// later, after a mutation:
import { revalidateTag } from 'next/cache';
revalidateTag('todos');

useOptimistic in Server Actions

React 19 ships useOptimistic, which pairs naturally with Next.js Server Actions for built-in optimistic UI without a query library.

'use client';
import { useOptimistic } from 'react';

function List({ todos, addAction }) {
  const [optimistic, addOptimistic] = useOptimistic(todos);
  return <ul>{optimistic.map((t) => <li key={t.id}>{t.text}</li>)}</ul>;
}

Choosing the Right Tool

Match the tool to the layer:

invalidateQueries — client cache (React Query).
revalidatePath / revalidateTag — server data cache.
useOptimistic — instant client feedback with Server Actions.

Quick Check

In a React Query optimistic update, what is the purpose of the value returned from onMutate?

أجب عليها في الدرس التفاعلي

Recap

You learned to keep state consistent during mutations:

Apply optimistic updates in onMutate with a snapshot for rollback.
Roll back in onError, reconcile in onSettled.
Use revalidatePath and revalidateTag for server cache.
Reach for useOptimistic with Server Actions.

البدء مجانًا

تعلم TypeScript مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 12
الدروس: 48

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «التحديثات التفاؤلية وإبطال ذاكرة التخزين المؤقت» مجاني؟

نعم — نص درس «التحديثات التفاؤلية وإبطال ذاكرة التخزين المؤقت» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Next.js 15 Fullstack Web Apps، انتقل إلى CoddyKit PRO. تتضمن دورة Next.js 15 Fullstack Web Apps 4 دروس في المجموع.

ماذا ستتعلم في «التحديثات التفاؤلية وإبطال ذاكرة التخزين المؤقت»؟

اجعل الطفرات تبدو فورية باستخدام واجهة مستخدم تفاؤلية، ثم حافظ على اتساق حالة الخادم والعميل باستخدام إبطال React Query وأدوات إعادة التحقق في Next.js. تتمرن على Next.js 15 Fullstack Web Apps مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Next.js 15 Fullstack Web Apps؟

لا تُشترط خبرة سابقة. Next.js 15 Fullstack Web Apps على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «التحديثات التفاؤلية وإبطال ذاكرة التخزين المؤقت»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Next.js 15 Fullstack Web Apps هذا؟

نعم. كل درس في Next.js 15 Fullstack Web Apps يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

React Query لحالة الخادم
حالة العميل باستخدام Zustand/Jotai
استراتيجيات التخزين المؤقت على جانب الخادم
التحديثات التفاؤلية وإبطال ذاكرة التخزين المؤقت

← العودة إلى Next.js 15 Fullstack Web Apps