Next.js on server component is not sending request to the backend (express.js) if a change happen in the backend?

I am using newest version of Next.js , and inside the route /userprofile/[username] i have a page.jsx that works on server side (non client component), everything is gucci when i make a request to the backend, which is in express.js

however, once i make a small change in express.js somehow next.js stop sending the request to express, and I have to delete .next folder and re-run the application on frontend in order for next.js to send a request to the backend and render the component.

express.js userModel file has this code:

const User = {}

User.get = async function ({username}){
    console.log('print something')

    try{
    const fetchData = await pool.query('SELECT firstname, lastname, _username, bio, profilelogo FROM _user WHERE _username = $1',[username])
    console.log(fetchData)
    console.log('print something again')
    print('again and again')
    return {success:true, data:fetchData.rows[0],message:'User data has been fetched successfully'}
    }



    catch(e){
        console.log(e)
        return {success:false, data:null, message: e.message}
    }
}

express.js UserController file:

const UserController = {}


UserController.get = async function (req,res){
    console.log('try')
    

    try{
        const userInfo = await User.get(req.params)
        console.log(req.params)
  
        if(userInfo.success){

            return res.status(200).json({data:userInfo.data})
        }

        return res.status(401).json({message:userInfo.message})

    }
    catch(err){
        console.log(err)

        return res.status(500).json({error:err.message})
    }
}


module.exports = UserController

express routing:

router.get('/userprofile/:username', UserController.get)

next.js /userprofile/[username] server component inside page.tsx

import Image from "next/image"

interface UserInfo{
    _username:string,
    firstname:string,
    lastname:string,
    bio:string,
    profilelogo:string
}

export default async function UserProfile({params}:{params:{username:string}}){

    const data = await fetch(`http://127.0.0.1:3000/userprofile/${params.username}/`,{headers:{'Content-Type':'application/json','Accept':'application/json'}})
    const userInfo = await data.json()
   console.log(userInfo)


    return(

    <div className=''>
        <div className=''>

   <div>
            <div>
                <Image src={userInfo.profilelogo} alt='profilelogo'></Image>
            </div>
            <div >
                <div>{userInfo._username}</div>
            </div>
            </div>

            <div>
                <div className=''>
                    {userInfo.firstname} {userInfo.lastname}
                </div>
                <div>
                    {userInfo.bio}
                </div>
            </div>

            

        </div>

    </div> 

    )
}

how do i resolve this?

when i make a change in the backend, the userInfo in the frontend is basically an empty object, and nothing in the backend happen, which basically means the console.log() that i put everywhere in the backend code is not printed anymore.