Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/abiriadev/seia
:eight_pointed_black_star: Lightweight SSR framework for React Server Components
https://github.com/abiriadev/seia
react-server-components rsc server-components ssr vite vitejs
Last synced: about 2 months ago
JSON representation
:eight_pointed_black_star: Lightweight SSR framework for React Server Components
- Host: GitHub
- URL: https://github.com/abiriadev/seia
- Owner: abiriadev
- License: mit
- Created: 2024-05-31T08:30:37.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-06-09T21:50:33.000Z (7 months ago)
- Last Synced: 2024-10-26T02:33:25.929Z (about 2 months ago)
- Topics: react-server-components, rsc, server-components, ssr, vite, vitejs
- Language: TypeScript
- Homepage: https://seia.dev
- Size: 715 KB
- Stars: 79
- Watchers: 1
- Forks: 7
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Seia
_Lightweight SSR framework for React Server Components_
[Quickstart](#rocket-quickstart) •
[Try demo](./examples/blue-archive-students) •
[Documentation](https://seia.dev) •
[Wiki](https://github.com/abiriadev/seia/wiki) •
[Community](https://discord.gg/xuSH6QuQwG)
## :sparkles: Key Features
- **[React Server Components](https://react.dev/reference/rsc/server-components)** support: Renders ahead of time on the server and streams HTML to the client for improved performance.
- Unlike [Next.js](https://nextjs.org) which works only with Webpack-compatible bundlers, Seia adopts **[Vite](https://vitejs.dev)** for faster development and better compatibility with a great ecosystem.
- **Zero configuration and scaffolding**: No more `npx create-whatever-app`. Start a new project in seconds without any setup or scaffolding required.
- **Minimal client bundle size**: Reduces the client bundle size to a minimum at build time, requiring only three files to hydrate on the client.
- **Freedom to choose your tools**: Seia does not force you to use specific routing, data fetching, or state management solutions. Use your favorite tools.
- **TypeScript support**: Comes with type-safe API and hooks out of the box, but allows you to use JavaScript if you prefer.
- **Deploy anywhere**: Deploy your SSR server to Vercel, Netlify, Cloudflare Workers and anywhere [Hono](https://hono.dev) supports.
## :rocket: Quickstart
We provide the `create-seia-app` wizard to help you get your new project up and running quickly
```sh
$ npm create seia-app # yarn create seia-app or pnpm create seia-app
```
After running the command, it will start to ask you a few questions. Choose the options that best suit your needs. Once you've made your selections, a new project will be created with the specified settings.
Navigate into your newly created project directory and install the dependencies. After that, build your project using the following command:
```sh
$ npm run build # yarn build or pnpm build
```
This will generate a `dist` folder containing the server and client bundles. To start the SSR server, use:
```sh
$ npm start # yarn start or pnpm start
```
If everything is set up correctly, you should see the server running at http://localhost:5314.
## :zap: Migrate from Vite
If you already have a Vite project and want to migrate it to Seia, follow these steps.
First, install Seia as a dependency to your project:
```sh
$ npm install seia.js
```
> [!IMPORTANT]
> Seia currently requires `react` and `react-dom` as peer dependencies with the exact version `19.0.0-beta-26f2496093-20240514`.
> Once React 19 has a stable release, Seia will be updated to support the stable version.
After installing Seia, you can optionally add the following commands to your `package.json`'s `scripts` section for convenience.
```json
"scripts": {
"build": "seia build",
"start": "seia start"
}
```
Then, you can follow the same steps as outlined in the [Quickstart Guide](#rocket-quickstart) to build the project and start the SSR server.
## :question: What is Server Components?
[React Server Components](https://react.dev/reference/rsc/server-components) is a new concept first introduced in React 18 that allows you to render components on the server, but not on the client. What does that mean?
In traditional SSR architectures, the server renders the components and sends the HTML to the client. The client then re-renders the components and hydrates the HTML to make it interactive. This means your components run on both the server and the client, allowing you to access only the intersection of Node.js (or other runtimes) and web browser APIs.
With server components, you don't have to worry about this limitation. You can specify which components should be rendered on the server and which should be rendered on the client. This allows you to access the full Node.js API on the server and the full web browser API on the client, giving you the best of both worlds.
Imagine a simple example like this:
```tsx
import { readFile } from 'node:fs/promises'
const FileContent = async ({ path }: { path: string }) => {
const buffer = await readFile(path, 'utf-8')
return {buffer}
}
```
We've created a basic file server with React!
The `FileContent` component reads a file from the file system on the server and returns its content as formatted HTML. We all know that reading server files from a browser is simply not possible! Therefore, the `FileContent` component should be a server component, ensuring that it will only render on the server.
Then, how do we specify that this component is a server component?
The answer is; we don't have to!
Every components are considered server components by default. If you want to specify that a component should be client component, you can simply write `"use client"` at the top of the file.
```tsx
'use client'
import { useState } from 'react'
const Counter = () => {
const [count, setCount] = useState(0)
return (
setCount(count + 1)}>Increment
Count: {count}
)
}
```
## :fire: Try Demo
You can try a simple demo of Seia with the [Blue Archive Students](./examples/blue-archive-students) sample. This project is a simple SSR application that fetches and displays the list of students of the [Blue Archive](https://bluearchive.nexon.com/home).
:point_right: [Go to sample project README](./examples/blue-archive-students)
## :book: Documentation
For comprehensive details about the Seia API, configuration, and more, please visit the [API documentation](https://seia.dev).
## :busts_in_silhouette: Join the Community
Become part of the community by joining our official [Discord server](https://discord.gg/xuSH6QuQwG)!
## :heart: Support
Your support is invaluable for the ongoing maintenance and improvement of Seia. Here are some ways you can contribute:
- **Spread the word.** Share Seia on social media, blogs, or other platforms to help more developers discover it.
- **Give it a star.** If you like Seia, please give it a star on GitHub. This helps increase the project's visibility.
- **Report bugs.** Seia is still in its early stages, and there may be a lot of bugs or issues that need to be fixed or at least documented. If you find any, please report them as an issue.
- **Suggest improvements.** Seia's features are currently quite limited. If you have any ideas or know of similar frameworks with useful features, please share them. I am happy to consider new features.
- **Build with Seia.** If you create something using Seia, please let me know. I would love to see your projects.
- **Contribute to Seia.** I am glad that you are interested in contributing to Seia. Please see the below roadmap and opened issues to find out how you can help.
## :memo: Future Roadmap
- [x] RSC & SSR code splitting.
- [x] Minimize client bundle.
- [ ] CommonJS modules.
- [x] Provide configuration options and config file.
- [ ] Vite HMR and fast refresh.
- [ ] Stream RSC payload when navigating pages.
- [ ] Support existing routing solutions, along with RSC.
- [ ] Way to edit header or layout, for example like changing ``.
- [ ] Streaming and Suspense.
- [x] Provide CLI.
- [ ] Use user's Vite config and plugins.
- [ ] Distribute Seia as a single Vite plugin, if possible.
- [ ] Context API.
- [ ] Allow importing external React libraries.
- [ ] Server Action?
- [ ] Reduce redundant Vite build call.
- [ ] Rewrite `react-server-dom-webpack` dependency to pure Vite plugin.
- [ ] Show build-time error when using client-side API without `"use client"`.
- [ ] Add benchmarks.
- [ ] Telemetry.
- [ ] Remove hacks and webpack polyfills.
- [ ] Allow user to use Seia as a hono middleware.
## :raising_hand: Where's the name from?
[Yurizono Seia(百合ゆり園ぞのセイア)](https://bluearchive.fandom.com/wiki/Yurizono_Seia), member of the [Tea Party](https://bluearchive.fandom.com/wiki/Tea_Party) at [Trinity](https://bluearchive.fandom.com/wiki/Trinity_General_School) in the [Blue Archive](https://bluearchive.nexon.com/home).
## :grey_question: What does the default port number `5314` mean?
The port number `5314` is a [L33T](https://en.wikipedia.org/wiki/Leet) of "SEIA". This choice is inspired by [Vite using port 5173](https://github.com/vitejs/vite/pull/8148).
## :pray: Special Thanks
- The [React](https://react.dev) team for RSC, and webpack version of its implementation.
- [Rollup](https://rollupjs.org) by [Rich Harris](https://github.com/Rich-Harris) and [Vite](https://vitejs.dev) by [Evan You](https://evanyou.me) for best toolchain ever.
- [SWC](https://swc.rs) by [kdy1](https://github.com/kdy1).
- [Next.js](https://nextjs.org/) by [Vercel](https://vercel.com) for inspiration.
- [vite-rsc](https://github.com/cyco130/vite-rsc) by [nksaraf](https://github.com/nksaraf) for inspiration.
- [Waku](https://github.com/dai-shi/waku) by [Daishi Kato](https://github.com/dai-shi) for inspiration. A lot of part was inspired by Waku.
- [Vike](https://vike.dev) by [brillout](https://github.com/brillout) for inspiration.
- [Hono](https://hono.dev/) by [Yusuke Wada](https://yusu.ke)
## :sparkling_heart: Sponsors
## :scroll: License
[](./LICENSE)