senior-frontend

name	senior-frontend
type	reference
description	Next.js App Router specific patterns — Server Components, Client Components boundary, parallel fetching, bundle analysis, a11y. Use ONLY for Next.js 13+ App Router projects. For generic React/Vue patterns, use `frontend-patterns` instead.
paths	["**/app/**/*.tsx","**/app/**/*.jsx","**/next.config.*","**/app/layout.tsx"]
when_to_use	When building Next.js 13+ App Router applications with Server Components, NOT for generic React/Vue (see `frontend-patterns`)
allowed-tools	Read, Glob, Grep, Write, Edit, Bash
user-invocable	true
effort	3

Senior Frontend

Critical rules (non-obvious)

• Always return in server components before client boundary — mixing async server + client state without boundaries causes hydration mismatches
• priority on LCP images only — adding priority everywhere defeats preload budgets
• use client at the leaf, not the root — push client boundary as deep as possible to maximize RSC tree
• Parallel data fetching in Server Components: use Promise.all([...]) at the page level, not sequential awaits
• Bundle heavy deps: moment (290KB) → dayjs (2KB); lodash → lodash-es with tree-shaking; axios → native fetch

Next.js: server vs client boundary

// Server Component (default) — fetch directly, no hooks
async function ProductPage({ params }: { params: { id: string } }) {
  const [product, reviews] = await Promise.all([  // parallel fetch
    getProduct(params.id),
    getReviews(params.id),
  ]);
  return (
    <div>
      <h1>{product.name}</h1>
      <Suspense fallback={<ReviewsSkeleton />}>
        <Reviews productId={params.id} />  {/* can defer slow queries */}
      
        {/* client boundary at leaf */}
    
  );
}


;
 () {
   [adding, setAdding] = ();
   ;
}