Transition du frontend monolithique vers l'architecture multizone Next.js (Transition Du Frontend Monolithique Vers Larchitecture Multizone Nextjs)

Note de référence

Cette série partage des décisions et des approches de conception dérivées de l'expérience d'ingénierie acquise dans des systèmes de production réels. Il ne contient pas de code source non public, de données client, de configurations d'infrastructure ou d'informations opérationnelles internes. Les exemples ont été généralisés ou anonymisés conformément aux obligations de confidentialité.

Problème au début

L’interface monolithique n’est pas un mauvais début. Une seule équipe supporte le coût d'exploitation le plus bas pour un rythme de livraison commun et une surface de produit limitée. Revenu; Cela se produit lorsque les expériences de catalogue, de recherche, de panier, de paiement, de compte et de commerçant commencent à changer à des rythmes différents au sein de la même base de code.```text Tek frontend → ortak derleme kuyruğu → ortak release penceresi → ilgisiz değişikliklerin birbirini beklemesi

İş alanları → farklı değişim ritimleri → farklı hata etkileri → farklı ölçek ihtiyaçları

## Concepts à la première mention```text
📦 Zone
Belirli bir URL alanından ve kullanıcı niyetinden sorumlu, bağımsız dağıtılabilen istemci uygulaması.

📦 Gateway
Tarayıcının tek bir alan adı altında gördüğü giriş katmanı; isteği doğru zone'a iletir.

📦 Independent deployment
Bir alanın değişikliğini, ilgisiz alanların release penceresine bağlamadan canlıya alma disiplini.

📦 Blast radius
Bir hata veya değişikliğin etkileyebileceği kullanıcı ve sistem alanı.
```La zone ne consiste pas seulement à séparer les dossiers. Il sépare également la propriété, le déploiement, l’observabilité et la décision de restauration. D’où la limite technique ; Il doit être associé à l’intention du produit et à la responsabilité de l’équipe.

## Problème : pourquoi le monolithe ralentit-il un jour ?

À mesure qu’un marché se développe, chaque zone produit son propre rythme. L’équipe de recherche modifie fréquemment son comportement de filtrage et d’indexation. Les aspects panier et paiement nécessitent une plus grande confiance et une libération plus contrôlée. Les outils des fournisseurs doivent être livrables quelle que soit l’expérience client. Les mettre tous dans la même unité de déploiement n’est pas un partage de code ; la coordination crée le partage.```text
Katalog değişikliği ─┐
Arama deneyi       ├─ aynı build ve release kuyruğu
Ödeme düzeltmesi   ┘
```Le problème n'est pas le nombre de fichiers. Le risque dans un domaine d'activité détermine le rythme de livraison dans un autre domaine.

## Alternatives : options de pré-décision

| Alternatives | Force | Prix ​​accepté |
| --- | --- | --- |
| Demande unique | Développement local le plus simple | Version conjointe et domaine en croissance |
| Fédération de modules | Partage de modules d'exécution | Version, dépendance d'exécution et coût de débogage |
| Next.js multizone | déployer indépendamment par champ URL | Discipline contractuelle de routage, d'actifs et de cross-zone |
| Domaines entièrement séparés | Forte isolation | Expérience utilisateur, session et fragmentation SEO |

La décision multizone n'était pas due à la nécessité de partager des modules ; Cela découle du besoin simultané d’un changement indépendant et d’une surface utilisateur unique. Le navigateur ne voit qu'un seul produit. Les équipes voient clairement les domaines de responsabilité des clients.

## Décision : mapper la limite d'URL à la limite de tâches

Chaque zone possède un champ URL, son intention d'utilisateur et sa responsabilité de publication. La passerelle n'est pas seulement un composant qui dirige la bonne requête vers la bonne application ; C’est la frontière qui permet au système d’apparaître comme un produit unique vu de l’extérieur.```text
Browser
  → Gateway
    → Catalog zone
    → Search zone
    → Cart and checkout zone
    → Account zone

Her zone
  → kendi deploy kararı
  → kendi health sinyali
  → açık route sözleşmesi
```La propriété de l'itinéraire doit être conservée dans un seul enregistrement. Sinon, deux zones posséderont la même URL, les comportements locaux divergeront ou les chaînes de redirection se développeront de manière invisible. Bien que le coût moyen d'une recherche de correspondance d'URL soit de O(1), le coût réel est l'incertitude du temps d'exécution ; C'est pourquoi le contrat de route doit être testé.

## Compromis : l'indépendance n'est pas gratuite

Multizone ; Il ne s’agit pas d’ouvrir davantage de référentiels ou de déplacer chaque page vers une application distincte. Chaque nouvelle zone ; Ajoute la construction, le déploiement, la vérification de l'état, la restauration, la politique de sécurité et le coût de possession. Au lieu de s'appuyer sur un seul magasin client global, l'état interzone nécessite des contrats clairs qui acceptent la ressource serveur comme autorité.

Par exemple, le compteur de paniers, le renouvellement de session ou la préférence linguistique peuvent souhaiter être visibles entre les zones. La bonne question pour ces données n’est pas de savoir dans quel package les conserver ; qui est la source, quand la mise à jour est considérée comme valide et comment récupérer en cas d'erreur.

## De réelles tensions émergent dans la Production

1. **Isolement des actifs :** Chaque zone produit son propre bundle. Les adresses de fichiers statiques et les politiques de cache doivent être conçues pour être sans conflit.
2. **Routage et paramètres régionaux :** La passerelle doit transmettre les préfixes de chemin et de langue dynamiques via un contrat unique.
3. **Session :** L'authentification ne doit pas produire une expérience fragmentée dans le navigateur ; Le comportement de renouvellement des jetons et de déconnexion doit être testé à la limite de la zone.
4. **Rollback :** Le déploiement indépendant nécessite une restauration indépendante. Lorsqu'une version de zone est restaurée, la conformité de la route et du contrat d'API doit être maintenue.
5. **Observabilité :** Si une requête utilisateur traverse plus d'une zone, les métriques au niveau de l'identifiant de corrélation, du taux d'erreur et du niveau d'itinéraire doivent être visibles.

## Si je redessine aujourd'huiJe ne créerais pas de petites zones plus tôt. Je prouverais d’abord la propriété de l’itinéraire, l’indépendance de l’équipe et les frictions de publication mesurables. Je garderais les packages d'interface utilisateur partagée, d'authentification, de types et d'utilitaires étroits et versionnables ; Si le package partagé devient un espace commun illimité par commodité, il produit un nouveau monolithe.

La première cible n’est pas tout au plus la zone ; aurait le coût de coordination le plus bas.

## Fréquemment confus```text
❌ Multi-Zone = her sayfa için ayrı uygulama
✓ Zone, bağımsız değişen bir kullanıcı niyeti ve sahiplik sınırıdır.

❌ Multi-Zone = otomatik micro frontend başarısı
✓ Route, asset, session ve rollback sözleşmeleri bilinçli tasarlanmalıdır.

❌ Shared package = her şeyi ortaklaştırmak
✓ Shared package, stabil ve gerçekten ortak olan contract'lar içindir.

❌ Bağımsız deploy = koordinasyonsuz deploy
✓ Bağımsızlık, açık contract ve daha iyi operasyon disiplini ister.

Liste de contrôle de décision

1. L'intention de l'utilisateur, le propriétaire et le rythme de publication de ce domaine sont-ils vraiment différents des autres ?
2. Le rayon de souffle diminue-t-il lorsqu'une erreur se produit ?
3. L'itinéraire de la zone, les paramètres régionaux et les limites des actifs sont-ils clairs ?
4. La source d'autorité pour la session et l'état entre zones est-elle claire ?
5. Chaque zone dispose-t-elle de signaux de restauration, de santé et d'observabilité ?
6. Le coût de cette décision concernant la fédération de modules ou le monolithe modulaire a-t-il été clairement écrit ?

Une limite n'inclut pas seulement le temps de déploiement ; Les tests sont utiles s’ils réduisent les coûts d’incident et de décision.

Ce qu'il faut retenir de cet article

Le but de Multi-Zone n'est pas de fragmenter le frontend ; est de limiter l’effet du changement à la bonne limite.

Monolith peut être le bon choix pendant longtemps. La décomposition n’a de sens que lorsque la nécessité d’un changement indépendant, d’une isolation des erreurs et d’une livraison contrôlée sont démontrées ensemble.

Nous approfondirons la décision alternative dans la section suivante : Pourquoi pas une fédération de modules ?