Page source not showing in next.js Component

Page Source not showing in next.js Component which is essential for SEO. Everything is working fine the only problem is the page source as shown in the image attached .Here loading part is shown in page source. how do I render the final data? I am using useEffect Here to render the data. Kindly Help me out...

const SnippetsPaginate = ({ snippetsData }) => {

const snippetMainData = snippetsData.snippets.data;

const [snippets, setSnippets] = useState([]);
const [loading, setLoading] = useState(false);

useEffect(() => {
        setLoading(true);
        setSnippets(snippetMainData);
        setLoading(false);
},[snippetMainData]);

const router = useRouter();
const handlePagination = page => {
    const path = router.pathname
    const query = router.query
    query.page = page.selected + 1
    router.push({
        pathname: path,
        query: query,
    });
   
}

return (
    <>
        <div className='wrapper'>
            <div className=''>
                <div className="grid lg:grid-cols-5 gap-3 px-4 mx-auto mb-6">
                    <div className="lg:col-span-4">
                        <div className='grid lg:grid-cols-3 md:grid-cols-2 gap-3 mt-1'>
                            
                            {loading && Array.from({length: 27}, (v,i)=> <SnippetsSkeleton key={i}/>)}

                            {!loading && snippets.map(snippet => (
                                <SnippetsTemplate key={snippet.id}
                                    snippetsDetails={snippet}
                                />
                            ))}
                        </div>
                        <ReactPaginate
                            marginPagesDisplayed={2}
                            pageRangeDisplayed={5}
                            previousLabel={<BsChevronLeft />}
                            nextLabel={<BsChevronRight />}
                            breakLabel={"..."}
                            initialPage={snippetsData.snippets.current_page - 1}
                            pageCount={snippetsData.snippets.last_page}
                            onPageChange={handlePagination}
                            containerClassName={"paginate-wrap"}
                            subContainerClassName={"paginate-inner"}
                            pageClassName={"paginate-li"}
                            pageLinkClassName={"paginate-a"}
                            activeClassName={"paginate-active"}
                            nextLinkClassName={"paginate-next-a"}
                            previousLinkClassName={"paginate-prev-a"}
                            breakLinkClassName={"paginate-break-a"}
                        />
                    </div>
                    <div className="">
                    </div>
                </div>
            </div>
        </div>

    </>

  );



 }

 export default SnippetsPaginate;