Dynamic rendering triggers in NextJS

Introduction

Dynamic rendering triggers let your Next.js app update pages automatically when data changes or user actions happen. This keeps the page fresh without needing a full reload.

When you want to show the latest news or posts without refreshing the whole page.

When a user submits a form and you want to update the page with their input immediately.

When data changes on the server and you want the page to reflect those changes quickly.

When you want to fetch new data after a user clicks a button or interacts with the page.

When you want to show loading states or error messages dynamically during data fetching.

Syntax

NextJS

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    async function fetchData() {
      const res = await fetch('/api/data');
      const json = await res.json();
      setData(json);
    }
    fetchData();
  }, []);

  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
}

Use useState to hold data that changes.

Use useEffect to run code when the component loads or when dependencies change.

Examples

This example updates the count on button clicks, triggering a re-render.

NextJS

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

This fetches data once when the component loads and updates the page when data arrives.

NextJS

import { useEffect, useState } from 'react';

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

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

  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
}

Sample Program

This component shows a new random number every second. It uses setInterval inside useEffect to update state regularly, triggering dynamic rendering.

The aria-live="polite" attribute helps screen readers announce changes politely.

NextJS

import { useState, useEffect } from 'react';

export default function RandomNumber() {
  const [number, setNumber] = useState(null);

  useEffect(() => {
    const interval = setInterval(() => {
      setNumber(Math.floor(Math.random() * 100));
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return (
    <main aria-live="polite" style={{ fontSize: '2rem', textAlign: 'center', marginTop: '2rem' }}>
      {number === null ? 'Generating number...' : `Random number: ${number}`}
    </main>
  );
}

Important Notes

Remember to clean up intervals or subscriptions in useEffect to avoid memory leaks.

Use aria-live regions to improve accessibility when content updates dynamically.

Dynamic rendering helps keep your app interactive and responsive to user actions or data changes.

Summary

Dynamic rendering triggers update your page automatically when data or state changes.

Use React hooks like useState and useEffect to manage dynamic updates.

Always consider accessibility and cleanup when using dynamic rendering.