Advanced Caching Strategies With Server-Side Rendering in Next.js

Server-side rendering (SSR) in Next.js ensures users receive a fully rendered page quickly, but it can introduce performance tradeoffs if not managed properly. In this article, we’ll explore caching strategies that enhance performance without sacrificing data freshness.

1. Understanding SSR in Next.js

Next.js supports SSR via getServerSideProps, which runs on every request. This is great for dynamic data, but can become a bottleneck under heavy load.

export async function getServerSideProps(context) {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return { props: { data } };
}

2. Use Incremental Static Regeneration (ISR) Where Possible

If the data doesn’t change on every request, opt for ISR:

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data },
    revalidate: 60, // Revalidate every 60 seconds
  };
}

This serves static pages, regenerating them in the background after the revalidate period.

3. Implement CDN Caching With Headers

Set cache headers directly in your SSR API or middleware to instruct CDNs how to cache responses:

res.setHeader('Cache-Control', 'public, s-maxage=60, stale-while-revalidate=30');

s-maxage tells CDNs how long to cache, while stale-while-revalidate allows serving stale data while revalidating.

4. Use Edge Functions for Global Latency Reduction

With Next.js Middleware and platforms like Vercel, you can serve logic and caching rules closer to users via Edge Functions, improving time to first byte (TTFB).

export const config = {
  runtime: 'edge',
};

export default async function middleware(req) {
  // Logic here
}

5. Cache API Responses Manually

For third-party APIs or custom SSR endpoints, cache responses in memory (with LRU caches), Redis, or edge caches to avoid redundant fetches.

import LRU from 'lru-cache';

const cache = new LRU({ max: 100, ttl: 1000 * 60 });

export async function getServerSideProps() {
  const cached = cache.get('key');
  if (cached) return { props: { data: cached } };

  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  cache.set('key', data);

  return { props: { data } };
}

Conclusion

Combining SSR with smart caching can give you the best of both worlds: dynamic data and blazing-fast performance. Use ISR when you can, CDN headers for public caching, and edge middleware for global performance improvements.

If this post helped you, consider supporting me: buymeacoffee.com/hexshift