moai-domain-frontend

Define an async server component and wrap data fetching functions with React's cache() for request deduplication. Fetch data in parallel with Promise.all, and wrap sections in Suspense boundaries so content streams in independently.

Create a file with the 'use server' directive, validate FormData with Zod safeParse, and return field errors on failure. On the client, use useActionState to track form state and call revalidatePath after mutations.

Zustand and Redux Toolkit are React state libraries, with Zustand offering a minimal hook-based API and Redux Toolkit providing structured slices. Pinia is the official state management library for Vue 3, designed around the Composition API.

Yes, Next.js supports ISR through the revalidate export for time-based revalidation and revalidatePath or revalidateTag for on-demand invalidation. Tag-based caching lets you invalidate specific data without rebuilding entire pages.

New function references and unmemoized computations cause child re-renders on each render. Use useCallback for stable handlers, useMemo for filtered results, memo for pure child components, and useDeferredValue to keep input responsive.

Use client components for event handlers, browser APIs like localStorage, hooks-based state, and real-time updates. Keep data fetching, backend access, and security-sensitive logic in server components to reduce client bundle size.