Next.js Automatic Static Optimization

Next.js Automatic Static Optimization is a powerful feature that enhances the performance of web applications by optimizing static content generation. It intelligently determines whether a page can be statically optimized based on the data-fetching methods used.

In this article, we will learn about Automatic static optimization in NextJS.

Next.js Automatic Static Optimization

Automatic Static Optimization is a feature of NextJS with the help of which we can create hybridized pages that can be rendered server-side as well as client-side depending on the content.

Next.js automatically optimizes pages that do not use server-side rendering methods (getServerSideProps) or API routes. If a page only uses static data (getStaticProps), Next.js generates static HTML at build time, ensuring fast load times and improved performance.

These methods help us to create hybrid apps in nextjs which contains both server-side and client-side rendered pages.

How It Works?

• Pages that do not require dynamic content fetching at request time are statically generated. This means the HTML is generated at build time and served to all users.
• Next.js automatically detects if a page can be statically optimized based on whether it uses getServerSideProps or not.

Steps to Create Next.js App

You can create a new NextJS project using the below command:

npx create-next-app gfg

Project Structure:

It will look like this.

Creating Statically Optimized Page:

Now we are going to create a new javascript file that will not contain any getServerSideProps or getInitialProps. Next.js will statically optimize this page automatically by prerendering the page to static HTML

Add the below content in the file created above.

// Filename - static.js

import React from 'react'

export default function Static() {
    return (
        <div>
            This file is statically generated
        </div>
    )
}

Now if you run the below code in the terminal then nextjs will build an optimized production build for your app in which you can see the static.js file is converted into static.html and this file is statically generated and will be rendered client-side.

npm run build

Output:

Conclusion

Next.js Automatic Static Optimization ensures that your pages are served quickly by generating static HTML at build time. By leveraging static generation and Incremental Static Regeneration, you can enhance performance, SEO, and user experience without additional server load.