Get Started
Nothing is easier to get started with React Server Components than @lazarv/react-server
. You can use the react-server
CLI as you would node.js. As soon as you have a file with a server component exported as default, you can run it with react-server
. Your application can be a single file for micro-applications or even use the file-system based router to create a full-fledged complex application.
You will only need node.js and a package manager to get started. We suggest the latest node.js runtime and pnpm as the package manager,but you can use any package manager you would like to.
Support for other JavaScript runtimes including Bun and Deno is planned. Support for multiple cloud platforms is also planned and contributions are welcome. If you would like to contribute, please open an issue on GitHub.
Just add @lazarv/react-server
to your project. You will not need anything else to get started with a micro-application.
pnpm add @lazarv/react-server
Just by creating an App.jsx
file and exporting a React Server Component as default makes your application ready to run.
export default function App() {
return <h1>Hello World</h1>;
}
To start your application in development mode, you can use the react-server
CLI simply by passing the path to your application entry file. By using the --open
flag, your application will be opened in your default browser on http://localhost:3000.
pnpm exec react-server ./App.jsx
Note: if you want to open the application in your default browser, you can use the
--open
flag.
After you have developed your application, you can build it for production. This will create a .react-server
folder with all files needed to run your application in production mode.
pnpm exec react-server build ./App.jsx
To start your application in production, just use the start
command. This will start your application in production mode.
pnpm exec react-server start
Note: if you don't want to install the
@lazarv/react-server
package and you just want to try out something quickly, you can usenpx
to run thereact-server
CLI. This way, it's not required to install anything else if you use JavaScript. It's enough to have a.jsx
file with a React Server Component exported as default to run your application. Just runnpx @lazarv/react-server ./App.jsx
to start your application in development mode.
Success! You have now created your first application using @lazarv/react-server
.
Here are some recommended topics to learn more about. You can read these in any order you would like. You can even leave for now to start building your application and come back when you run into trouble or have a question.
Don't forget that you can join a discussion on GitHub Discussions if you have any questions or need help.
Integrations
How to integrate with other libraries
Learn how to integrate with other libraries and how the framework works togetherwith tools like Vite, TypeScript, Tailwind CSS and more.
Learn more
Framework
Advanced features
Learn about the advanced features of the framework, like how to access the HTTP request and response objects, how to use caching, or how to build a micro-frontend application.
Learn more
Router
File-system based router
Learn how to use the file-system based router to create a full-fledged application with nested routes, dynamic routes, and more.
Learn more
You can also learn more about the framework by reading the following tutorials. These are not required to get started, but they can be helpful to understand some of the concepts and features.
Hello World!
Your first application
Create a new React application with server-side rendering in just a few steps. Start building your app with React Server Components and enjoy faster initial page loads.
Read tutorial
Todo App
Using server actions
Build a simple Todo application with server actions. Learn how to interact with the server from your components and manage server-side operations efficiently.
Read tutorial
Photos
Using client components
Learn how to use client components to create interactive elements in your application. Enhance your user experience with client-side rendering and dynamic content updates.
Read tutorial