Source from repo

Vercel React Best Practices

Apply 62 React and Next.js performance optimization rules from Vercel Engineering

vercel-labsGitHub vercel-labsOfficialSource repo Original GitHub link Publisher page

Files

Skill

n/a

Size

225.0 KB

Entrypoint

SKILL.md

Format

git-repo

Open file

rules/bundle-defer-third-party.md

Syntax-highlighted preview of this file as included in the skill package.

Rendered Source

markdown50 linesFree

rules/bundle-defer-third-party.md

1---
2title: Defer Non-Critical Third-Party Libraries
3impact: MEDIUM
4impactDescription: loads after hydration
5tags: bundle, third-party, analytics, defer
6---
7 
8## Defer Non-Critical Third-Party Libraries
9 
10Analytics, logging, and error tracking don't block user interaction. Load them after hydration.
11 
12**Incorrect (blocks initial bundle):**
13 
14```tsx
15import { Analytics } from '@vercel/analytics/react'
16 
17export default function RootLayout({ children }) {
18  return (
19    <html>
20      <body>
21        {children}
22        <Analytics />
23      </body>
24    </html>
25  )
26}
27```
28 
29**Correct (loads after hydration):**
30 
31```tsx
32import dynamic from 'next/dynamic'
33 
34const Analytics = dynamic(
35  () => import('@vercel/analytics/react').then(m => m.Analytics),
36  { ssr: false }
37)
38 
39export default function RootLayout({ children }) {
40  return (
41    <html>
42      <body>
43        {children}
44        <Analytics />
45      </body>
46    </html>
47  )
48}
49```
50

Preparing the source view

Vercel React Best Practices

rules/bundle-defer-third-party.md