Using effect in server component

We are finally ready to implement the first server component.

Inside src/pages/index.tsx we define a main function. main is responsible to define all the logic required to collect all the information needed to render the page.

main is a convention that I always use to define effects for server components.

In this example main accesses Api and executes the getPosts method:

import { Effect } from "effect";
import { Api } from "../services/Api";

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

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

export default async function HomePage() {
  return (
    <div>
      <title>Index</title>
    </div>
  );
}

At this point the type of main is Effect<readonly Post[], HttpClientError | ParseError, Api>:

• readonly Post[] is the valid response from the API
• HttpClientError | ParseError collects all the possible errors (from getPosts)
• Api is the dependencies required to execute main

Executing main requires to provide all the dependencies. Since Api is directly included inside RuntimeServer, we don't need to add any more code. That's what makes a runtime so convenient!