Performance Tips

Skappa generates fast apps by default — server components, optimized builds, and Tailwind CSS produce lean output. But as your app grows, there are techniques you can apply to keep performance excellent. This guide covers the most impactful optimizations.

Image Optimization

Always use the Next.js Image component instead of plain <img> tags. It provides automatic format conversion (WebP/AVIF), lazy loading, and responsive sizing:

import Image from 'next/image'

<Image
  src="/hero.jpg"
  alt="Hero banner"
  width={1200}
  height={600}
  priority  // Use for above-the-fold images
/>

Specifying width and height prevents layout shift while images load, which improves your Cumulative Layout Shift (CLS) score.

Bundle Size

• Import only what you need: import { Button } from './ui' instead of import * as UI from './ui'.
• Prefer smaller libraries when a large one is overkill (e.g., date-fns over moment).
• Use dynamic imports for heavy components that are not needed on initial page load.

// Dynamic import — loads only when needed
const HeavyChart = dynamic(() => import('./heavy-chart'), {
  loading: () => <p>Loading chart...</p>,
})

Server vs Client Components

Skappa uses Next.js server components by default. Server components render on the server and send zero JavaScript to the browser. Only add "use client" to components that need interactivity (click handlers, state, effects). Keeping the majority of your components as server components significantly reduces your JavaScript bundle size.

Caching and Data Fetching

• Fetch data in server components to avoid loading spinners and client-side waterfalls.
• Add appropriate cache headers for API responses that do not change frequently.
• Use Next.js built-in revalidation for pages that need periodic refreshes.

Measuring Performance

Use Lighthouse in Chrome DevTools to audit your deployed app. Aim for a performance score above 90. Pay attention to First Contentful Paint (FCP), Largest Contentful Paint (LCP), and Cumulative Layout Shift (CLS).