Javascript – React+NextJS server side rendering a page that fetches data and displays it

Currently, I am using client side rendering for a page that fetches data using api and then displays this raw data.

'use client'

import React, { useState, useEffect } from 'react'
import axios from 'axios';

const SolarPanels = () => {
    const [titles, setTitles] = useState([]);

    useEffect(() => {
        axios.get(`/api/panelUpdate?cb=${Date.now()}`, {
            headers: {
                'Cache-Control': 'no-cache',   // Prevents axios from caching
                'Pragma': 'no-cache',
                'Expires': '0'
            }
        })
            .then((response) => { setTitles(response.data.documents[0].productDetails) })
            .catch((error) => { console.error(error.message) });
    }, []);

    return (
        <div>
            <h1>Panels data</h1>
            <p>{titles.map((element) => {
                return <div>{JSON.stringify(element)}</div>
            })}</p>
        </div>
    );
}

export default SolarPanels

I’ve read that its better to perform Client side rendering instead of Server side, so I newant to change this code in order to do that. I’m not planning to make use of hooks other than the one just used.

Also, please tell whether its worth it to convert this to client side rendering?