I am building an ecommerce site but after I restart the nextjs server(using yarn dev or npm run dev), leggings page is not loading. After using getproducts api, leggings page starts loading.

This is the leggings.js

import React from 'react'
import Link from 'next/link'
import Product from "/models/Product"
import mongoose from 'mongoose'

const Leggings = ({ products }) => {
    return (
        <div>
            <section className="text-gray-600 body-font min-h-screen">
                <div className="container px-5 py-24 mx-auto">
                    <div className="flex flex-wrap -m-4 justify-center">
                        {products.map((item) => {

                            return <Link passHref={true} key={item._id} href={`/product/${item.slug}`}><div className="lg:w-1/5 md:w-1/2 p-4 w-full cursor-pointer shadow-lg m-7">
                                <a className="block relative rounded overflow-hidden">
                                    <img alt="ecommerce" className="m-auto md:m-0 h-[30vh] md:h-[36vh] block" src={item.img} />
                                </a>
                                <div className="mt-4 text-center md:text-left">
                                    <h3 className="text-gray-500 text-xs tracking-widest title-font mb-1">{item.category.toUpperCase()}</h3>
                                    <h2 className="text-gray-900 title-font text-lg font-medium">{item.title}</h2>
                                    <p className="mt-1">₹{item.price}</p>
                                    <p className="mt-1">S, M, L, XL, XXL</p>
                                </div>
                            </div>
                            </Link>
                        })}
                    </div>
                </div>
            </section>
        </div>
    )
}

export async function getServerSideProps(context) {
    if (mongoose.connections[0].readyState) {
        await mongoose.connect(process.env.MONGO_URI)
    }
    let products = await Product.find({ category: 'leggings' })
    return {
        props: { products: JSON.parse(JSON.stringify(products)) }, // will be passed to the page component as props
    }
}

export default Leggings

Everytime after restarting the nextjs server I have to use getproducts api, then only the leggings page would work. I am using mongodb database and the connects works fine. How to fix this issue?