I was following the new React server-side rendering features for years now, since React 18. Everything started with using streaming and <Suspense> for rendering the document for the user. I had experiments in the past using React 18 streaming rendering using vite-plugin-ssr. Then came Next.js 13 and React Server Components were unleashed. But it didn't stop there. Server Actions! What awesome features these are from the React team!
A new and better PHP
It's fashionable to say that PHP is bad. But reality is that it's not and it will not die in the foreseeable future. But what's the issue with PHP? Switching language and context when you need something to work in the browser! There are a myriad of ways to handle the issue. But can you imagine a solution, where you get all the benefits of PHP AND you can create components which are running only in the browser in an instant? We are mostly talking about React Server Components, but the star of the show for me is mixing server and client components in the same React tree and it magically works!
Your BFF!
Another hot topic in web development is tRPC, which is a fantastic tool. But for a backend-for-frontend API, it's a bit of an overkill. Instead of creating the setup for tRPC and using its client, wouldn't be better to just use your functions as references and pass them to the browser, to be called as a <form>'s action or just programmatically from your client components? Deal done, this is Server Actions!
The first implementation of these React features were done by Next.js. Not surprising as these teams are working in close collaboration. But what to do if you're not fully satisfied with Next.js? What are your options?
In the past few months, I eagerly dived-in into this topic and the result is @lazarv/react-server, my own new experimental React meta-framework.
In search of flexibility
I very much like React's approach on how un-opinionated it is and supporting the "bring-your-own" mindset for your app. Next.js was always too rigid for me, so I wanted to see something configurable to the last bit possible.
I wanted to use the following 2 major tech with these new React features: ES modules and Vite.
For a long time now, I'm a huge advocate of ES modules. It's almost a shame that CommonJS is still here, despite the effort people are putting into using ES modules wherever possible. ES modules are supported by all browsers natively and fits for client components so well.
Vite is providing the best developer experience so much, that almost everyone is using it now. Astro, Nuxt, SolidStart, SvelteKit to mention just a few. Vite is highly customisable and extensible by using plugins. My first encounter with Vite was when I implemented my first streaming React SSR using vite-plugin-ssr and I always use it since then whenever possible. Vite and ES modules are best friends as Vite makes working with ES modules an ease.
Getting started
Do you ever dreamed about using a server-side rendering framework easy as a simple node.js script? With @lazarv/react-server, it's possible.
Let's setup the environment for our first app! We will use pnpm as it's the best and fastest package manager for node.js.
mkdir my-app
cd my-app
pnpm init
pnpm add @lazarv/react-server
Now believe it or not, we're ready to implement our app. Just create a new entrypoint for the app in ./App.jsx or choose a name you like.
export default function App(){
return <h1>Hello World!</h1>;
}
Now you're ready to start this app using @lazarv/react-server!
pnpm exec react-server ./App.jsx
This almost feels like using node ./App.jsx, doesn't it? The framework has so many features it would be hard to include everything right away, so stay tuned for more! Check out the repo in the meanwhile and try to run the examples in the repo. You can start the Photos example as simple as:
git clone https://github.com/lazarv/react-server
cd react-server
pnpm install
pnpm --filter ./examples/photos dev
Future of @lazarv/react-server
As this is only a personal experimental framework, I would only suggest to give it a go, but only use this for your own learning about the future of React. Which is still bright and awesome!
Please provide feedback on GitHub, here in dev.to or on Twitter/X. Every feedback is much appreciated and adds value to this project. Thanks!
I'll work on documentation and bug fixes for now, so please be patient and give the repo a star on GitHub to get notified on what's happening with this framework.
Maybe this will grow into something more.
Much more...
Top comments (0)