npx create-whatever-app
. Start a new project in seconds without any setup or scaffolding required.We provide the create-seia-app
wizard to help you get your new project up and running quickly
$ 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:
$ 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:
$ npm start # yarn start or pnpm start
If everything is set up correctly, you should see the server running at http://localhost:5314.
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:
$ npm install seia.js
[!IMPORTANT]
Seia currently requiresreact
andreact-dom
as peer dependencies with the exact version19.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.
"scripts": {
"build": "seia build",
"start": "seia start"
}
Then, you can follow the same steps as outlined in the Quickstart Guide to build the project and start the SSR server.
React 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:
import { readFile } from 'node:fs/promises'
const FileContent = async ({ path }: { path: string }) => {
const buffer = await readFile(path, 'utf-8')
return <HtmlEscape>{buffer}</HtmlEscape>
}
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.
'use client'
import { useState } from 'react'
const Counter = () => {
const [count, setCount] = useState(0)
return (
<div>
<button onClick={() => setCount(count + 1)}>Increment</button>
<p>Count: {count}</p>
</div>
)
}
You can try a simple demo of Seia with the Blue Archive Students sample. This project is a simple SSR application that fetches and displays the list of students of the Blue Archive.
:point_right: Go to sample project README
For comprehensive details about the Seia API, configuration, and more, please visit the API documentation.
Become part of the community by joining our official Discord server!
Your support is invaluable for the ongoing maintenance and improvement of Seia. Here are some ways you can contribute:
<title>
.react-server-dom-webpack
dependency to pure Vite plugin."use client"
.Yurizono Seia(百合園セイア), member of the Tea Party at Trinity in the Blue Archive.
5314
mean?The port number 5314
is a L33T of "SEIA". This choice is inspired by Vite using port 5173.