React js

Isomorphic React

What is Isomorphic React?

  • Isomorphic React means running React code both on the server and the client.

  • Server renders the initial HTML, sends it to the browser.

  • Client “hydrates” that HTML and takes over, making the app fully interactive.

  • Improves performance, SEO, and user experience.

Why Use Isomorphic React?

  • Faster initial page load (server sends fully rendered HTML).

  • Search engines can index the content easily.

  • Better for users on slow connections or devices.

  • Share code between server and client.

How Does It Work?

  1. Server-side rendering (SSR): React components render on the server into HTML.

  2. Server sends HTML + JavaScript bundle to browser.

  3. Hydration: React on the client takes over the server-rendered HTML and attaches event handlers.

  4. Client continues to manage UI interactions and updates.

Popular Frameworks Supporting Isomorphic React

  • Next.js — Most popular framework for SSR and static site generation.

  • Gatsby — Focused on static sites but supports SSR.

  • Custom setups with Express.js + ReactDOMServer.

Simple Example Using ReactDOMServer

js
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import express from 'express';

const app = express();

function App() {
return <h1>Hello, Isomorphic React!</h1>;
}

app.get('/', (req, res) => {
const html = ReactDOMServer.renderToString(<App />);
res.send(`
<!DOCTYPE html>
<html>
<head><title>Isomorphic React</title></head>
<body>
<div id="root">${html}</div>
<script src="/bundle.js"></script>
</body>
</html>
`);
});

app.listen(3000);

  • Then on client side, React hydrates the app:

js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.hydrate(<App />, document.getElementById('root'));

Summary

  • Isomorphic React runs React on both server & client.

  • Server renders initial HTML, improving speed and SEO.

  • Client hydrates and manages UI afterward.

  • Frameworks like Next.js simplify building isomorphic apps.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *