23
What Is Isomorphic React App
During my career as a web developer, I heard the term isomorphic app countless times. At first, I thought it's some kind of advanced concept. The concept only seasoned developers can use. But as it turns out, it's just a fancy word for the term _ universal _.
In fact, everyone with any expertise level can start creating isomorphic web apps using React.
In this article, I'm gonna show you how. But first, let's start with the definition of an isomorphic app.
Definition of Isomorphic React App:
In web development, and React in particular. Isomorphic React App is a web app that consists of code that can run on both server and client-side. It usually takes full advantage of performance and SEO friendliness from the server. And combine it with browser capabilities to handle complex user interactions.
Each isomorphic web application consists of 3 important aspects:
- Initial application request
- Consecutive requests
- Server-side state management
Initial request is always made when you visit the application for the first time. This request is very important because it determines the speed of your website.
In isomorphic web apps, the content is always rendered and served to the browser by the server.
After the page is rendered, users tend to click around, navigating between the pages. All of these actions are handled on the client-side, using single-page application techniques.
This part is crucial in order to make user interactions as smooth as possible.
In order to display the page correctly, we need to know in what state the application is. That's why we need to store the state of the application on the server. And then provide this state to the browser.
The browser then uses it to render the application in a correct state. Using this technique, the page comes to the browser in ready to render state. And no additional re-renders are needed on the browser side.
Isomorphic architecture is a popular architectural approach to developing web applications. It improves the user experience and increases the site’s speed by loading the necessary code on the first visit and caching it for subsequent visits.
You'd think that adapting this pattern can be tricky. But it's actually the opposite. If you're creating a new React application. And you want to make it isomorphic, all you need to do is use a framework called NextJS.
NextJS is based on isomorphic architecture and it's safe to say, this framework is fully isomorphic. If you want your web app to be isomorphic, and don't want to handle all the obstacles yourself. This framework will gladly do it for you.
Now that you know what an isomorphic app is, and how to make one. It's time to address the pros and cons of going isomorphic. Let's start by listing the benefits. And then, we'll discuss each one of them in more detail.
Pros
- Better consistency across all browsers and devices
- SEO friendly
- Increase in speed and performance
- More concise codebase
The isomorphic application ensures that it performs at a similar level across all platforms and browsers. This rapidly increases the consistency or performance. End-users get a more consistent experience across different devices. And developers have a more pleasant time during development, due to the fact they are not required to build two versions of their website.
Search engine optimization is an important aspect of any web application. Especially if it is based on the content.
Because of the fact that the isomorphic app is served on the server. Search engine crawlers have a pleasant time finding and indexing the pages of this app. In other words, isomorphic web apps are SEO-friendly.
The very first request is fast because it's handled by the server. It's fast because it only returns the critical resources needed for the initial render. Subsequent requests are even faster because they use the power of AJAX requests.
The code is shared between the client and the server. And usually, the same developer can work on both sides of the application. This makes the codebase cleaner, simpler, and more enjoyable to work on for any developer.
As it usually is, each pattern comes with its downsides. And an isomorphic pattern is no exception to this rule.
Cons
- Adapting isomorphic thinking
- Trickier debugging
- Sharing secrets
When we consider building an isomoprhic application for the first time, there is a considerable learning curve. If you're used to building single-page applications on the client-side, you realize you can't leverage all the features that the browser provides.
Let's consider window object. It is perfectly fine to use it in the browser. But on the server-side, there is no way to access it, since the server does not have access to the browser window.
Because of the fact that the isomorphic app handles requests both on the server and client-side. In order to debug them, we need to set up a debugger on both client and the server.
Also, during the debugging process, it's important to realize where is the request happening. And troubleshoot accordingly.
An essential part of any web application is the management of secret keys and tokens. This information can't be exposed to the user, no matter what!
In isomorphic apps, we'll be faced with a situation where we have to manage multiple sets of secrets. To be more precise, we'll need to manage 2 sets of keys. One for the client and one for the server.
The isomorphic concept is certainly exciting. And luckily for us, not so hard to dip our feet into. A framework like NextJS makes it super simple to start and build an isomorphic react app that our users will love.
Today, we learned what the isomorphic React app is. You also learned what steps to take if you want to build your own isomorphic React app.
We learned that isomorphic apps provide better consistency across all devices and platforms. They also come with better performance and SEO optimizations.
The technology is certainly exciting and I encourage you to try it. And what would be the better way than creating your own isomorphic React app?
23