?? Solution: Incremental Static Regeneration (ISR) + WebSockets

To solve this, we use Next.js with ISR to optimize the initial load and WebSockets to update the data in real time without requiring a full page refresh.

?? Implementation

1?? Optimizing Initial Load with ISR

Incremental Static Regeneration (ISR) allows generating static pages periodically, improving performance without requiring Server-Side Rendering (SSR) for every request.

export async function getStaticProps() {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();

  return {
    props: { data },
    revalidate: 60, 
  };
}

export default function Dashboard({ data }) {
  return (
    <div>
      <h1>Sales Dashboard</h1>
      <p>Total Sales: {data.totalSales}</p>
    </div>
  );
}
        

? Advantage: The page loads super fast because Next.js generates a static HTML file that updates every 60 seconds.

2?? Real-Time Data Updates with WebSockets

To allow users to see new sales without refreshing the page, we use WebSockets to receive updates automatically.

import { useState, useEffect } from "react";
import io from "socket.io-client";

const socket = io("https://api.example.com");

export default function Dashboard({ initialData }) {
  const [data, setData] = useState(initialData);

  useEffect(() => {
    socket.on("new-sale", (newSale) => {
      setData((prevData) => ({
        ...prevData,
        totalSales: prevData.totalSales + newSale.value,
      }));
    });

    return () => socket.off("new-sale");
  }, []);

  return (
    <div>
      <h1>Sales Dashboard</h1>
      <p>Total Sales: {data.totalSales}</p>
    </div>
  );
}
        

? Advantage: When a new sale occurs, the backend emits an event via WebSockets, and the data updates instantly for all users.

?? Results

? The dashboard loads quickly since it doesn’t rely on SSR for every request. ? Users see new sales in real time without needing to refresh the page. ? The backend load is reduced by avoiding unnecessary API calls.

This is a common issue in companies that work with real-time metrics, and Next.js provides an efficient solution.

Have you faced something similar at work? Let’s discuss in the comments! ??

#NextJS #ReactJS #WebDevelopment #Performance #RealtimeData #react #development

#dev #web