import Link from 'next/link';
import Login from "./login";




async function LoginPage(){

    const isAuth = await fetch('http://127.0.0.1:8000/checkauth/',{method:'GET',credentials:'include'})
    const checkAuth = await isAuth.json()
    console.log(checkAuth.status)


    

    


    return(
    checkAuth.status == false? 

    <Login></Login>
    :
     <div className='alrAuth'>You are already logged in!
    <div>Do you want to log out? <button >Logout</button></div>
    <Link href='/notes'>Test loading component.</Link>
    </div>
    )



}

export default LoginPage;

as you see above, when i load the page, it give the status of isAuth as false on initial render, however in the backend, it seem that i am authenticated, so i figured out that the page is being rendered before the actual response come to the client, how do i deal with this?