Files
famapp/.agents/skills/react-best-practices/upstream/rules/bundle-defer-third-party.md
T
ginnoir 3d825fba20
CI / checks (push) Successful in 1m51s
CI / build (push) Successful in 3m34s
chore: vendor react-best-practices agent skill for cursor agents
Adds the Vercel skill under .agents with famapp path patterns.

Includes skills-lock.json pin.
2026-07-03 03:33:57 -05:00

49 lines
924 B
Markdown

---
title: Defer Non-Critical Third-Party Libraries
impact: MEDIUM
impactDescription: loads after hydration
tags: bundle, third-party, analytics, defer
---
## Defer Non-Critical Third-Party Libraries
Analytics, logging, and error tracking don't block user interaction. Load them after hydration.
**Incorrect (blocks initial bundle):**
```tsx
import { Analytics } from "@vercel/analytics/react";
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<Analytics />
</body>
</html>
);
}
```
**Correct (loads after hydration):**
```tsx
import dynamic from "next/dynamic";
const Analytics = dynamic(() => import("@vercel/analytics/react").then((m) => m.Analytics), {
ssr: false,
});
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<Analytics />
</body>
</html>
);
}
```