moai-domain-frontend

Create an async server component that fetches data directly, wrapping the fetch in React's cache() function for request deduplication. Use Suspense boundaries with skeleton fallbacks for streaming, and pass data to client components only where interactivity is needed.

Define a server action with the 'use server' directive, validate FormData with Zod's safeParse, and return error objects on failure. In the client, use useActionState to manage form state and revalidatePath to refresh cached data after mutations.

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

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.

Avoid server components when you need event handlers, browser APIs like localStorage, React hooks, or real-time updates. Server components also add network round trips, so client components with proper caching can outperform them for highly interactive UI.

Common causes include inline function definitions creating new references each render and missing memoization. Use useCallback for stable callbacks, useMemo for expensive computations, memo for pure child components, and useDeferredValue for expensive renders tied to user input.