DEV Community

Cover image for SXO: Optimized Server-Side JSX. Build Simple. Build Fast
Víctor García
Víctor García

Posted on

SXO: Optimized Server-Side JSX. Build Simple. Build Fast

#webdev #javascript #rust #jsx

If you're looking to build high-performance websites without the complexity of client-side frameworks, SXO is a server-side JSX framework designed for speed and simplicity. It skips React's overhead, offering a lean alternative for server-rendered content.

SXO delivers:

  • Composable JSX optimized for server rendering.
  • Intuitive, explicit directory-based routing.
  • Blazing-fast builds powered by esbuild and a Rust/WASM JSX precompiler.
  • A unified CLI for development, building, and serving.
  • Predictable output with separate client/server bundles and a route manifest.

GitHub: gc-victor/sxo

Key Features & Architecture

SXO combines a powerful toolchain with a simple structure:

  • Routing: Define routes with folders. Each index.(jsx|tsx) file in src/pages becomes a route, supporting dynamic segments like [slug].
  • Pages: Each page exports a JSX render function and optional head metadata for titles, scripts, and styles.
  • Performance: A Rust-powered JSX precompiler and esbuild ensure top-tier build speed.
  • Reactivity: Add partial interactivity with reactive islands ([reactive-component]) without a full client framework.
  • DX: The dev server uses SSE for precise hot-replacement, updating only changed fragments without a full refresh.

Project Structure:

your-app/
├── src/
│   ├── components/     # Optional - @components alias
│   ├── utils/          # Optional - @utils alias
│   ├── middleware.js   # For custom request handling
│   └── pages/
│       ├── index.html  # HTML shell
│       ├── global.css  # Global styles
│       ├── index.jsx   # Route: /
│       └── about/
│           └── index.jsx # Route: /about
└── package.json
Enter fullscreen mode Exit fullscreen mode

Build Output:

  • dist/client/: Hashed static assets (CSS, JS).
  • dist/server/: Server bundles and a routes.json manifest.

Get Started in Seconds

Begin without installation using npx or pnpm dlx:

npx sxo dev
Enter fullscreen mode Exit fullscreen mode

Example Page (src/pages/index.jsx):

import { Page } from "@components/Page";

export const head = { title: "Home" }; // Injected metadata

export default () => (
  <Page>
    <h1>Welcome to SXO</h1>
  </Page>
);
Enter fullscreen mode Exit fullscreen mode

Core Commands:

  • sxo dev – Start dev server with hot-reload.
  • sxo build – Create production builds.
  • sxo start – Serve the production build.
  • sxo clean – Remove build artifacts.

Advanced Configuration

Middleware: Add src/middleware.js to handle logic like authentication, logging, or headers. Export a single function or an array. Changes are reloaded in development.

Custom Paths/Ports: Override defaults via CLI flags:

sxo start --pages-dir ./src/pages --port 4011
Enter fullscreen mode Exit fullscreen mode

Why Choose SXO?

SXO is a powerful, minimal foundation for server-rendered sites like blogs, documentation, or landing pages. It offers:

  • Unmatched Build Speed from esbuild and Rust.
  • A Clean Developer Experience with simple conventions and APIs.
  • Granular Updates for rapid iteration in development.
  • Zero Framework Lock-in, allowing you to add reactivity only where needed.

It’s the ideal tool for developers who want the familiar component model of JSX without the overhead and complexity of a full client-side framework.

Top comments (0)