When to use "client-side routing" or "server-side routing"?

tomet

I'm a little bit confused about this, and I feel slightly stupid asking this question, but I want to understand it.

So, say I'm working with a client side web framework, like Backbone, Angular or Durandal. This framework includes routing.

But I of course still have a server for database stuff, and so on, which also has routing.

My question now is:

When to use "client-side routing" or "server-side routing"?

How is it "decided" whether routing is already performed on the client side or whether the request is first sent to the web server?

I have a particularly hard time imagining this because the client side could do routing before the server ever gets to know about that request.

I'd be very thankful if someone could explain how these two routing systems work together.

P.S.: I have not included code samples because I'm not looking for an answer concerning a particular framework, but concerning the routing process in general.

aedm

tl;dr:

  • with server-side routing you download an entire new webpage whenever you click on a link,
  • with client-side routing the webapp downloads, processes and displays new data for you.

Imagine the user clicking on a simple link: <a href="/hello">Hello!</a>

On a webapp that uses server side routing:

  • The browser detects that the user has clicked on an anchor element.
  • It makes an HTTP GET request to the URL found in the href tag
  • The server processes the request, and sends a new document (usually HTML) as a response.
  • The browser discards the old webpage altogether, and displays the newly downloaded one.

If the webapp uses client side routing:

  • The browser detects that the user has clicked on an anchor element, just like before.
  • A client side code (usually the routing library) catches this event, detects that the URL is not an external link, and then prevents the browser from making the HTTP GET request.
  • The routing library then manually changes the URL displayed in the browser (using the HTML5 history API, or maybe URL hashbangs on older browsers)
  • The routing library then changes the state of the client app. For example, it can change the root React/Angular/etc component according to the route rules.
  • The app (particularly the MVC library, like React) then processes state changes. It renders the new components, and if necessary, it requests new data from the server. But this time the response isn't necessarily an entire webpage, it may also be "raw" data, in which case the client-side code turns it into HTML elements.

Client-side routing sound more complicated, because it is. But some libraries really make it easy these days.

There are several upsides of client-side routing: you download less data to display new content, you can reuse DOM elements, display loading notifications to user etc. However, webapps that generate the DOM on server side are much easier to crawl (by search engines), thereby making SEO optimization easier. Combining these two approaches is also possible, the excellent Flow Router SSR is a good example for that.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

How to use Aurelia's router with server-side routing

From Dev

How do you do client side routing when saving via methods?

From Dev

Server side routing for Polymer Application

From Dev

react server side rendering with client side routing

From Dev

react server side rendering with client side routing

From Dev

Angularjs Client-Side Routing with ui-router

From Dev

How to handle client-side routing received at the server with Flask?

From Dev

React-Router: Process of server request with Client-Side Routing?

From Dev

How to handle client side routing with node.js?

From Java

Client Routing (using react-router) and Server-Side Routing

From Dev

Iron Router Server Side Routing callback doesn't work

From Dev

React-Router 1.0 - 100% Client Side Routing - Page Refresh causes 404 error

From Dev

In Flux architecture, how do you manage client side routing / url states?

From Dev

How can I implement links within a page, while using Client-side routing?

From Dev

How to do Client side routing using react router 1.0.x in a click handler?

From Dev

Iron-Router server side routing: TypeError and Infinite Reloading with iron-router blaze-integration

From Dev

When and when not to use webservices?

From Dev

When and When not to use [ ] operators with if?

From Dev

Javascript: When and when not to use "this"

From Dev

When to use and not to use static function?

From Dev

When to use and when not to use fragments in Android?

From Dev

When to use require and when to use import in Aurelia?

From Java

When to use .First and when to use .FirstOrDefault with LINQ?

From Dev

When to use array and when to use object?

From Java

Vuex - When to use getters and when to use state

From Dev

When to use and when not to use a Service in Android

From Dev

When to use .shape and when to use .reshape?

From Dev

When to use Dispose or when to use Using

From Dev

When to use `each` and when to use the `for` loop in Groovy

Related Related

  1. 1

    How to use Aurelia's router with server-side routing

  2. 2

    How do you do client side routing when saving via methods?

  3. 3

    Server side routing for Polymer Application

  4. 4

    react server side rendering with client side routing

  5. 5

    react server side rendering with client side routing

  6. 6

    Angularjs Client-Side Routing with ui-router

  7. 7

    How to handle client-side routing received at the server with Flask?

  8. 8

    React-Router: Process of server request with Client-Side Routing?

  9. 9

    How to handle client side routing with node.js?

  10. 10

    Client Routing (using react-router) and Server-Side Routing

  11. 11

    Iron Router Server Side Routing callback doesn't work

  12. 12

    React-Router 1.0 - 100% Client Side Routing - Page Refresh causes 404 error

  13. 13

    In Flux architecture, how do you manage client side routing / url states?

  14. 14

    How can I implement links within a page, while using Client-side routing?

  15. 15

    How to do Client side routing using react router 1.0.x in a click handler?

  16. 16

    Iron-Router server side routing: TypeError and Infinite Reloading with iron-router blaze-integration

  17. 17

    When and when not to use webservices?

  18. 18

    When and When not to use [ ] operators with if?

  19. 19

    Javascript: When and when not to use "this"

  20. 20

    When to use and not to use static function?

  21. 21

    When to use and when not to use fragments in Android?

  22. 22

    When to use require and when to use import in Aurelia?

  23. 23

    When to use .First and when to use .FirstOrDefault with LINQ?

  24. 24

    When to use array and when to use object?

  25. 25

    Vuex - When to use getters and when to use state

  26. 26

    When to use and when not to use a Service in Android

  27. 27

    When to use .shape and when to use .reshape?

  28. 28

    When to use Dispose or when to use Using

  29. 29

    When to use `each` and when to use the `for` loop in Groovy

HotTag

Archive