The performance of an application is intimately linked with the time it takes to serve the application’s code, style elements, and data to the client during the first interaction. The application’s performance can degrade if the server needs to send additional assets like images during the initial interaction. Good news is, developers can employ several strategies to enhance the speed of their Next.js applications.

Leveraging Server-side Rendering

Server-side rendering (SSR) is a technique that involves rendering the initial HTML of a webpage on the server before delivering it to the web browser. Using SSR can decrease the time needed to render the first page on the client side, which means users get to see your page’s content much faster. In addition, SSR is beneficial for improving application performance, particularly on mobile devices.

Here’s an example of how you can use server-side rendering in your code:

// This function will be called by the server
export async function getServerSideProps({context}){
    // Fetch data from external API
    const res = await fetch(`YOUR_API`)
    // Returning the fetched data
    return {
        props: {
            data: res
        }
    }
}

The Power of Dynamic Imports

Traditionally, applications usually load all the necessary components and CSS during the initial load. Dynamic import, however, allows you to break your code into smaller chunks and load them on demand. This approach implies you can import particular components as and when they’re needed. For instance, you can lazy load the login component for users who aren’t logged in. To use dynamic imports, you should import your code via an ES2020 dynamic import.

Caching Frequently Used Content

For API routes, apply Cache-Control to enforce caching rules, like this:

export default function handler(req, res){
    res.setHeader('Cache-Control', 's-maxage=10')
}

And for server-side rendering:

export async function getServerSideProps({ req, res }){
    res.setHeader('Cache-Control','public, s-maxage=10, stale-while-revalidate=59')
    return { props: {} }
}

Next.js automatically adds caching for static files and assets, so you don’t need to manually set it.

Removing Unused Dependencies

Unused dependencies can increase the size and loading time of your app and may also cause unexpected behaviors. So, it’s always a good idea to keep track of the dependencies that aren’t in use and remove them.

Image Optimization

Image optimization, which includes reducing the size of image files and saving them in the correct format, can greatly improve performance. You can use the Next.js Image Component for this purpose.

Here’s an example:

import Image from 'next/image'

function OptimizedImage(){
    return (
        <>
            <h1>Optimized Image</h1>
            <Image 
                src={image_url} 
                alt="Any Text" 
                width={500} 
                height={500} 
                blurDataURL="URL" 
                placeholder="blur" 
            />
        </>
    )
}

export default OptimizedImage

Optimizing Your Scripts

Use Next.js script component to optimize your scripts. For instance:

import Script from 'next/script'

export default function OptimizedScript(){
    return (
        <>
            <Script 
                id="YOUR_ID" 
                src="URL" 
                onError={(err) => console.log('Error')} 
                onLoad={() => {
                    // Function to perform after loading the script
                }}
                strategy = "beforeInteractive"
            />
        </>
    )
}

Next.js is popular because it allows developers to build vibrant JavaScript apps without constructing backend infrastructure. Additionally, it is packed with features that can significantly improve application performance while carrying out most of the heavy lifting on the server. Following these best practices can help you harness these features and build faster Next.js applications.

Tags: #nextjs #performance #serversiderendering #dynamicimport
Reference Link