I have a <Markdown path="file.md" /> component that renders markdown at the specified path. I want to render README.md file an show it in my main page. The page also contains a client component too so i can fully cache the route. So it always re-renders the markdown in the server on every request. Is there a way to statically render a single component and use it in different places?

"use server";

import fs from "node:fs";

export default async function Markdown({ path }: { path: string }) {
  const content = fs.readFileSync(path).toString();

  console.log("File readed");

  return <div>{content}</div>;
}

main component, i want the Markdown component to be cached

export default async function Home() {
  const codes = (await redis.get("codes")) as string[];

  return (
    <main>
      <Markdown path="README.md" />
      <App codes={codes} info={null} />
    </main>
  );
}