Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                

DEV Community

Cover image for Next.js Performance Optimization with Real-World Example
Samuel Oyerinde
Samuel Oyerinde

Posted on

Next.js Performance Optimization with Real-World Example

Introduction

Building a performant web application involves balancing static and dynamic content effectively. Next.js offers a suite of features to achieve this balance, including Streaming React Server Components (RSC), Partial Prerendering (PPR), Incremental Static Regeneration (ISR), Server-Side Rendering (SSR), Static Site Generation (SSG), caching, prefetching, and suspense boundaries. Let's explore these concepts through a real-world example: a blog website with a mix of static and dynamic content.

Scenario: Blog Homepage

Our blog homepage will display:

  • Static Header and Blog Posts: These are mostly static, updated occasionally.
  • Dynamic "Latest Comments" Section: This updates frequently.

Step-by-Step Implementation

Step 1: Project Setup

  1. Directory Structure: 
   /app
     /layout.tsx         # Root layout for the app
     /page.tsx           # Homepage route
     /components
       /BlogPostList.tsx # Component for rendering the blog post list
       /LatestComments.tsx # Component for rendering latest comments
     /lib
       /data.ts         # Functions to fetch blog posts and comments
Enter fullscreen mode Exit fullscreen mode
  1. Mock Data Source: Use a JSON file or API for blog posts and comments.

Step 2: Define Data Fetching Functions

In /lib/data.ts, create functions to fetch blog posts and comments:

// lib/data.ts
export async function getBlogPosts() {
  await new Promise((resolve) => setTimeout(resolve, 1000)); // Simulate delay
  return [
    { id: 1, title: "Blog Post 1", content: "This is the first post." },
    { id: 2, title: "Blog Post 2", content: "This is the second post." },
  ];
}

export async function getLatestComments() {
  await new Promise((resolve) => setTimeout(resolve, 1500)); // Simulate delay
  return [
    { id: 1, text: "Great post!", user: "User1" },
    { id: 2, text: "Thanks for sharing!", user: "User2" },
  ];
}
Enter fullscreen mode Exit fullscreen mode

Step 3: Create Components

  1. BlogPostList Component: Use SSG with ISR for blog posts. 
   // components/BlogPostList.tsx
   import { getBlogPosts } from "../lib/data";

   export default async function BlogPostList() {
     const posts = await getBlogPosts();

     return (

         Blog Posts

           {posts.map((post) => (

               {post.title}
               {post.content}

           ))}


     );
   }
Enter fullscreen mode Exit fullscreen mode
  1. LatestComments Component: Use SSR with a suspense boundary for dynamic comments. 
   // components/LatestComments.tsx
   import { getLatestComments } from "../lib/data";

   export default async function LatestComments() {
     const comments = await getLatestComments();

     return (

         Latest Comments

           {comments.map((comment) => (


                 {comment.user}: {comment.text}


           ))}


     );
   }
Enter fullscreen mode Exit fullscreen mode

Step 4: Build the Homepage

Combine static and dynamic content using Streaming SSR and Suspense.

// app/page.tsx
import { Suspense } from "react";
import BlogPostList from "../components/BlogPostList";
import LatestComments from "../components/LatestComments";

export const revalidate = 600; // Enable ISR

export default async function Home() {
  return (

      My Blog

      {/* Static Blog Posts with SSG + ISR */}


      {/* Dynamic Comments with Streaming SSR and Suspense */}
      Loading latest comments...}>



  );
}
Enter fullscreen mode Exit fullscreen mode

Step 5: Optimize Caching and Prefetching

  1. Prefetching: Use prefetch={true} in links for faster navigation. 
   // components/BlogPostList.tsx (updated)
   import Link from "next/link";
   import { getBlogPosts } from "../lib/data";

   export default async function BlogPostList() {
     const posts = await getBlogPosts();

     return (

         Blog Posts

           {posts.map((post) => (



                   {post.title}


               {post.content}

           ))}


     );
   }
Enter fullscreen mode Exit fullscreen mode
  1. Cache Headers for Static Assets: Set cache headers in next.config.js. 
   // next.config.js
   module.exports = {
     async headers() {
       return [
         {
           source: "/:path*",
           headers: [
             {
               key: "Cache-Control",
               value: "public, max-age=31536000, immutable", // Cache static assets for 1 year
             },
           ],
         },
       ];
     },
   };
Enter fullscreen mode Exit fullscreen mode

Explanation of Rendering Strategies

  • SSG with ISR for BlogPostList: Pre-rendered at build time, revalidated every 10 minutes.
  • Streaming SSR with PPR for LatestComments: Dynamic content is streamed as it becomes available.
  • Suspense Boundary: Ensures a smooth loading experience by showing a fallback UI.

Benefits

  1. Fast Initial Load: Static content loads immediately.
  2. Dynamic Updates: Fresh data is fetched at request time.
  3. Improved UX: Suspense boundaries prevent page blocking.
  4. Caching: Reduces server requests on repeat visits.
  5. Prefetching: Enhances navigation speed.

Tags:

#NextJS #React #WebDevelopment #PerformanceOptimization #StreamingRSC #ISR #SSG #SSR #SuspenseBoundary #Caching #Prefetching

This approach ensures a fast and user-friendly experience by leveraging Next.js's advanced features to balance static and dynamic content effectively.

Top comments (0)