How to input realtime data into NextJS?

Question

I am just starting to learn Next.js framework.

I need help to solve a problem that I do not understand right now. In normal Vanilla JavaScript and React I can display the resulting API in HTML using the setInterval method.

My API changes data in every 3 seconds. I want to incorporate such variable data into my Next.js app.

Below I have combined the two APIs into a single props to carry data to other components.

export async function getServerSideProps(context) {
    const [twoDApiRes, saveApiRes] = await Promise.all([
        fetch(_liveResult),
        fetch(_localTxt),
    ]);

    const [twoDApi, saveApi] = await Promise.all([
        twoDApiRes.json(),
        saveApiRes.text(),
    ]);

    // Regex
    let csv_data = saveApi.split(/\r?\n|\r/);

    // Loop through
    const retrieveData = csv_data.map((el) => {
        let cell_data = el.split(',');

        return cell_data;
    });

    return {
        props: { twoDApi, retrieveData },
    };
}

The main thing to know is that you want to change the data every three seconds in Next.js getServerSideProps.