Executing effects in server components

The last step is executing main inside HomePage using RuntimeServer:

const main = Effect.gen(function* () {
  const api = yield* Api;
  return yield* api.getPosts;
});

export default async function HomePage() {
  const posts = await RuntimeServer.runPromise(main);
  return (
    <div>
      <title>Index</title>
    </div>
  );
}

We are not handling possible errors here. For now, if something goes wrong, main will throw an error.

Since server components are executed once on the server, they can run any asynchronous logic using async/await.

The component can then access and render posts:

export default async function HomePage() {
  const posts = await RuntimeServer.runPromise(main);
  return (
    <div>
      <title>Index</title>
      <div>
        {posts.map((post) => (
          <div key={post.id}>
            <h1>{post.title}</h1>
            <p>{post.body}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

With these the server component is now complete:

  1. Define main to collect all the information
  2. Execute main using RuntimeServer
  3. Render posts
import { Effect } from "effect";
import { Api } from "../services/Api";
import { RuntimeServer } from "../services/RuntimeServer";

export const getConfig = async () => {
  return {
    render: "static",
  };
};

// 1️⃣ Define `main` to collect all the information
const main = Effect.gen(function* () {
  const api = yield* Api;
  return yield* api.getPosts;
});

export default async function HomePage() {
  // 2️⃣ Execute `main` using `RuntimeServer`
  const posts = await RuntimeServer.runPromise(main);
  return (
    <div>
      <title>Index</title>
      <div>
        {/* 3️⃣ Render `posts` */}
        {posts.map((post) => (
          <div key={post.id}>
            <h1>{post.title}</h1>
            <p>{post.body}</p>
          </div>
        ))}
      </div>
    </div>
  );
}