Dynamic Rendering in Next.js

Introduction

When building modern web applications, rendering plays a crucial role in determining performance, SEO, and user experience. With Next.js, developers have multiple rendering strategies at their disposal—Static Generation (SSG), Server-Side Rendering (SSR), and Client-Side Rendering (CSR). Among these, Dynamic Rendering is a powerful technique that balances performance and real-time data fetching.

In this guide, we’ll explore what dynamic rendering is, when to use it, and how to implement it in Next.js effectively.

What is Dynamic Rendering?

Dynamic Rendering is a technique where a web application serves different versions of a page based on the type of requestor. It helps optimize performance by serving pre-rendered static content to search engines while delivering dynamic content to users.

This approach is particularly useful when:

• Your app requires real-time data updates.
• You want to improve SEO without losing interactivity.
• Your website serves different content based on user roles or preferences.

Static vs. Dynamic Rendering

Types of Dynamic Rendering in Next.js

Next.js provides multiple ways to implement dynamic rendering:

1. Server-Side Rendering (SSR)

With SSR, Next.js fetches data on each request, ensuring that users always receive up-to-date content.

Example:

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

export default function Page({ data }) {
  return <div>Latest Data: {data.value}</div>;
}

When to use SSR?

• Real-time data updates (e.g., stock prices, sports scores).
• User authentication-dependent content.

2. Client-Side Rendering (CSR)

CSR fetches data on the client side after the initial page load. This is useful for pages that do not require pre-rendering for SEO.

Example:

import { useEffect, useState } from 'react';

export default function Page() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then((res) => res.json())
      .then((data) => setData(data));
  }, []);

  return <div>Dynamic Data: {data ? data.value : 'Loading...'}</div>;
}

When to use CSR?

• Non-SEO critical pages.
• Pages that frequently update based on user actions.

3. Incremental Static Regeneration (ISR)

ISR allows pages to be statically generated at build time but refreshed dynamically at intervals.

Example:

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

export default function Page({ data }) {
  return <div>Updated Every 10s: {data.value}</div>;
}

When to use ISR?

• Blogs or e-commerce sites with semi-frequent updates.
• When you need a mix of performance and dynamic content.

Optimizing Dynamic Rendering

To ensure your Next.js application is fast and efficient with dynamic rendering, follow these best practices:

1. Use Caching Strategies

• Implement CDN caching for SSR responses.
• Store frequently requested API responses in Redis or memory cache.

2. Minimize API Calls

• Fetch only the necessary data instead of large payloads.
• Use GraphQL for more optimized querying.

3. Reduce JavaScript Load

• Enable lazy loading for components and images.
• Minimize third-party script usage.

4. SEO Optimization for Dynamic Content

• Use Next.js Head component for dynamic meta tags.
• Ensure correct robots.txt and sitemap.xml implementation.

Real-World Example: Dynamic User Dashboard

Let’s say we want to build a dashboard that shows a user’s latest financial transactions. We can use SSR to ensure data is always fresh while keeping it secure.

Implementation:

export async function getServerSideProps(context) {
  const user = context.req.cookies.user;
  const res = await fetch(`https://api.example.com/transactions?user=${user}`);
  const transactions = await res.json();
  
  return { props: { transactions } };
}

export default function Dashboard({ transactions }) {
  return (
    <div>
      <h1>Recent Transactions</h1>
      <ul>
        {transactions.map((txn) => (
          <li key={txn.id}>{txn.amount} - {txn.date}</li>
        ))}
      </ul>
    </div>
  );
}

Conclusion

Dynamic rendering in Next.js gives developers the flexibility to balance performance, SEO, and user experience. By choosing between SSR, CSR, and ISR, you can optimize your application based on real-time requirements.

To recap:

• Use SSR for real-time content updates.
• Use CSR for interactive, non-SEO pages.
• Use ISR for performance-friendly, semi-dynamic content.

With these techniques, you can build high-performance web applications that are both SEO-friendly and responsive to user needs.

🚀 Now go ahead and implement dynamic rendering in your Next.js projects!

Read other awesome articles in Medium.com or in akcoding’s posts.

OR

Join us on YouTube Channel

• YouTube

OR Scan the QR Code to Directly open the Channel 👉