top of page
Logo der Online Agentur mdwp

Isomorphic/Universal JavaScript

Isomorphic or Universal JavaScript refers to JavaScript code that could be run equally on both the server and the client side. The main advantage of Isomorphic JavaScript is that it enables the first render of the app to be displayed quickly by the server, and any further updates can be taken care by the client side, thus making the webpage feel faster and more responsive to the user.

This type of JavaScript is primarily used in Single-Page Applications (SPAs) to enhance the user experience. The ability to run the same code on both the server and the client side is helpful in SEO as well, because search engine crawlers can index the fully rendered HTML instead of an empty page shell.

Below is a simple code snippet that demonstrates isomorphic JavaScript:

```javascript
// The code will work on both the server and client side because it only uses features common to both environments.
const message = 'Hello, Isomorphic JavaScript!';

if (typeof window === 'undefined') {
console.log(`Node.js: ${message}`);
} else {
window.alert(`Browser: ${message}`);
}
```
This code declares a constant variable `message`. Then it checks if `window` is undefined. If it is undefined, it means the code is being run on server side (node environment), and it logs the message to the console. If `window` is not undefined, the code is being run on client side (browser), and it displays the message in an alert dialog.

Remember that this is a highly simplified example. In a more complex app, you might render entire components on the server side and then "hydrate" them on the client side to make them interactive. You can accomplish this using a library or framework that supports isomorphic or universal JavaScript — such as React.

bottom of page