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
}

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

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'}
    
  );
}

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 */}
    
  );
}

Hint

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

Practice

1. In Next.js, why does choosing the right rendering strategy matter for your website?

easy

A. It decides which fonts are used on the page.

B. It changes the color scheme of the website automatically.

C. It controls the size of images on the page.

D. It affects how fast the page loads and how fresh the content is.

Solution

1. Step 1: Understand rendering strategy impact

   Rendering strategy determines when and how page content is created and delivered to users.

2. Step 2: Connect rendering to performance and freshness

   Choosing the right strategy affects page load speed and how up-to-date the content appears, which is important for user experience and SEO.

3. Final Answer:

   It affects how fast the page loads and how fresh the content is. -> Option D

4. Quick Check:

   Rendering strategy = speed and freshness [OK]

Hint: Rendering strategy controls speed and content freshness [OK]

Common Mistakes:

• Thinking rendering changes colors or fonts
• Confusing rendering with styling or image size
• Assuming rendering affects only visuals, not performance

2. Which Next.js page export correctly sets a page to use Static Site Generation (SSG)?

easy

A. export default function Page() { return Hello }

B. export const getServerSideProps = async () => { return { props: {} } }

C. export const getStaticProps = async () => { return { props: {} } }

D. export const getInitialProps = async () => { return { props: {} } }

Solution

1. Step 1: Identify SSG method in Next.js

   Static Site Generation uses getStaticProps to fetch data at build time.

2. Step 2: Match export to SSG

   Only getStaticProps triggers SSG; others are for server-side or legacy methods.

3. Final Answer:

   export const getStaticProps = async () => { return { props: {} } } -> Option C

4. Quick Check:

   SSG = getStaticProps [OK]

Hint: SSG uses getStaticProps export [OK]

Common Mistakes:

• Confusing getServerSideProps with SSG
• Using getInitialProps which is legacy
• Not exporting any data fetching function

3. Given this Next.js page code, what will the user see when visiting the page?

export async function getServerSideProps() {
  return { props: { time: new Date().toISOString() } };
}

export default function Page({ time }) {
  return 
Current time: {time}
;
}

medium

A. The current server time updated on every request.

B. The time when the site was built, never changes.

C. An error because getServerSideProps cannot return props.

D. A blank page because time is undefined.

Solution

1. Step 1: Understand getServerSideProps behavior

   This function runs on every request, fetching fresh data each time.

2. Step 2: Analyze returned props usage

   The page receives the current server time as a prop and displays it inside the div.

3. Final Answer:

   The current server time updated on every request. -> Option A

4. Quick Check:

   getServerSideProps = fresh data each request [OK]

Hint: getServerSideProps runs every request, shows fresh data [OK]

Common Mistakes:

• Thinking it shows build time (that's SSG)
• Assuming getServerSideProps causes errors
• Believing props are undefined without checking code

4. This Next.js page uses Static Site Generation but the data is not updating after deployment. What is the likely fix?

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

export default function Page({ data }) {
  return 
{data.message}
;
}

medium

A. Add revalidate property to enable Incremental Static Regeneration.

B. Change getStaticProps to getServerSideProps to fetch on every request.

C. Remove the fetch call to avoid stale data.

D. Wrap the component in React.memo to force updates.

Solution

1. Step 1: Identify SSG data freshness issue

   Static Site Generation builds pages once at build time, so data stays static unless re-built.

2. Step 2: Use revalidate for periodic updates

   Adding revalidate enables Incremental Static Regeneration, refreshing data after set seconds.

3. Final Answer:

   Add revalidate property to enable Incremental Static Regeneration. -> Option A

4. Quick Check:

   SSG + revalidate = fresh static pages [OK]

Hint: Use revalidate in getStaticProps for fresh static data [OK]

Common Mistakes:

• Switching to getServerSideProps unnecessarily
• Removing fetch which breaks data loading
• Using React.memo which doesn't affect data fetching

5. You want a Next.js page that shows user profile data that updates every 10 seconds but also loads fast initially. Which rendering strategy best fits this need?

hard

A. Use Server-side Rendering with getServerSideProps to fetch data on every request.

B. Use Static Site Generation with revalidate: 10 to update every 10 seconds.

C. Use Client-side Rendering only with useEffect to fetch data after page loads.

D. Use Static Site Generation without revalidate for fastest load.

Solution

1. Step 1: Understand the need for fast initial load and frequent updates

   Static Site Generation gives fast load by pre-building pages; revalidate allows periodic updates.

2. Step 2: Compare options for update frequency and speed

   Using revalidate: 10 updates the page every 10 seconds without slowing initial load, unlike server-side rendering which runs every request.

3. Final Answer:

   Use Static Site Generation with revalidate: 10 to update every 10 seconds. -> Option B

4. Quick Check:

   SSG + revalidate = fast + fresh [OK]

Hint: SSG with revalidate balances speed and freshness [OK]

Common Mistakes:

• Choosing server-side rendering which slows initial load
• Using client-side fetching which delays content display
• Ignoring revalidate option for periodic updates