HIGHPerformancemediumNext.js + Supabase Standards

Use server components for data fetching by default

Fetch data in async server components instead of client-side useEffect + fetch patterns.

Why This Matters

Client-side fetching adds loading spinners, waterfalls, exposed API endpoints, and unnecessary JavaScript to the bundle.

Related Rules

Use route groups to organize app sections

Architecture

HIGH

Colocate page files with their route segment

Architecture

MEDIUM

Use (select auth.uid()) instead of auth.uid() in policies

Performance

MEDIUM

Use kebab-case for file and directory names

Quality

MEDIUM

Catch this automatically on every PR

BeforeMerge scans your pull requests against this rule and 4+ others. Get actionable feedback before code ships.

Join Waitlist Browse All Rules

Why This Matters

Server Components fetch data at render time with:

Zero client JS — data fetching code never reaches the browser
No loading spinners — page renders with data already present
No exposed API — no public endpoints for attackers to discover

Good

// Server component — async, no "use client"
export default async function RulesPage() {
  const rules = await getRules()
  return <RuleList rules={rules} />
}

Bad

"use client"
export default function RulesPage() {
  const [rules, setRules] = useState([])
  useEffect(() => {
    fetch("/api/rules").then(r => r.json()).then(setRules)
  }, [])
  if (!rules.length) return <Spinner />
  return <RuleList rules={rules} />
}

Use server components for data fetching by default

Why This Matters

Tags

Related Rules

Catch this automatically on every PR

Why This Matters

Good

Bad