Welke manieren zijn er om routing te implementeren in…

Er zijn twee hoofdmethoden om routing aan de frontend te implementeren:

Client-side routing: Routing wordt direct in de browser afgehandeld met behulp van JavaScript.
- Werking: Bij navigatie wordt de pagina niet volledig herladen. JavaScript wijzigt de URL in de adresbalk van de browser (met behulp van de History API) en laadt of hertekent dynamisch de benodigde componenten of delen van de pagina.
- URL-status:
  - Gebruikt de History API (pushState, replaceState). De URL is schoon, zonder #.
  - Kan hash (#) gebruiken in de URL (verouderde aanpak met #).
- Voordelen:
  - Verbeterde gebruikerservaring (snellere overgangen, zonder volledige herladen).
  - Geschikt voor single-page applicaties (SPA).
- Nadelen:
  - Vereist extra serverconfiguratie voor correcte verwerking van directe URL-toegangen (bijvoorbeeld fallback op index.html instellen).
  - Kan SEO-problemen veroorzaken als de inhoud alleen client-side wordt gerenderd (opgelost met SSR of pre-rendering).
- Populaire bibliotheken/frameworks: React Router, Vue Router, Angular Router.
Server-side routing: Routing wordt volledig op de server afgehandeld.
- Werking: Bij elke aanvraag naar een nieuwe URL stuurt de browser een verzoek naar de server. De server verwerkt het verzoek, bepaalt welke inhoud moet worden teruggegeven en stuurt een volledige HTML-pagina naar de client. De browser laadt de pagina volledig opnieuw.
- URL-status: De URL komt overeen met de daadwerkelijke bron op de server.
- Voordelen:
  - Eenvoudige implementatie voor multi-pagina applicaties (MPA).
  - Uitstekende indexering door zoekmachines (SEO), omdat de inhoud direct beschikbaar is.
  - Vereist geen JavaScript voor basisnavigatie.
- Nadelen:
  - Langzamere overgangen tussen pagina's vanwege volledige herladen.
  - Minder interactief in vergelijking met SPA.
- Voorbeelden: Overerving van traditionele webapplicaties, waarbij elke URL overeenkomt met een apart bestand of route op de server (bijvoorbeeld PHP, Python met frameworks zoals Django/Flask, Node.js met Express, enz.).

In moderne frontend-toepassingen, vooral in SPA's, is client-side routing de standaard. Server-side routing wordt vaker gebruikt voor multi-pagina sites of in combinatie met client-side routing om SEO te verbeteren (bijvoorbeeld SSR).

Welke manieren zijn er om routing te implementeren in frontend-ontwikkeling?