Hello there!👋 I'm Mikhail, the Chief Technology Officer👮♀️ at Lomray Software. Today, I'm excited to share a brief overview of our journey in creating a custom framework tailored for developing React applications with robust Server-Side Rendering (SSR) support. Additionally, I'll be unveiling the outcomes of our endeavors.
As the adage goes, monumental achievements often originate from humble beginnings. In our scenario, we initially managed a handful of React applications lacking SSR capabilities. Gradually, the need to transition these applications toward server-side rendering emerged. Given that the standard navigation within regular React applications (SPA, CRA) is managed by the react-router library, we embarked on a quest to find a solution enabling seamless deployment of existing apps with minimal adjustments for SSR. Unfortunately, the landscape for SSR solutions within the React ecosystem, especially in conjunction with react-router🛣, was somewhat limited. Next.js, for instance, didn't align with our objectives due to its routing system and specific features. Eventually, we encountered a framework named after.js, which granted us the means to bring our vision to life. However, over time, we encountered the obstacle of React and related libraries undergoing significant updates while after.js remained stagnant. Despite amassing a commendable number of GitHub stars⭐, its development was unfortunately halted.
Confronted with a dearth of viable alternatives and armed with insights from current trends, we opted to forge our own framework, leveraging cutting-edge technologies to address prevailing challenges. It's important to acknowledge our appreciation for Next.js and the Vite SSR Plugin, both of which offer an exceptional SSR development experience. Regrettably, their routing systems fell short of our expectations. Our chief aim was to facilitate a seamless transition from a standard React application to SSR (and vice versa), requiring minimal modifications. The ultimate goal was for the resultant application to be deployable in both SSR and SPA modes.
Allow me to introduce the Vite SSR BOOST🔋. Originally conceptualized as a plugin, it organically matured into a comprehensive library.
🔑Key highlights of Vite SSR BOOST:
- Flexibility for developing applications as SSR or SPA (CRA).
- Effortless toggling between SSR and SPA modes at any point.
- Streamlined building process with no need for SSR or SPA-specific adjustments.
- Seamlessly integrated react-router for streamlined navigation.
- Harnessing the full potential of Vite's capabilities.
- Native support for rendering to a stream (rendertopipeablestream).
- Full compatibility with Suspense.
What is notable is that having minimal knowledge in Node.js and React Router is sufficient. Here’s a brief example of an application page:
import { Suspense} from '@lomray/consistent-suspense';
import type { FCRoute } from '@lomray/vite-ssr-boost/interfaces/fc-route';
import { Link, useLoaderData } from 'react-router-dom';
import UserPlaceholder from './components/placeholder';
import User from './components/user';
interface ILoaderData {
userIds: string[];
}
/**
* Just simple page which render short info about 3 users by id's
*/
const Details: FCRoute = () => {
const { userIds } = useLoaderData() as ILoaderData;
return (
<>
<p>
Header
</p>
<p>
Load users for id's: {userIds.join(', ')}
</p>
<div>
<Suspense fallback={<UserPlaceholder count={2} />}>
<>
<Suspense.NS>
<User userId="user-1" />
</Suspense.NS>
<Suspense.NS>
<User userId="user-3" />
</Suspense.NS>
</>
</Suspense>
<Suspense fallback={<UserPlaceholder />}>
<User userId="user-2" />
</Suspense>
</div>
<p>
Footer
</p>
</>
);
};
/**
* Just example (react-router API)
*/
Details.loader = (): ILoaderData => {
const userIds = ['user-1', 'user-2', 'user-3'];
return { userIds };
};
export default Details;
Certainly, our journey encountered significant challenges along the way. However, in the spirit of the adage, "what doesn't kill you, makes you stronger." Instead of overwhelming you with a multitude of words, I'm thrilled to present a demo repository showcasing an application where, alongside the framework itself, we've successfully tackled several related development issues.
We're eager to hear your thoughts and welcome any feedback you may have. Your input serves as a tremendous motivator for us. Thank you for your valuable attention.
Top comments (0)