A data layer built for Server Components

With Server Components, the page is the composition root: it awaits data and hands typed props to pure sections. The trick is making sure the page never knows whether that data came from a database, a mock, or an API — only the service does.

The page composes, the service resolves

export default async function JournalPage() {
  const [featured, latest, categories] = await Promise.all([
    getFeaturedArticle(),
    getArticles(),
    getJournalCategories(),
  ]);
  return <Explorer featured={featured} articles={latest} categories={categories} />;
}

Islands only where you touch

• The listing is a Server Component; only the filter + search is a client island.
• The article body renders on the server; the table of contents and reading progress are the only islands.
• Everything else ships as HTML — fast, indexable, and cheap.