Member-only story
Why Don’t You Use Server-Side-Rendering in Your React App?
If complexity is the reason, then this is for you!
TL;DR: Infrastructure-Components let you create, start, and deploy a Serverless Isomorphic React App easily. These React-like components (e.g. <IsomorphicApp/>) seamlessly integrate the setup of your project with your own React components. They do all the technical configuration for you and thus, they enable you to concentrate on writing the business logic of your App.
Getting started with React is easy. For instance, create-react-app creates the project setup for you. But when you want to deploy your app, it gets harder.
Being able to create and deploy an isomorphic app is the first step if you want to become a full-stack developer.
Infrastructure-Components let you create, start, and also deploy your React-apps. So far, they let you create single-page apps, service-oriented-apps, and full-stack-apps. The latter support backend services and databases out of the box.
In this post, we’ll have a look at how you can even create an isomorphic React app, easily.
An isomorphic app complements your web-app with server-side-rendering. As a result, the user can see your app directly when the browser’s initial HTTP-request returns. She does not need to wait for a script to download your app and render it locally, anymore.
The problem of isomorphic apps always has been the complexity of their setup. It requires the setup of a server. It requires matching of paths. It requires you to make sure that your backend and your frontend work together.
This is where Infrastructure-Components come into play. Infrastructure-Components let you specify the architecture of your app as a React-component. They do the technical configuration for you.
Define the Architecture of Your App
Infrastructure-Components-based projects have a clear structure. You have a single top-level component. This defines the overall architecture of your app. Sub-components (children) refine the app’s behavior and add functions.
In the following example, the <IsomorphicApp/>-component is your top-level component…
