Next.js Performance Optimization

Why Performance Optimization Matters

Performance optimization is crucial for creating a good user experience and maintaining a competitive edge in the digital landscape. No user wants to wait for a slow-loading website.

Fast Website provides several benefits, like:

• Better user experience
• Higher conversion rates
• Improved SEO rankings
• Lower server load

Search engines like Google also prioritize websites that load quickly.

Use Server Components

In Next.js 16, Server Components are the default. Server Components render on the server and send ready HTML to the browser.

They improve performance by reducing the amount of JavaScript sent to the client.

export default async function Page() {

  const data = await fetch("https://api.example.com/posts")
  const posts = await data.json()

  return (
    <div>
      {posts.map((post: any) => (
        <p key={post.id}>{post.title}</p>
      ))}
    </div>
  )
} 

Advantages

• Less JavaScript sent to the browser
• Faster page loading
• Better SEO

Avoid unnecessary client components

Client components are rendered on the client-side and can increase the bundle size and initial load time. Use server components when possible to reduce the amount of JavaScript sent to the client.

Only use client components for interactive parts of the UI that require client-side JavaScript, such as forms, modals, or components that rely on browser APIs.

For example, if you have a component that only displays static content, it should be a server component. If you have a component that includes a form or interactive elements, it should be a client component.

"use client"

import { useState } from "react"

Use client components only when needed for:

• State management
• Event handling
• Browser APIs

Otherwise prefer server components.

Optimize Images with next/image

Next.js provides a built-in Image component that automatically optimizes images for better performance. It supports features like lazy loading, responsive images, and automatic resizing.

Advantages of next/image

• Automatic optimization
• Lazy loading
• Responsive images
• Automatic resizing

To use the Image component, simply import it from "next/image".

  
import Image from "next/image"

<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
/>

The Image component will automatically optimize the image based on the device and screen size, improving load times and performance.

Optimize Fonts

Next.js has built-in support for font optimization. You can use the next/font module to automatically optimize and load fonts efficiently.

To use next/font, simply import the desired font from the module.

import { Inter } from "next/font/google"
const inter = Inter({
  subsets: ["latin"],
  weight: ["400", "700"],
})

Next.js will automatically optimize the font loading by only including the necessary font subsets and weights, and it will use modern font loading techniques to improve performance.

Advantages of next/font

• Automatic optimization
• No external server loading
• Avoid layout shifts
• Modern font loading techniques
• Faster rendering

Use Caching and Revalidation

Next.js provides built-in support for caching and revalidation, which can significantly improve performance by reducing the need to fetch data on every request.

You can use the revalidate property in your data fetching functions to specify how often the data should be revalidated. For example, if you set revalidate to 60, the data will be cached for 60 seconds before it is revalidated.

export default async function Page() {  
  const data = await fetch("https://api.example.com/posts", { next: { revalidate: 60 } })
  const posts = await data.json()

  return (
    <div>
      {posts.map((post: any) => (
        <p key={post.id}>{post.title}</p>
      ))}
    </div>
  )
}

Using caching and revalidation can help reduce server load and improve response times, especially for data that doesn't change frequently.

Enable Streaming with Suspense

Next.js 16 supports streaming and Suspense, which allows you to send parts of the page to the client as they are rendered. This can improve performance by allowing the browser to start rendering the page before all data is loaded.

To enable streaming, you can use the Suspense component from React. For example:

import { Suspense } from "react"
export default function Page() {
  return (
    <Suspense fallback="Loading...">
      <Posts />
    </Suspense>
  )
}

In this example, the Posts component will be rendered and sent to the client as soon as it is ready, while the fallback content ("Loading...") will be displayed until the Posts component is fully loaded. This can significantly improve the perceived performance of your application.

Use dynamic imports

Dynamic imports allow you to load JavaScript modules on demand, which can help reduce the initial bundle size and improve performance. In Next.js, you can use the dynamic function to dynamically import components.

import dynamic from "next/dynamic"
const DynamicComponent = dynamic(() => import("./DynamicComponent"))

By using dynamic imports, you can split your code into smaller chunks and only load the necessary code when it is needed, which can improve the initial load time of your application.

Optimise API Endpoints

Optimizing your API endpoints can significantly improve the performance of your Next.js application. This includes techniques such as:

• Using efficient database queries
• Implementing caching strategies
• Minimizing the amount of data sent to the client

Reduce third-party scripts

Third-party scripts can significantly impact the performance of your application. It's important to only include necessary third-party scripts and to load them asynchronously when possible.

Common Third-Party Scripts

• Google Analytics
• Chat Plugins
• Ads

For example, if you are using Google Analytics, you can load it asynchronously to prevent it from blocking the rendering of your page:

<script async src="https://www.google-analytics.com/analytics.js"></script>

By reducing the number of third-party scripts and loading them asynchronously, you can improve the performance of your application and provide a better user experience.

Use Core Web Vitals

Core Web Vitals are a set of metrics that measure the user experience of a web page. Optimizing these metrics can significantly improve the performance and usability of your Next.js application.

The three main Core Web Vitals are:

• Largest Contentful Paint (LCP): Measures loading performance
• First Input Delay (FID): Measures interactivity
• Cumulative Layout Shift (CLS): Measures visual stability

Use Production Build

Always use the production build of your Next.js application when deploying to production. The production build includes various optimizations that can significantly improve the performance and loading time of your application.

To create a production build, you can run the following command:

This will create an optimized production build of your application that is ready for deployment.