So in a page, I have this code:

import { fetchLatest } from "@/lib/fetch-prices";
import { db } from "@/db";
import { posts} from "@/db/schema";
import { readSession } from "@/lib/session";
import { eq } from "drizzle-orm";
import PortfolioAssets from "./assets";

export default async function PortfolioPage() {
  const changingData = await fetchLatest();
  const session = await readSession();

  if (!session) {
    throw new Error("Session not found");
  }

  const myPosts = await db
    .select()
    .from(posts)
    .where(eq(posts.userId, session.userId));

  if (!prices) {
    throw new Error("Could not load prices");
  }

  return <ShowData data={myPosts} changingData={changingData} />;
}

So in this page, we have 2 data. One should always be fetched and not be cached changingData. And one should be cached until it is revalidated by some server action myPosts
What is the correct way of doing this?