“Isomorphic” word is defined as “different in ancestry, but having the same form or appearance” or “corresponding or similar in form and relations”.
First, web applications became available with server-side rendering. Users request a page and server-side returns the rendered page. After, single page applications (SPAs) have been upfront for a long time. There are lots of popular frameworks/libraries for SPAs, like Angular.js, React, Ember.js, Knockout.js and so on. They use MVC or MVVM structure. Basically, they get information from the server with API calls and then render pages in client-side.
However, SPAs have significant disadvantages:
Ideally, client-side and server-side rendering should be balanced for user experience and performance:
- Server-side rendering can be used for critical parts (for example an initial page layout or the main content in the page)
- Client-side rendering can be used for non-critical parts (for example comments in a content page or other side-functional parts in a page)
- Full SEO support: Fully formed pages are served. Pages are easier to crawl with search engine crawlers. Also, faster page loading assures better page rankings.
- Flexibility of client-side: With the balance of server-side and client-side, it is possible to have better web apps. Despite server-side rendering, flexibility of client-side is still useable.
- Maintenance: As the same code is shared by both the client and the server, we don’t have to write logics twice. There is less code and it is easier to maintain the code.
- Old device support: As rendered pages are served, it is not a problem to support old devices. (It is a problem in SPA frameworks/libraries)
- Better user experience: By balancing rendering of pages will create a better user experience. Important parts of a page will be rendered in server and will be shown to user initially. Other parts can be rendered in client-side after these important parts of page are loaded.
- Lots of logic should be handled in server-side. Handling Http requests, routing, rendering, styling and module loading can be difficult and external libraries would be needed in server-side rendering. They should be handled in the same way both in server-side and client-side.
- Server-side and client-side are different environments with different dynamics. Using same code may be problematic in different cases.
- React: Same React components can be used in both client-side and server-side. A mini tutorial is here: https://scotch.io/tutorials/react-on-the-server-for-beginners-build-a-universal-react-and-node-app
- Angular Universal: Angular 2 apps can be written universal. Rendering is available for both client-side and server-side. It provides better performance and optimisation for search engines.
- Rendr: Rendr was developed by Airbnb. “Rendr is a small library that allows you to run your Backbone.js apps seamlessly on both the client and the server. Allow your web server to serve fully-formed HTML pages to any deep link of your app, while preserving the snappy feel of a traditional Backbone.js client-side MVC app.”
- Rill: Rill provides the minimum for abstractions over Node.js and the browser enabling things like routing (with redirecting, refreshes and more), cookies, and middleware with the same api.
- Derby.js: DerbyJS is a full-stack framework for writing modern web applications. The same templates can be rendered to HTML in the browser or on the server. This means you can have fast page loads, search engine support and even use the same templates to render emails.
- Ezeljs: A boilerplate for Backbone projects that share code server/client, render server/client, and scale through modular architecture. Ezel makes it easy to write and maintain Backbone apps that run in the browser and on the server using Node.js. Built on popular libraries like Express, Backbone, and Browserify.
- Catberry: Catberry is an isomorphic framework for building universal front-end apps using components, Flux architecture and progressive rendering.
- Invisible.js: Invisible.js defines itself as “Reusable models in the client and the server”.
- Este: Este is a “starter kit for universal full–fledged React apps. One stack for browser, mobile, server”.
- Fluxible: Fluxible can be used to build isomorphic Flux applications. Their Github link is https://github.com/yahoo/fluxible.
- Mojito: Mojito is Yahoo’s framework built on YUI 3.
- Asana: A task management tool. They use their own framework named “Luna” for isomorphism.
- Airbnb: Airbnb uses a library named “Rendr” developed by company itself.
- Drupal 8: Drupal is an open source CMS system. Drupal started to use isomorphism with version 8. (see details)
- Telescope: Telescope is an app platform. They use Meteor and React for isomorphism.
- Ameblo: Ameblo is a popular blog in Japan. As the company says “almost all codes work for both client side (browsers) and server side (node.js) by the same flow” (see details). The company also states that their speed, load times, pageviews and bounce rates improved.
- Coursera: Coursera used isomorphism and provided 4x speed (see details) by using React and Flux. Their serving structure is given below.