Back to Study Notes

Optimizing SSR Performance in Next.js

Optimizing Server-Side Rendering (SSR) in Next.js can dramatically enhance performance, reducing load times and improving the user experience.

1. Efficient Data Fetching

Use getServerSideProps Wisely

  • SSR should be used only when real-time data fetching is required on every request.
  • Prefer Static Site Generation (SSG) or Incremental Static Regeneration (ISR) for pages that don’t need to be dynamically rendered on each request.
js
1// Using getServerSideProps for SSR
2export async function getServerSideProps(context) {
3  const data = await fetchData(); // Fetch real-time data here
4  return { props: { data } };
5}

Minimize External API Calls

  • Combine API requests into a single call to reduce server-side fetches.
  • Cache the API responses where applicable to minimize load on the server.

2. Caching Data and Pages

Implement Caching Strategies

  • Use HTTP cache headers to cache static SSR responses, especially for pages that don't change often.
  • Leverage CDNs like Vercel or Cloudflare to cache static content and reduce server load.
js
1// Example caching headers
2export async function getServerSideProps(context) {
3  const res = await fetch('https://api.example.com/data');
4  const data = await res.json();
5  return {
6    props: { data },
7    revalidate: 3600, // Cache data for 1 hour
8  };
9}

3. Non-blocking I/O Operations

Use Asynchronous Operations

  • Ensure data fetching and SSR code use asynchronous techniques to avoid blocking operations.
  • Use Promises and async/await to keep the server non-blocking.
js
1const fetchData = async () => {
2  const res = await fetch('https://api.example.com/data');
3  return res.json();
4};

4. Lazy Loading Resources

Defer Non-Critical Resources

  • Use React.lazy and next/dynamic to load components only when required.
  • Implement image lazy loading using the loading="lazy" attribute to defer the loading of images not in view.
js
1import dynamic from 'next/dynamic';
2
3const LazyComponent = dynamic(() => import('../components/LazyComponent'));
4
5export default function Page() {
6  return <LazyComponent />;
7}

5. Optimize Image Handling

Use Next.js Image Component

  • Automatically optimize images with Next.js's <Image /> component for better performance, serving images in formats like WebP.
js
1import Image from 'next/image';
2
3<Image 
4  src="/images/photo.jpg" 
5  alt="Sample Image" 
6  width={500} 
7  height={300} 
8  priority 
9/>

6. Bundle Optimization

Split Large Bundles

  • Use dynamic imports and React.lazy to split JavaScript bundles into smaller chunks that are loaded on-demand.
  • Keep track of the bundle size using next/bundle-analyzer and remove unused dependencies.
js
1// Dynamic import example
2const DynamicComponent = dynamic(() => import('../components/DynamicComponent'));

7. Minification and Compression

Minify CSS and JavaScript

  • Ensure Terser and CSSNano minify JavaScript and CSS files in production.
  • Enable Gzip or Brotli compression to reduce the size of files sent to the client.
js
1// Example of enabling Brotli compression
2const nextConfig = {
3  compress: true, // Enable Gzip/Brotli compression
4};

8. Optimize HTML Rendering

Preload Critical Resources

  • Use <link rel="preload"> to preload key assets like fonts and CSS files to reduce loading time.
  • Use clean <head> tags to avoid blocking resources like unnecessary JavaScript or CSS files.

9. Improve Time to First Byte (TTFB)

Optimize Server Response Time

  • Use in-memory caching like Redis to cache frequently requested data, reducing the time spent fetching from the database.
  • Minimize latency by ensuring your server-side functions are optimized and responding quickly.
js
1// Using Redis for caching
2const redis = require('redis');
3const client = redis.createClient();
4
5client.get('cachedData', (err, data) => {
6  if (data) {
7    return data;
8  } else {
9    // Fetch and cache data
10    client.set('cachedData', 'new data');
11  }
12});

10. Use HTTP/2

Enable HTTP/2

  • HTTP/2 helps in improving the performance by enabling multiplexing and reducing the number of connections for multiple resources.
  • Implement server push to send multiple assets (like JavaScript, CSS) before the browser even requests them.
js
1// Example of HTTP/2 server push in NGINX
2location / {
3  http2_push /js/main.js;
4  http2_push /css/styles.css;
5}

11. Summary Table

Optimization TechniqueDescription
Efficient Data FetchingUse SSR only when necessary, use SSG/ISR for others
Caching Data & PagesUse caching headers and CDNs for static data
Non-blocking I/O OperationsUse async/await for non-blocking operations
Lazy Loading ResourcesUse dynamic imports and lazy load non-critical assets
Optimize Image HandlingUse Next.js Image component for image optimization
Bundle OptimizationSplit bundles and track sizes with next/bundle-analyzer
Minification & CompressionMinify JS and CSS, enable Brotli/Gzip compression
Optimize HTML RenderingPreload critical assets and clean <head> tags
Improve TTFBUse in-memory caching and optimize server response
Use HTTP/2Enable HTTP/2 for multiplexing and resource push