27 lines
1.7 KiB
Plaintext
27 lines
1.7 KiB
Plaintext
---
|
|
description: Performance optimization strategies for Next.js 15 and React 19 applications, including bundle optimization, caching, and rendering strategies.
|
|
globs: app/**/*
|
|
---
|
|
- Use React Server Components (RSC) by default for better server-side rendering performance.
|
|
- Minimize client components with 'use client' directive to reduce client-side JavaScript.
|
|
- Implement proper code splitting with dynamic imports for large components.
|
|
- Use Next.js Image component for optimized image loading and caching.
|
|
- Implement proper caching strategies with `cache` function for data fetching.
|
|
- Use `loading.tsx` for skeleton screens and improved perceived performance.
|
|
- Optimize font loading with Next.js Font Optimization features.
|
|
- Implement proper lazy loading for components and images.
|
|
- Use `useTransition` for non-urgent updates to maintain responsiveness.
|
|
- Implement proper bundle analysis with `@next/bundle-analyzer`.
|
|
- Use `React.memo` for components with expensive render operations.
|
|
- Implement proper pagination for large data sets.
|
|
- Use `useDeferredValue` for deferring UI updates that aren't urgent.
|
|
- Optimize API routes with proper caching headers.
|
|
- Implement proper error boundaries to prevent cascading failures.
|
|
- Use `prefetch` for links to preload pages and data.
|
|
- Implement proper compression with gzip/brotli for static assets.
|
|
- Use `generateStaticParams` for static generation of dynamic routes.
|
|
- Implement proper CDN usage for static assets.
|
|
- Use `revalidate` for incremental static regeneration (ISR).
|
|
- Monitor Core Web Vitals for performance metrics.
|
|
- Implement proper database query optimization.
|
|
- Use `useOptimistic` for optimistic UI updates to improve perceived performance. |