Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 505
tomet Avatar asked May 31 '14 22:05

tomet


People also ask

Why do we need client-side routing?

Client side routing is a type of routing where as the user navigates around the application or website no full page reloads take place, even when the page's URL changes. Instead, JavaScript is used to update the URL and fetch and display new content.

Which is better client-side or server-side?

Between the two options, server-side rendering is better for SEO than client-side rendering. This is because server-side rendering can speed up page load times, which not only improves the user experience, but can help your site rank better in Google search results.

What are the main advantages of handling routes on the client-side rather than on the server-side?

Client-side routing can provide a great performance benefit if your application consists mainly of a static page or if it's a landing page for your company. If you're using a backend-less application or a backend service such as firebase, it can speed up your single-page Application, providing seamless user experience.

Is server-side faster than client-side?

Server-side rendering allows developers to pre-populate a web page with custom user data directly on the server. It is generally faster to make all the requests within a server than making extra browser-to-server round-trips for them. This is what developers used to do before client-side rendering.


2 Answers

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.

like image 96
aedm Avatar answered Oct 08 '22 00:10

aedm


I think client side routing is used by single page applications, where the actual site is never left.

Routing works by attaching to the current page, where client-side routing frameworks react on.

index.html#/mysubpage

Server side routing is similar to what apache does by default when calling a subsite by it´s url, but node.js does that by using routes because the html files need to be rendered first.

If you have a SPA with a client side routing framework, and you are using Node.js, you still need server side routing to switch between sites

like image 4
Marian Klühspies Avatar answered Oct 07 '22 23:10

Marian Klühspies