In this article I will talk about Isomorphic Web Application (a.k.a universal application), why we need them and how to build one.
Part A: Why Isomorphic Web Application?
Page load time is the average amount of time it takes for a page to show up. It’s calculated from initiation, when a user clicks on a page link or types in a web address to completion, when the page is fully loaded in the browser.
Page load time is usually measured in seconds, and is based on two parts:
- Network and Server Time: How long it takes to serve static assets like photos and other files is based on the internet connection speed.
- Browser Time: How long it takes for the browser to parse and execute the document and render the page to make it available for user interaction.
The above image shows how page load time affects your website sales, customer experience, revenue and SEO (search engine optimization). Isomorphic application target on improving the initial page load time and search engine optimization and hence the customer experience and revenue.
Part B: What are Isomorphic Applications:
Before diving into what isomorphic applications are we need to understand the evolution of web application. We will look into Client Side Rendered Application (CSR) and Server Side Rendered Application (SSR).
Client Side Rendered Application / Single Page Application:
- A Single page application is an application that works inside a browser and does not require page reloading during use and only the content that differs from the current page is reloaded. We use these types of application every day, example Facebook or GitHub.
- Single page application is a client side (browser rendered) application that bootstraps the entire website after initial load. This means when you visit a website using your browser, the server sends a HTML template and some JavaScript for your browser to execute the code that renders the actual content of the webpage.
- Because of the tight coupling of the code that creates the DOM, Single page application can handle complex DOM manipulation.
https://secure-peak-90342.herokuapp.com/
https://github.com/elavarasi/newsfeedcsr
Pros:
- Rich site interactions
- Fast website rendering after the initial load. SPA is fast, as most resources (HTML+CSS+Scripts) are only loaded once throughout the lifespan of application. Only data is transmitted back and forth.
- Highly responsive interactive web applications.
- Robust selection of JavaScript libraries.
Cons:
- Low SEO if not implemented correctly.
- Initial load might require more time.
- Requires JavaScript to be present and enabled.
- The initial server request is sparse returning an empty HTML file with a bunch of CSS and JavaScript (JS) links. Then the external files need to be fetched in order to render relevant markup. This means that the user will have to wait longer for the initial render and crawlers may interpret your page as empty.
Server Side Rendered Application / Multi Page Application:
- Multiple-page applications or completely server side rendered application is the traditional way of building web applications where in for every request to display the data or submit data back to server calls for rendering a new page from the server to the browser.
- In SSR, the server’s responds to the clients with a complete HTML of the page that needs to be rendered.
https://gentle-wildwood-71150.herokuapp.com/
https://github.com/elavarasi/newsfeedssr
Pros:
- The initial page load is faster
- No blank page flicker/ Loading…. image
- Great for static pages
- Very good and easy for proper SEO management. It gives better chances to rank for different keywords since an application can be optimized for one keyword per page.
Cons:
- Frequent server requests — Bottleneck with site that are very interactive.
- Throughput of your server is significantly less that CSR throughput.
- While page is rendered earlier and the customer can see the page sooner, they can’t really interact with it until JS is loaded.
- Non rich site interaction.
- The server generates a new page for every interaction with a user. Then, this page should be returned to a user. Such behavior can significantly increase the loading time and may lead to the lack of responsiveness.
Isomorphic Application / Universal Application:
Isomorphic application is the best of both worlds .. A hybrid approach of the new and the old way of building web apps where we want to serve a fully-formed HTML from the server for initial page load performance and SEO, at the same time we want the speed and flexibility of client-side application logic.
Isomorphic code is a code which can be executed both on the client and on the server. When a website is first opened, all operations are carried out on the server and the browser gets an HTML with all information (same as with traditional websites with static pages which search engines can index). After JavaScript is loaded the web application turns into a “single page app” and works respectively. This opens up all sorts of doors for performance optimizations, better maintainability, Search engine optimization, and more stateful web apps.
Part C: Building Isomorphic Applications with React
React is a great fit for building isomorphic applications as react was designed with the virtual DOM. A virtual DOM is like the DOM in your browser except it is not in your browser because it’s virtual and it means it can also be on the server.
We can take the same react app, create a virtual version of it and render it to a string, which is just HTML, sent down to the browser. The browser will render it quickly and create a virtual version on the client. The virtual version on the client matches up with the HTML, we sent down from the server, and react knows not to re-render it, giving us a much faster Time To Interactive (TTI).
What modules and methods are needed to build and Isomorphic Web Application.
- Express server to render our React app.
- renderToString from react-dom/server
- ReactDOM.hydrate from react-dom.
- StaticRouter from react-router-dom
- Redux for state management
- React Helmet — SEO — Manage all of your changes to the document head
- Babel
- Webpack
