Skip to main content

Introduction to COSMOS RSC

COSMOS RSC is a React Server Components (RSC) template designed to showcase the features and capabilities of React 19 and Server Components. Built with a focus on modern web development patterns, it provides a solid foundation for building server-first React applications.

React Server Components

Build components that run exclusively on the server with direct access to databases and APIs

Streaming SSR

Progressive page loading with server-side streaming and Suspense boundaries

File-system Routing

Intuitive routing based on your pages directory structure

Server Actions

Handle forms and mutations directly on the server without API endpoints

Key features

React Server Components

COSMOS RSC implements React Server Components with webpack bundler, allowing you to build components that run exclusively on the server. This means you can:
  • Access server-side resources like databases and file systems directly
  • Keep sensitive data and API keys secure on the server
  • Reduce client-side JavaScript bundle size
  • Automatically code-split your application

Streaming rendering

The framework supports server-side streaming rendering, enabling progressive page loading. Your users see content faster as the page streams in chunks while remaining interactive throughout the loading process.

File-system routing

COSMOS RSC uses a basic file-system based routing system using the pages directory. Routes are automatically generated based on your file structure, making navigation intuitive and straightforward.

Server actions

Handle form submissions and data mutations with server actions - functions that run securely on the server without requiring separate API endpoints. Server actions integrate seamlessly with React’s form handling.

Client-side navigation

The framework includes client-side navigation with a suspense-enabled router built on the modern Navigation API, providing smooth page transitions without full page reloads.

Pre-configured styling

COSMOS RSC comes with Tailwind CSS pre-configured, allowing you to style your application with utility classes right out of the box.

Get started

Installation

Install COSMOS RSC and set up your development environment

Quick start

Build your first page with React Server Components

Build docs developers (and LLMs) love