Vite SSR BOOST: Simple and powerful framework for creating SSR and SPA React applications

Greetings!👋 I am Mikhail, the Chief Technology Officer👮‍♀️ at Lomray Software. I am delighted to present a concise summary of our progress in crafting a specialized framework designed for building React applications with strong Server-Side Rendering (SSR) capabilities. Moreover, I will disclose the results of our hard work and dedication.

Monumental achievements often stem from humble beginnings, as the saying goes. In our case, we initially managed a few React applications that lacked server-side rendering capabilities. As time went on, we realized the need to transition these applications towards server-side rendering. Since the react-router library manages standard navigation in regular React applications (SPA, CRA), we set out on a mission to find a solution that would allow us to deploy existing apps seamlessly with minimal adjustments for server-side rendering. Unfortunately, the options for server-side rendering solutions within the React ecosystem, particularly when combined with react-router🛣, were quite limited. Next.js, for example, didn't align with our objectives due to its routing system and specific features. Eventually, we came across a framework called after.js, which provided us with the means to bring our vision to life. However, as time passed, we encountered a hurdle: React and its related libraries underwent significant updates while after.js remained stagnant. Despite accumulating a considerable number of GitHub stars⭐, its development unfortunately came to a halt.

Given the limited options available and informed by the latest trends, we made the decision to create our own framework, utilizing advanced technologies to tackle the existing obstacles. Our primary objective was to enable a smooth transition from a regular React application to SSR (and vice versa), with minimal adjustments required. The ultimate aim was to develop an application that could be deployed in both SSR and SPA modes.

Let me present to you the Vite SSR BOOST🔋. Initially designed as a plugin, it naturally evolved into a comprehensive library.

Here are the main features of Vite SSR BOOST:

• Versatility for application development as SSR or SPA (CRA).
• Easy switching between SSR and SPA modes at any time.
• Simplified building process without the need for SSR or SPA-specific modifications.
• Smooth integration of react-router for seamless navigation.
• Utilizing the complete potential of Vite's capabilities.
• Native support for rendering to a stream (rendertopipeablestream).
• Full compatibility with Suspense.

It is worth mentioning that possessing basic knowledge in Node.js and React Router is adequate. Here is a concise illustration 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;

Undoubtedly, our journey faced considerable obstacles throughout. Nevertheless, in accordance with the famous saying, "what doesn't kill you, makes you stronger," we have emerged stronger than ever. Rather than inundating you with an abundance of words, I am delighted to introduce a demo repository that highlights an application where we have effectively addressed various development challenges alongside the framework.

We are eagerly awaiting your thoughts and are open to any feedback you may have. Your input serves as a great source of motivation for us. Thank you for your valuable attention.

Follow us on X.