Fetching data in server side every minute

[obtuse peak]

Let say I get data statically in a page:
export default async function Home() {
const data = await getLatestPrices();

console.log(data);

return <div>{data}</div>;
}

So when user enters the website, the data is already prebuilt. But now I want to this exact data every minute while user is at the page.
Is it possible to do it in server?

[winged pollen]

Hi @obtuse peak. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

To fetch data on the server side and update it every minute while the user is on the page, you can use a combination of Incremental Static Regeneration (ISR) and client-side updates. Here's how you can achieve this:

1. Use ISR to revalidate the page every minute on the server:

export const revalidate = 60; // revalidate every 60 seconds

export default async function Home() {
  const data = await getLatestPrices();

  return <div>{data}</div>;
}

This approach uses the revalidate option to regenerate the page every 60 seconds (1 minute) on the server Next.js Docs: ISR (https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#time-based-revalidation).

2. To update the data on the client side while the user is on the page, you can use a client-side component with a useEffect hook and setInterval to fetch new data every minute.

Here's an example of how you can combine these approaches:

// app/page.tsx
import { Suspense } from 'react';
import LatestPrices from './LatestPrices';

export const revalidate = 60; // revalidate every 60 seconds

export default async function Home() {
  const initialData = await getLatestPrices();

  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <LatestPrices initialData={initialData} />
      </Suspense>
    </div>
  );
}

// app/LatestPrices.tsx (Client Component)
'use client';

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('/api/latest-prices');
      const newData = await response.json();
      setData(newData);
    };

    const interval = setInterval(fetchData, 60000); // Fetch every 60 seconds

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

return <div>{data}</div>;
}

// app/api/latest-prices/route.ts
import { NextResponse } from 'next/server';

export async function GET() {
const latestPrices = await getLatestPrices();
return NextResponse.json(latestPrices);
}

This approach combines server-side revalidation with client-side updates:

1. The server revalidates the page every 60 seconds using ISR.
2. The client-side component (`LatestPrices`) fetches new data every 60 seconds while the user is on the page.

By using this method, you ensure that:
- Users always see fresh data when they load the page (thanks to ISR).
- The data updates regularly while they're on the page (thanks to client-side fetching).
- The server-side logic is kept separate from client-side updates.

Remember to adjust the intervals as needed for your specific use case.

**Next.js Docs: Data Fetching** (<https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating>)
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------