Improving User Experience in Next.js with Smart Caching Strategies

Overview

Popular React framework Next.js is well-known for its features, which include API routes, server-side rendering (SSR), and static site generation (SSG). Caching is a crucial component of Next.js application optimization. Sophisticated caching techniques can minimize server load, boost user experience, and dramatically increase performance. This thorough tutorial will explore the different caching techniques that Next.js offers, how to use them and the best ways to optimize their advantages.

Understanding Caching in Next.js

Caching in Next.js can be broadly categorized into two types:

Static Asset Caching: Involves caching static assets like images, CSS, and JavaScript files.
Data Caching: Involves caching dynamic data fetched during server-side or client-side rendering.

Pioneers in Cloud Consulting & Migration Services

Reduced infrastructural costs
Accelerated application deployment

Get Started

Static Asset Caching

Static assets are resources that do not change frequently and can be cached to improve load times. Next.js optimizes static asset caching automatically using the following techniques:

Built-in Static File Serving

Next.js serves static files from the public directory at the root of your project. These files can be accessed directly via the /public path in the URL.

/public

/images

logo.png

To access this image in your application, you would use:

<img src=”/images/logo.png” alt=”Logo” />

The browser automatically caches these assets based on HTTP headers set by Next.js.

Asset Optimization

Next.js optimizes JavaScript and CSS files by default. When you build your application using the next build, Next.js generates optimized bundles for these assets, which are then served with appropriate cache headers.

Image Optimization

Next.js provides an Image Optimization API that automatically optimizes images on-demand and serves them with optimal caching headers.

Example of using the Image component:

import Image from 'next/image'
 
function MyImage() {
  return (
    <Image
      src="/images/logo.png"
      alt="Logo"
      width={500}
      height={500}
    />
  )
}

import Image from 'next/image'

function MyImage() {

return (

<Image

src="/images/logo.png"

alt="Logo"

width={500}

height={500}

)

}

This component handles image caching and optimization, including resizing, format conversion, and quality adjustments.

Data Caching

Data caching involves storing the results of data fetching operations to improve the performance of SSR and client-side rendering. Next.js provides several methods to achieve this:

Incremental Static Regeneration (ISR)

ISR allows you to update static content after the initial build. You can create or update static pages without rebuilding the entire site.

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data')
  const data = await res.json()
 
  return {
    props: {
      data,
    },
    revalidate: 10, // In seconds
  }
}

export async function getStaticProps() {

const res = await fetch('https://api.example.com/data')

const data = await res.json()

return {

props: {

data,

revalidate: 10, // In seconds

}

In this example, Next.js will regenerate the page at most once every 10 seconds. This allows you to serve static content while keeping it fresh.

SWR (Stale-While-Revalidate)

SWR is a React hook library for data fetching that helps with caching, revalidation, focus tracking, refetching, and more.

import useSWR from 'swr'
const fetcher = url => fetch(url).then(res => res.json())
function Profile() {
 const { data, error } = useSWR('/api/user', fetcher)
 if (error) return <div>Failed to load</div>
  if (!data) return <div>Loading...</div>
  return <div>Hello, {data.name}</div>
}

import useSWR from 'swr'

const fetcher = url => fetch(url).then(res => res.json())

function Profile() {

const { data, error } = useSWR('/api/user', fetcher)

if (error) return <div>Failed to load</div>

if (!data) return <div>Loading...</div>

return <div>Hello, {data.name}</div>

}

SWR sends a fetch request (revalidate), returns cached data (stale), and then returns the most recent data.

Server-Side Caching

Server-side caching can greatly lessen the strain on your servers and enhance user response times. This entails caching the server-rendered pages and API route responses.

Caching for API Routes

Libraries like micro-memoize or node-cache can be used to implement server-side caching for API routes.

Using node-cache as an example

import NodeCache from 'node-cache'
const cache = new NodeCache({ stdTTL: 100, checkperiod: 120 }) 
export default async function handler(req, res) {
  const key = 'unique-key-for-request'
  const cachedData = cache.get(key)
 if (cachedData) {
    return res.status(200).json(cachedData)
}
 const data = await fetchSomeData()
  cache.set(key, data)
  res.status(200).json(data)
}

import NodeCache from 'node-cache'

const cache = new NodeCache({ stdTTL: 100, checkperiod: 120 })

export default async function handler(req, res) {

const key = 'unique-key-for-request'

const cachedData = cache.get(key)

if (cachedData) {

return res.status(200).json(cachedData)

}

const data = await fetchSomeData()

cache.set(key, data)

res.status(200).json(data)

}

This example caches the response of an API route for 100 seconds.

Full Page Caching with Vercel

When deploying to Vercel, you can use the Cache-Control headers to control the caching behavior of server-rendered pages and API responses.

Fifth-Side Caching

Client-side caching stores frequently accessed data in the browser, which can enhance the application’s perceived performance.

Storage for Local and Session Data

To cache data on the client side, utilize the localStorage or sessionStorage APIs.

Using localStorage as an example
function useCachedData(key, fetcher) {
  const [data, setData] = useState(() => {
    const cachedData = localStorage.getItem(key)
    return cachedData ? JSON.parse(cachedData) : null
  })
 
  useEffect(() => {
    if (!data) {
      fetcher().then(fetchedData => {
        localStorage.setItem(key, JSON.stringify(fetchedData))
        setData(fetchedData)
      })
    } }, [key, fetcher, data])
 return data
}

Using localStorage as an example

function useCachedData(key, fetcher) {

const [data, setData] = useState(() => {

const cachedData = localStorage.getItem(key)

return cachedData ? JSON.parse(cachedData) : null

})

useEffect(() => {

if (!data) {

fetcher().then(fetchedData => {

localStorage.setItem(key, JSON.stringify(fetchedData))

setData(fetchedData)

})

} }, [key, fetcher, data])

return data

}

Service Workers

Service workers can cache entire pages or specific resources, making them available offline and improving load times.

Example using Workbox:

// Register the service worker in your Next.js application
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js').then(registration => {
      console.log('SW registered: ', registration)
    }).catch(registrationError => {
      console.log('SW registration failed: ', registrationError)
    })
  })
}

// Register the service worker in your Next.js application

if ('serviceWorker' in navigator) {

window.addEventListener('load', () => {

navigator.serviceWorker.register('/sw.js').then(registration => {

console.log('SW registered: ', registration)

}).catch(registrationError => {

console.log('SW registration failed: ', registrationError)

})

}

Create a sw.js file for the service worker:

import { precacheAndRoute } from 'workbox-precaching'
import { registerRoute } from 'workbox-routing'
import { StaleWhileRevalidate } from 'workbox-strategies'

// Precache files
precacheAndRoute(self.__WB_MANIFEST)

// Cache API responses
registerRoute(
  ({ url }) => url.origin === 'https://api.example.com',
  new StaleWhileRevalidate({
    cacheName: 'api-cache',
  })
)

import { precacheAndRoute } from 'workbox-precaching'

import { registerRoute } from 'workbox-routing'

import { StaleWhileRevalidate } from 'workbox-strategies'

// Precache files

precacheAndRoute(self.__WB_MANIFEST)

// Cache API responses

registerRoute(

({ url }) => url.origin === 'https://api.example.com',

new StaleWhileRevalidate({

cacheName: 'api-cache',

})

)

Best Practices for Caching in Next.js

To maximize the benefits of caching in your Next.js application, follow these best practices:

Cache Strategically

Not all data needs to be cached. Identify and prioritize caching for the most critical and frequently accessed data or assets.

Use Cache-Control Headers

Set appropriate Cache-Control headers for your responses to control how browsers and CDNs cache them.

Leverage ISR and SSR Wisely

Use ISR for pages that can benefit from static generation with periodic updates. Use SSR for pages that require up-to-date data on each request.

Monitor and Adjust

Regularly monitor your application’s performance and caching effectiveness. Use tools like Google Lighthouse and web analytics to gain insights and adjust your caching strategies.

Keep Security in Mind

Be cautious when caching sensitive data. Ensure that private data is not cached publicly and use appropriate security headers.

Conclusion

Caching is a useful technique for Next.js application optimization. Your apps’ performance and user experience can be greatly improved by utilizing data caching, client-side caching, server-side caching, and static asset caching. Use these techniques carefully and keep an eye on and tweak your caching policies often to maintain the smooth operation of your application.

You can ensure that your Next.js applications are quick to respond to, nimble, and easily handle heavy traffic by implementing the appropriate caching strategies.

Drop a query if you have any questions regarding Next.js and we will get back to you quickly.

Making IT Networks Enterprise-ready – Cloud Management Services

Accelerated cloud migration
End-to-end view of the cloud environment

Get Started

About CloudThat

CloudThat is a leading provider of Cloud Training and Consulting services with a global presence in India, the USA, Asia, Europe, and Africa. Specializing in AWS, Microsoft Azure, GCP, VMware, Databricks, and more, the company serves mid-market and enterprise clients, offering comprehensive expertise in Cloud Migration, Data Platforms, DevOps, IoT, AI/ML, and more.

CloudThat is recognized as a top-tier partner with AWS and Microsoft, including the prestigious ‘Think Big’ partner award from AWS and the Microsoft Superstars FY 2023 award in Asia & India. Having trained 650k+ professionals in 500+ cloud certifications and completed 300+ consulting projects globally, CloudThat is an official AWS Advanced Consulting Partner, Microsoft Gold Partner, AWS Training Partner, AWS Migration Partner, AWS Data and Analytics Partner, AWS DevOps Competency Partner, Amazon QuickSight Service Delivery Partner, Amazon EKS Service Delivery Partner, AWS Microsoft Workload Partners, Amazon EC2 Service Delivery Partner, and many more.

To get started, go through our Consultancy page and Managed Services Package, CloudThat’s offerings.

FAQs

1. What is caching, and why is it important in Next.js?

ANS: – Caching stores copies of files or data in a cache or temporary storage location to be accessed more quickly. In Next.js, caching is crucial because it helps to improve performance by reducing the time it takes to retrieve data and assets, lowering server load, and enhancing the overall user experience by delivering content faster.

2. How does Next.js handle static asset caching?

ANS: – Next.js automatically optimizes and caches static assets like images, CSS, and JavaScript files. It serves these files from the /public directory and uses built-in optimization techniques to ensure the browser caches them efficiently.