Performance
Image optimization, lazy loading, and bundle size tips.
Updated
On this page
Performance Tips
1. Use Core + Options Split
Load getCore() on the server and getOptions() on the client. See Data Fetching.
2. Optimize Images
Use Next.js <Image> component with CDN URLs for automatic resizing and lazy loading.
3. Parallel Data Fetching
Use Promise.all() for independent data fetches.
4. ISR for Static Pages
Use revalidate for pages that change infrequently (products, categories, blog).
5. Minimize Client-Side Fetching
Move data fetching to server components where possible. Only use client-side fetching for interactive features.
6. Limit Pagination Size
Request only the data you need. Use limit: 12 instead of limit: 100.
Next Steps
- Caching Strategies — Reducing API calls
- Deployment — Production deployment