App JS Universelle

Grâce à React et NextJS

JS universel ?

Un code javascript pouvant être exécuté côté client (browser) et côté serveur (nodeJS)

SPA ?

Single Page Application

source : https://blog.octo.com/pourquoi-sinteresser-a-react/

SPA ?

Flow

Universal

SSR puis CSR

source : https://blog.octo.com/pourquoi-sinteresser-a-react/

Universal

Flow

En résumé

source : https://blog.altima-agency.com/en/seo-en/reactjs-seo/

Avantages

• Certitudes sur l'indexation des bots (Google, ...)
• Pages 404 réelles
• Impression de performance bien meilleure
• Performance réelle meilleure (si bon caching serveur)
• Meilleurs partages sur les réseaux sociaux
• Site +/- fonctionnel avec JS désactivé

SPA vs Universal app

Inconvenients

• Plus possible d'héberger sur serveur statique (S3) et serveur + sollicité.
• Méthode renderToString de React synchrone
• Certains comportements sont plus complexes à gérer (routing, caching, ...)

React dans tout ça ?

{ title: bar, text: foo}

<div>

    <h1>bar</h1>

    <p>foo</p>

</div>

RENDER

MARKUP

DATA

Transforme de la donnée en markup

React dans tout ça ?

Capable de le faire côté client

Capable de le faire côté serveur

Pourquoi NextJS ?

• Fully React (no full codebase rewrite)
• Almost invisible on codebase (except for config)
• Automatic code-splitting
• Client and server router
• Fully extensible
• Hot Module Reload (client & server)
• Community (35k stars on GH)
• Big references on production (Marvel, Uber, Invision, ...)