I am building a task management application and I am wondering what the best way to approach this is. Currently I get all of the data on a server component with the real page as a client component nested inside of it,

import { isSession, getUsername } from "./server";
import App from "./app";

export default async function Home() {
  await isSession();
  return (
    <App username={await getUsername()}/>
  );
}

but I feel like this is just the wrong way to do it. How is this normally done?