Why rendering strategy matters in NextJS - See It in Action

Why rendering strategy matters

📖 Scenario: You are building a simple Next.js app that shows a list of products. You want to understand how different rendering strategies affect what the user sees and when.

🎯 Goal: Create a Next.js component that fetches product data and displays it using Server-Side Rendering (SSR). Then add a client-side state to toggle showing more details, demonstrating how rendering strategy impacts user experience.

📋 What You'll Learn

Create a server component that fetches product data

Add a client component with a button to toggle extra product details

Use Next.js App Router conventions with React 18+ functional components

Show how server and client rendering work together

💡 Why This Matters

🌍 Real World

Many web apps need to fetch data on the server for SEO and fast loading, but also need client interactivity for a smooth user experience.

💼 Career

Understanding Next.js rendering strategies is key for frontend developers working on modern React apps that balance performance and interactivity.

1

Set up product data fetching with a server component

Create an async server component called ProductList that fetches this exact product array: [{ id: 1, name: 'Laptop' }, { id: 2, name: 'Phone' }] and returns a simple list of product names inside <ul> and <li> tags.

NextJS

export default async function ProductList() {
  // Your code here
}

Need a hint?

Use an async function to create a server component. Define the products array inside it. Return JSX with a <ul> containing <li> for each product name.

2

Add a client component to toggle product details

Create a client component called ProductDetailsToggle that uses useState to track a boolean showDetails. Add a button that toggles showDetails when clicked. The button text should be exactly 'Show Details' when showDetails is false, and 'Hide Details' when true.

NextJS

export default async function ProductList() {
  const products = [{ id: 1, name: 'Laptop' }, { id: 2, name: 'Phone' }];
  return (
    
      {products.map(product => (
        {product.name}
      ))}
    
  );
}

'use client'

// Create ProductDetailsToggle component with useState and a button to toggle showDetails
// Your code here

Need a hint?

Remember to add 'use client' at the top. Use useState(false) to track showDetails. The button toggles this state and changes its text accordingly.

3

Combine server and client components

Modify the ProductList server component to import and include the ProductDetailsToggle client component below the product list. This shows how server and client rendering work together.

NextJS

import { ProductDetailsToggle } from './ProductDetailsToggle';

export default async function ProductList() {
  const products = [{ id: 1, name: 'Laptop' }, { id: 2, name: 'Phone' }];
  return (
    
      
        {products.map(product => (
          {product.name}
        ))}
      
      {/* Add ProductDetailsToggle component here */}
    
  );
}

'use client'

import { useState } from 'react';

export function ProductDetailsToggle() {
  const [showDetails, setShowDetails] = useState(false);
  return (
     setShowDetails(!showDetails)}>
      {showDetails ? 'Hide Details' : 'Show Details'}
    
  );
}

Need a hint?

Import the client component at the top. Then add <ProductDetailsToggle /> below the product list inside the fragment <></>.

4

Add product details display controlled by client state

Update the ProductDetailsToggle component to also display a paragraph <p> with the text 'Extra product details shown here.' only when showDetails is true, below the toggle button.

NextJS

import { useState } from 'react';

export function ProductDetailsToggle() {
  const [showDetails, setShowDetails] = useState(false);
  return (
    
       setShowDetails(!showDetails)}>
        {showDetails ? 'Hide Details' : 'Show Details'}
      
      {/* Show extra details paragraph only when showDetails is true */}
      {/* Your code here */}
    
  );
}

Need a hint?

Use conditional rendering with {showDetails && <p>Extra product details shown here.</p>} below the button.