VRFX Realtime Studio website
The combination of AWS, React Router, and a self-developed CMS makes the VRFX Realtime Studio homepage a prime example of the advantages of JavaScript frameworks in combination with cloud services.
VRFX Realtime Studio is a Swiss company that develops interactive experiences, VR, and visual effects.
Deployment on AWS
AWS cloud services are used for hosting, databases, and other parts of the technical infrastructure. These offer good value for money for small to medium-sized web projects such as this one and are considered reliable.
Services and the interaction of individual components are configured with SST, an Infrastructure-as-Code (IaC) framework. This reduces development time and minimizes the risk of faulty configurations, which are often the cause of security vulnerabilities in cloud environments.
Further links to the backend
Fullstack framework
The website has been built using React Router v7 in framework mode.
For on-page SEO, we structured large parts of the content with schema.org markup to facilitate indexing in search engines and LLMs. One special task was integrating WebGL apps, which are used as showcases.
More on React Router v7
React Router v7 significantly enhances the development of web applications that leverage cloud services by providing a "framework mode" that integrates server-side rendering (SSR) and data-loading capabilities directly into the router.
This eliminates the need for separate, external libraries for data fetching and state management, reducing complexity and boilerplate. By defining data requirements with loader and action functions at the route level, it enables cloud functions to pre-fetch data in parallel before the component even renders. This approach, combined with automatic code splitting, greatly improves performance and SEO, making it an excellent choice for modern, full-stack applications deployed on serverless platforms like AWS.
React Router v7 has been merged with the Remix Framework, becoming its successor. Unlike Next.js, an alternative React full-stack framework, React Router uses native functions in browsers and Node runtimes. This likely results in higher page speeds and a lower chance of unintended side effects. It is also more flexible with regard to deployment in different environments.
Further links related to React and React Router
- React frontend library
- React Router fullstack framework for server side rendering, routing and general tooling
Integrated headless CMS
The headless CMS used is a self-developed prototype. The approach chosen for the VRFX website is unique in that the CMS and the public website are partially based on the same components. In this respect, the chosen approach represents an integrated headless CMS.
Code splitting separates the program components of the CMS from those of the public website. This provides additional security and keeps the code that generates the public website small, so that its performance is not impaired.
Advantages of this approach are:
- Scalability without additional costs which would be incurred with a service such as Contentful or Sanity.
- High performance, as hosting, database, and computing unit are located at AWS and processes required to respond to a request run faster and more efficiently.
- Flexibility in the organization and structure of the data.
- The project is portable because it can be hosted by a provider other than AWS if the components connected to the database and file server are adapted.
Collaborating on the development and adaptation
I had never used the CMS prototype for a client's website before and was able to get VRFX on board as a beta tester. The collaboration went smoothly, creatively, and productively, as the VRFX team is technically savvy and Pascal provided valuable support as a former web developer.
As a result, the CMS is tailored to their needs, and the website's technical performance is excellent, as demonstrated by benchmark tests related to best practices and page load speed.
