DEV Community: Mahmoud Atwa

Ionic SSR with React: An adventure

Mahmoud Atwa — Mon, 28 Mar 2022 17:19:50 +0000

Why

React is a great library for UI and makes it easier to build UIs and greatly reduces the development time. Ionic is also a great library for developing cross-platform hybrid apps. Ionic can be easily integrated with React. As a matter of fact React actually is officially supported by the Ionic team.

It’s not all flowers and roses.

But there’s a catch; React is a JS library, where you write your UI in JS. Which means that HTML is generated on the browser. This leads to a less than ideal experience for crawlers that index your website.

The Adventures

Approach 1: using ReactDOMServer in a nodejs environment

A standard way to enable SSR for a React.js app is to just use ReactDOMServer on the server and replace the render() method with hydrate() in the client so that the application will not re-render (the already rendered components) when it is served to the browser.

But there’s a problem, Ionic components use stencil.js which uses web components which is not supported by ReactDOMServer. So we need another solution.

Example Snippet:

import express from "express";
import ReactDOMServer from "react-dom/server";
import { App } from "./App";

const app = express();
app.use(express.static(STATIC_ASSETS_DIR));

app.get("*", (req, res) => {
  const appHtml = ReactDOMServer.renderToString(<App />);
  // Assume that we have an html template
  const html = htmlTemplate.replace("^_^__APP_SHOULD_BE_HERE__^_^", appHtml);
  res.send(html);
});

Approach 2: using Next.js

In most cases, this approach will work. It works like this:

Instead of using @ionic/react, use @ionic/core
Instead of using React components (e.g. <IonHeader />) use web components (e.g. <ion-header />)
Initialize web components by calling defineCustomeElements
And that’s it (assuming you’ve configured your project to use Next.js). For a starter repo, check this repo moonbase-vercel-ionic.

However our codebase at the time had some components that are not supported in @ionic/core. So we couldn't use this approach.

Approach 3: Bringing a gun to a knife fight

The last approach which will work with anything is to use a browser. A browser supports web components, is not limited to a certain library (e.g. react, angular, or vue). So, I used puppeteer which is a library that provides a Node.js API to control chromium & firefox.

So our final workflow is as follows:

The client sends a GET request to the server
The server checks if the needed resource is a page or just a static asset.
If it’s a static asset serve it with express and let Nginx add cache headers along with compressing the file. Otherwise, check if the page is already rendered and in the cache.
If it’s in the cache serve it as a normal static asset.
Otherwise, run Puppeteer load the page URI.
Wait for the page to be loaded.
Grab the page’s HTML from Puppeteer and save it in the cache.
Send the HTML.

This can be written in Node.js as the following:

const app = express();

// Static files handler
app.get("*.*", (req, res) => res.sendFile(req.url));

// Dynamic Page handler
app.get("*", async (req, res) => {
  if (cache.has(req.url)) {
    res.send(cache.get(req.url));
    return;
  }
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(`http://localhost:${CLIENT_PORT}`, { waitUntil: "networkidle0" });
  const html = await page.content();
  res.send(html);
  cache.put(req.url, html);
  await browser.close();
});

app.listen(SERVER_PORT);

// React Server

app.use(express.static(STATIC_ASSETS_DIR));

app.get("*", (_, res) => res.sendFile("index.html"));

app.listen(CLIENT_PORT);

Note that we’ve used two servers in this example, one where the client (i.e. the user's browser) sends requests to and handles cache as well as serving static assets while the other is for Puppeteer to connect to, to load the application.

This is not the best solution since it'll requires heavy infrastructure for high traffic websites.

This article was originally posted on my own blog so if you find that it has been copied, don't worry I copied it from my self.

MPADiff, make your MPA an SPA with a single LOC.

Mahmoud Atwa — Thu, 29 Jul 2021 04:47:46 +0000

Introduction

Even though I write React based apps on a daily basis. One thing that I always think about is why does everyone use SPAs today. I get it, it's easier to develop, reduces development time (business people like this) & it has a better UX (in my opinion) when it's done right.

But let's face it, it's far easier to write a Node.JS backend with handlebars for templates than it is to write a react application.

Below are the pros & cons of using an SPA approach vs using an MPA approach.

MPA vs SPA

Category	SPA	MPA
SEO	Nope	Already Set up
Page Load	Good for simple apps, But not for complicated apps without SSR	Good if you have good infra
Rendering Perf.	Big No!	Good
Development Time	Better for complicated UI (Assuming back-end is already made)	Good for simple UIs (aka 90% of the cases)
UX	Website doesn't reload on navigation	Reloads on navigation

The previous comparison is not full but gives us an insight to why SPAs are becoming more and more popular.

Now, the question is this. Can we make a multi-page application behave as an SPA, while still having the benefits of an MPA without much time? The answer is Yes!

MPADiff

MPADiff is JavaScript library written in TypeScript that makes an MPA look & feel like an SPA while still being an MPA it self.

It works by changing the default behavior of a tags. Once a link is clicked, the HTML of such link is fetched using a GET request, The body element is swapped & the head element is updated (not replaced).

This approach prevents reloading CSS that was already loaded.

By default, the library eagerly loads link elements (i.e. before the user clicks on them). This makes navigation between different pages instantaneous, but puts an extra load on your infrastructure.

Installing

Yarn

yarn add mpadiff

npm

npm i mpadiff -S

Self host

<script src="build/index.js"></script>

CDN

<script src="https://unpkg.com/mpadiff"></script>

Usage

MPADiff can be used & enabled with a single line of code, just like this:

<script src="https://unpkg.com/mpadiff"></script>
<script>
window.MPADiff.default.init({
  loaderDelay: 0,
  loaderElement: undefined,
  eagerLoading: true
});
</script>

Options

Option	Type	Explanation	Default
loaderDelay	number (ms)	number of milliseconds to wait before hiding the loader (in case of lazy loading)	500
eagerLoading	boolean	Whether the links should be loaded once they appear or load them only when the user clicks on them.	true
loaderElement	HTMLElement/Node/undefined	The element that will be used when the contents of a link is still loading and the user has clicked on it	undefined

Notes

MPADiff is still in its early stages, use it carefully.
For bugs, issues & Feature requests, report to the github issues page.
Full API reference: https://github.com/atwamahmoud/MPADiff
Having any thoughts? Add a comment below.

atwamahmoud / MPADiff

Get the benefits of an SPA with a single line of code.

MPADiff

Minimal Library to mimic Single page apps. behaviour in Multi page apps.

🚀 What, Why & How

MPADiff is a minimal JavaScript library written in TypeScript that prevents your website to reload when the user navigates to another page. This is the default behaviour for SPAs written React, Angulat, Vue & other SPA frameworks/libraries.

The main difference here is that MPADiff provides this functionality to multi page applications written in PHP, Node.js, ASP, or any other language/framework.

It works by sending a GET request to URIs of links to fetch HTML. Once the user clicks on such link, the head element is updated (without reloading any CSS) & the body element is swaped. Both eager & lazy loading of HTML documents are supported and can be configured accoeding to your needs.

Before

Before.mov

After

after.mov

⭐️ Features

Custom loaders
Eager & Lazy Loading
Custom delays
Doesn't reload CSS.
3kb…

View on GitHub