Next.js beginner here: Why does Server-Side Rendering data sometimes appear on client-side only?

Hello everyone! I'm completely new to Next.js and trying my best to understand its core concepts, especially around data fetching strategies. I'm currently putting together a small portfolio site as a learning project and thought Next.js would be perfect for exploring powerful features like Server-Side Rendering. I've set up a very basic API endpoint and I'm trying to fetch some project data from it. My main confusion arises when using getServerSideProps. I'm following the official documentation, expecting my data to be fully pre-rendered on the server and thus immediately available on page load. However, what I'm observing is inconsistent behavior. Sometimes, when I navigate directly to a page or perform a hard refresh, the data appears to load client-side, causing a noticeable flicker or a brief delay. It definitely doesn't feel like it's consistently pre-rendered as I understand Server-Side Rendering should work. I've even added console.log statements to both server and client contexts, and it's quite perplexing to see where things are actually being rendered.

What could be causing this inconsistent behavior where data fetched via getServerSideProps sometimes seems to load client-side? Are there common pitfalls or mistakes beginners like me often make concerning getServerSideProps or the hydration process that could lead to this kind of flickering or delayed data appearance? Anyone faced this before or have any tips for a newbie trying to get a grip on Next.js?