How to display states already loaded with data in react/next?

Question

React

Good afternoon. Can you please tell me how can I immediately get the data from the server when loading the page so that I can immediately insert them into the render?
Now it turns out that the data is coming, but at the time the page is rendered, it is not yet in the state and an undefined error pops up.
I could check something like

const [data,setData] = useState(false)
 {data && (
      <h1>{data.fields.title}</h1>
  )}

But what's the best way to handle it?

import React, {FC, useEffect, useState} from 'react';
import style from './MainTop.module.scss'
import Fade from 'react-reveal';
import Pulse from 'react-reveal/Pulse';
import {GetStaticProps} from "next";
import client from "../../../contentful/index";


const MainTop:FC = () => {
    const [data,setData] = useState({})
    useEffect(() => {
        client.getEntries({content_type: 'home'})
            .then(res => setData(res.items[0]))
    }, [setData])
    return (
        <div className={style.main__logo}>
            <div className={`${style['main__logo-container']} ${style.container}`}>
                <div className={style['main__logo-logo']}>
                    <Fade right duration={3000}>
                        <div>
                            <Pulse forever duration={5000}>
                                <h1>{data.fields.title}</h1>
                            </Pulse>
                        </div>
                    </Fade>
                </div>
            </div>
        </div>
    );
};