is it better to import data from json file instead of api calls in React Js?

Question

I used different way to load data from wordpress-rest-api for frontend-reactjs as following :

built simple services by node js to communicate with wp rest api and save response into json file in frontend folder - react directory.

app.get('/update', async (_, _) => {
    try {
        // func : hit_wp_rest_api_end_points:
        //  nodejs_api/wpdata?endpoint=...
        await hit_wp_rest_api_end_points();
    } catch (error) {
        console.log(error);
    }
})

app.get('/wpdata', async (req, res) => {
    try {
        const { endpoint } = req.query;
        const jsonData = await getPosts(endpoint);
        const folderName = '../frontend/wpData';
        if (!fs.existsSync(folderName)) fs.mkdirSync(folderName);
        const output = JSON.stringify(jsonData);
        const filepath = `../frontend/wpData/${endpoint}.json`;
        fs.writeFile(filepath, output, { flags: 'wx' }, err => {
            if (err) {
                console.error('writeFile failed', err);
                return res.sendStatus(500);
            }
            console.log('Data successfully saved');
            res.sendStatus(200);
        })
    } catch (err) {
        console.error(err);
    }
})

update json file from wp-admin via /update endpoint ( nodejs )

add_action('admin_bar_menu', 'update_frontend', 100);

function update_frontend($wp_admin_bar)
{
  $args = array(
      'id'    => 'update_frontend',
      'title' => '<span class="ab-icon dashicons-update-alt rotating" title="update_frontend"></span> update_frontend', // title of the menu item with icon
      'href'  => 'http://localhost:4009/update',
      'meta'  => array(
          'class' => 'update_frontend',
          'title' => 'update_frontend', // tooltip
          // 'target' => '_blank'
      )
  );
  $wp_admin_bar->add_node($args);
}

import wp data files from wpData folder into reactjs - files: post.json, pages.json and links.json

    import './navbar.scss'
import { Link } from 'react-router-dom';
import menuJson from '../../../wpData/links.json'
const NavBar = () => {
    const links = Object.keys(menuJson).map((key: any) => menuJson[key]);
    return (
        <div className="app__navbar">
            <div className='app__navbar__menu'>
                <ul className='app__navbar__menu__ul'>
                    {links && links.map((menu: any) => {
                        const ss = m.href.split('/');
                        return (
                            <>
                                {
                                    menu.name === "Home" ?
                                        (<li key={menu.id}><Link to={`/ar`}>{menu.name}</Link></li>) :
                                        (<li key={menu.id}><Link to={`/ar/about/${ss[ss.length - 2]}`}>{menu.name}</Link></li>)
                                }
                            </>
                        )
                    })}
                </ul>
            </div>
        </div>
    )
}

export default NavBar

all that im doing to avoid api calls and complex state managment in ui reactjs .

my questions:

how about the idea is it good practice!

is it help in frontend performnce !?

Note A: frontend is faster than before when i used api calls.

Note B: Im self-taught and never worked in companies or with teams, so your advices and comments are appreciated

.............................................................