Nextjs Hydration issues. Deleting page-cache in order to avoid hydration issues

Question

I noticed that everytime I make changes in my code, I would have to empty my page-cache in order to avoid hydration issues. Is there a way to avoid this?

I'm creating this simple Navbar for example

import Link from "next/link";


const Navbar = () => {

    return (
        <div className="w-full h-20 bg-indigo-800 sticky top-0">
            <div className="container mx-auto px-4 h-full">
                <div className="flex justify-center items-center h-full text-2xl">
                    <div className="flex flex-row gap-x-6 text-white">

                        <Link href="/" >Home</Link>

                        <Link href="/login">Login</Link>

                        <Link href="/signup">Sign-up</Link>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Navbar;

I don't really want to keep deleting my page-cache unless that's how it goes? but i don't think so.