Instead of using getServerSideProps you can add async to your component definition and make the check for login directly inside the body of the component (as long as it is in a server component). If you want the component to be a client component that renders different uis based on the login state with reactiveness and hooks etc, then what I would recommend it to pass the information from the parent that renders it, which probably is a server component. Do this make sense?

So in the App Directory there is no longer the possibility of having serverside validations and interactivity on the same page without a child component?

Got it, so I'm going to have to change the way I "engineer" the pages I develop to adapt to the new method. Probably the pages directory will be deprecated at some point, right?

You are right, it is a pretty different way to engineer pages. On the latest project at my company we started using the app directory and although its different I think it's pretty convenient in a lot of ways too. I'd be willing to bet pages directory will stick around for a while though because there's so many production-grade applications that are actively using it and do not want to make the time-investment switch to upgrade to the app directory for their entire codebase.

Okay thanks for everything!

Just to give you a pointer in the right direction with example code - this is what a basic implementation might look like for getting login state on the server and if logged in, show the user an interactive dashboard with their name, and if not then show them a mock interactive dashboard.

// dashboards.tsx
"use client";
import { useState } from "react";

export const RealDashboard = ({ user }) => {
    const [clicks, setClicks] = useState(0);
    return (
        <div>
            Welcome to your dashboard, {user.name}!
            <button onClick={() => setClicks(clicks+1)}>
                Clicked {clicks} times
            </button>
        </div>
    );
};

export const MockDashboard = () => {
    const [clicks, setClicks] = useState(0);
    return (
        <div>
            Here's a mock dashboard to show you what you get when you register!
            <button onClick={() => setClicks(clicks+1)}>
                Clicked {clicks} times
            </button>
        </div>
    );
};

// page.tsx
export default async function Page() {

    const isLoggedIn = await getLoginState();

    if (isLoggedIn) {
        const user = await getUser();
        return <RealDashboard user={user} />
    } else {
        return <MockDashboard />
    }

};

ok, thx