Next.js 15 Cache Components & Server Actions: Hướng dẫn kiến trúc sản xuất hoàn chỉnh

// app/components/ProductDetails.tsx
import { cache } from 'react'; // React's cache primitive

interface Product {
  id: string;
  name: string;
  description: string;
  price: number;
}

// This function is memoized by React's cache.
// Subsequent calls with the same productId within the same request
// will return the cached result without re-fetching.
const getProductData = cache(async (productId: string): Promise<Product> => {
  console.log(`Fetching product data for ID: ${productId}`); // This will only log once per request for a given productId
  const res = await fetch(`https://api.example.com/products/${productId}`, {
    next: {
      tags: [`product-${productId}`, 'all-products'], // Cache tags for invalidation
      revalidate: 3600, // Stale-While-Revalidate for 1 hour
    },
  });

  if (!res.ok) {
    throw new Error(`Failed to fetch product ${productId}: ${res.statusText}`);
  }
  return res.json();
});

interface ProductDetailsProps {
  productId: string;
}

export default async function ProductDetails({ productId }: ProductDetailsProps) {
  // The `getProductData` call here benefits from the `cache` wrapper.
  // If this component is rendered multiple times with the same productId
  // within the same request, the fetch will only execute once.
  const product = await getProductData(productId);

  return (
    <div className="p-4 border rounded-lg shadow-sm">
      <h2 className="text-2xl font-bold">{product.name}</h2>
      <p className="text-gray-700 mt-2">{product.description}</p>
      <p className="text-xl font-semibold text-green-600 mt-3">${product.price.toFixed(2)}</p>
    </div>
  );
}

// app/actions/productActions.ts
'use server';

import { revalidateTag } from 'next/cache';
import { z } from 'zod'; // For robust schema validation

const updateProductSchema = z.object({
  id: z.string().uuid(),
  name: z.string().min(3).max(255),
  description: z.string().min(10),
  price: z.number().positive(),
});

export async function updateProduct(formData: FormData) {
  const rawFormData = {
    id: formData.get('productId'),
    name: formData.get('name'),
    description: formData.get('description'),
    price: parseFloat(formData.get('price') as string),
  };

  const validationResult = updateProductSchema.safeParse(rawFormData);

  if (!validationResult.success) {
    return {
      success: false,
      errors: validationResult.error.flatten().fieldErrors,
    };
  }

  const { id, name, description, price } = validationResult.data;

  try {
    const res = await fetch(`https://api.example.com/products/${id}`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ name, description, price }),
    });

    if (!res.ok) {
      const errorData = await res.json();
      return { success: false, message: errorData.message || 'Failed to update product.' };
    }

    // Invalidate cache for this specific product and all products list
    revalidateTag(`product-${id}`);
    revalidateTag('all-products'); // Invalidate any list views that show all products

    return { success: true, message: 'Product updated successfully.' };
  } catch (error) {
    console.error('Error updating product:', error);
    return { success: false, message: 'An unexpected error occurred.' };
  }
}

// app/page.tsx
import ProductDetails from './components/ProductDetails';
import ProductList from './components/ProductList';
import { Suspense } from 'react';

export default function HomePage() {
  const productId = 'a1b2c3d4-e5f6-7890-1234-567890abcdef'; // Example product ID

  return (
    <main className="container mx-auto p-4">
      <h1 className="text-3xl font-bold mb-6">Welcome to Our Store</h1>

      <section className="mb-8">
        <h2 className="text-2xl font-semibold mb-4">Featured Product</h2>
        {/* Suspense boundary for dynamic content */}
        <Suspense fallback={<p>Loading product details...</p>}>
          <ProductDetails productId={productId} />
        </Suspense>
      </section>

      <section>
        <h2 className="text-2xl font-semibold mb-4">All Products</h2>
        {/* Another Suspense boundary for potentially different caching needs */}
        <Suspense fallback={<p>Loading product list...</p>}>
          <ProductList />
        </Suspense>
      </section>
    </main>
  );
}

// app/components/ProductList.tsx
import { cache } from 'react';

interface ProductSummary {
  id: string;
  name: string;
}

const getAllProducts = cache(async (): Promise<ProductSummary[]> => {
  console.log('Fetching all products list');
  const res = await fetch('https://api.example.com/products', {
    next: {
      tags: ['all-products'],
      revalidate: 600, // Revalidate every 10 minutes
    },
  });

  if (!res.ok) {
    throw new Error('Failed to fetch product list');
  }
  return res.json();
});

export default async function ProductList() {
  const products = await getAllProducts();

  return (
    <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      {products.map((product) => (
        <li key={product.id} className="p-3 border rounded-md">
          <h3 className="font-medium">{product.name}</h3>
        </li>
      ))}
    </ul>
  );
}

// app/components/AddToCartButton.tsx
'use client';

import { useOptimistic, useState } from 'react';
import { addToCart } from '../actions/cartActions'; // Server Action

interface AddToCartButtonProps {
  productId: string;
  initialQuantity: number;
}

export function AddToCartButton({ productId, initialQuantity }: AddToCartButtonProps) {
  const [optimisticQuantity, addOptimisticItem] = useOptimistic(
    initialQuantity,
    (currentQuantity, amountToAdd: number) => currentQuantity + amountToAdd
  );
  const [isPending, setIsPending] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleAddToCart = async () => {
    setIsPending(true);
    setError(null);
    addOptimisticItem(1); // Optimistically update UI

    try {
      const result = await addToCart(productId, 1); // Call the server action
      if (!result.success) {
        // Rollback optimistic update on failure
        addOptimisticItem(-1);
        setError(result.message || 'Failed to add to cart.');
      }
    } catch (e) {
      // Rollback on network or unexpected errors
      addOptimisticItem(-1);
      setError('An unexpected error occurred.');
      console.error('Add to cart error:', e);
    } finally {
      setIsPending(false);
    }
  };

  return (
    <div>
      <button
        onClick={handleAddToCart}
        disabled={isPending}
        className={`px-4 py-2 rounded-md text-white ${
          isPending ? 'bg-blue-400 cursor-not-allowed' : 'bg-blue-600 hover:bg-blue-700'
        }`}
      >
        {isPending ? 'Adding...' : `Add to Cart (${optimisticQuantity})`}
      </button>
      {error && <p className="text-red-500 text-sm mt-1">{error}</p>}
    </div>
  );
}

// app/actions/cartActions.ts
'use server';

import { revalidatePath } from 'next/cache'; // For path-based revalidation

export async function addToCart(productId: string, quantity: number) {
  // Simulate API call
  await new Promise((resolve) => setTimeout(resolve, 500));

  if (Math.random() < 0.2) { // Simulate 20% failure rate
    return { success: false, message: 'Failed to add item to cart due to a server error.' };
  }

  // In a real app, update database/session here
  console.log(`Added ${quantity} of product ${productId} to cart.`);

  // Revalidate any paths that display cart contents
  revalidatePath('/cart');
  revalidatePath('/'); // If cart summary is on homepage

  return { success: true, message: 'Item added to cart.' };
}

// app/actions/contactActions.ts
'use server';

import { z } from 'zod';

const contactFormSchema = z.object({
  name: z.string().min(2, 'Name must be at least 2 characters.').max(50, 'Name cannot exceed 50 characters.'),
  email: z.string().email('Invalid email address.'),
  message: z.string().min(10, 'Message must be at least 10 characters.').max(500, 'Message cannot exceed 500 characters.'),
});

export async function submitContactForm(formData: FormData) {
  const rawFormData = {
    name: formData.get('name'),
    email: formData.get('email'),
    message: formData.get('message'),
  };

  const validationResult = contactFormSchema.safeParse(rawFormData);

  if (!validationResult.success) {
    return {
      success: false,
      errors: validationResult.error.flatten().fieldErrors,
    };
  }

  const { name, email, message } = validationResult.data;

  try {
    // Simulate sending email or saving to DB
    await new Promise((resolve) => setTimeout(resolve, 1000));
    console.log(`Contact form submitted by ${name} (${email}): ${message}`);

    // No revalidation needed for a simple contact form submission
    return { success: true, message: 'Your message has been sent successfully!' };
  } catch (error) {
    console.error('Error submitting contact form:', error);
    return { success: false, message: 'An unexpected error occurred while sending your message.' };
  }
}

// app/components/ContactForm.tsx
'use client';

import { useFormState, useFormStatus } from 'react-dom';
import { submitContactForm } from '../actions/contactActions';

const initialState = {
  success: false,
  message: '',
  errors: undefined as Record<string, string[]> | undefined,
};

function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button
      type="submit"
      disabled={pending}
      className={`px-6 py-3 rounded-md text-white font-semibold ${
        pending ? 'bg-indigo-400 cursor-not-allowed' : 'bg-indigo-600 hover:bg-indigo-700'
      }`}
    >
      {pending ? 'Sending...' : 'Send Message'}
    </button>
  );
}

export function ContactForm() {
  const [state, formAction] = useFormState(submitContactForm, initialState);

  return (
    <form action={formAction} className="space-y-4 p-6 border rounded-lg shadow-md max-w-md mx-auto">
      <div>
        <label htmlFor="name" className="block text-sm font-medium text-gray-700">Name</label>
        <input
          type="text"
          id="name"
          name="name"
          className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2"
        />
        {state.errors?.name && <p className="text-red-500 text-xs mt-1">{state.errors.name.join(', ')}</p>}
      </div>
      <div>
        <label htmlFor="email" className="block text-sm font-medium text-gray-700">Email</label>
        <input
          type="email"
          id="email"
          name="email"
          className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2"
        />
        {state.errors?.email && <p className="text-red-500 text-xs mt-1">{state.errors.email.join(', ')}</p>}
      </div>
      <div>
        <label htmlFor="message" className="block text-sm font-medium text-gray-700">Message</label>
        <textarea
          id="message"
          name="message"
          rows={5}
          className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2"
        ></textarea>
        {state.errors?.message && <p className="text-red-500 text-xs mt-1">{state.errors.message.join(', ')}</p>}
      </div>
      <SubmitButton />
      {state.success && <p className="text-green-600 mt-2">{state.message}</p>}
      {!state.success && state.message && <p className="text-red-500 mt-2">{state.message}</p>}
    </form>
  );
}