What are the methods of implementing routing in frontend development?

There are two main ways to implement routing on the frontend:

1. Client-side routing: Routing is handled directly in the browser using JavaScript.

   • How it works: When navigating, the page does not fully reload. JavaScript changes the URL in the browser's address bar (using the History API) and dynamically loads or re-renders the necessary components or parts of the page.
   • URL state:
     • Uses the History API (pushState, replaceState). The URL is clean, without #.
     • Can use hash (#) in the URL (deprecated approach with #).
   • Advantages:
     • Improved user experience (faster transitions, no full reload).
     • Suitable for single-page applications (SPA).
   • Disadvantages:
     • Requires additional server configuration for proper handling of direct URL access (e.g., fallback to index.html).
     • SEO issues may arise if content is rendered only on the client (solved with SSR or pre-rendering).
   • Popular libraries/frameworks: React Router, Vue Router, Angular Router.

2. Server-side routing: Routing is fully handled on the server side.

   • How it works: For each request to a new URL, the browser sends a request to the server. The server processes the request, determines what content to return, and sends a complete HTML page to the client. The browser fully reloads the page.
   • URL state: URL corresponds to a real resource on the server.
   • Advantages:
     • Simpler implementation for multi-page applications (MPA).
     • Excellent indexing by search engines (SEO), as content is ready immediately.
     • Does not require JavaScript for basic navigation.
   • Disadvantages:
     • Slower page transitions due to full reloads.
     • Less interactive user experience compared to SPA.
   • Examples: Traditional web applications where each URL corresponds to a separate file or route on the server (e.g., PHP, Python with frameworks like Django/Flask, Node.js with Express, etc.).

In modern frontend applications, especially in SPA, client-side routing is standard. Server-side routing is more often used for multi-page sites or combined with client-side routing for improved SEO (e.g., SSR).