is this really a server-side page protection?

[stardvst]

the following code is presented under server side page protection mechanism (https://next-auth.js.org/tutorials/securing-pages-and-api-routes#server-side):

import { useSession, getSession } from "next-auth/react"

export default function Page() {
  const { data: session } = useSession()
  if (typeof window !== "undefined") return null
  if (session) {
    return (<h1>Protected Page</h1>)
  }
  return <p>Access Denied</p>
}

export async function getServerSideProps(context) {
  return {
    props: {
      session: await getSession(context),
    },
  }
}

it seems to me this is still a client-side protection, because when i printed session inside Page component, it was undefined server-side, and a session object client-side.

this approach, on the other hand, returned session object server-side as well as client-side:

import { getSession } from "next-auth/react"

export default function Page({ session }) {
  if (session) {
    return (<h1>Protected Page</h1>)
  }
  return <p>Access Denied</p>
}

export async function getServerSideProps(context) {
  return {
    props: {
      session: await getSession(context),
    },
  }
}

please let me know if i'm missing something.

[stardvst]

anyone, please shed a light for me?