Routing in TinyHouse#

📖 This lesson's lecture slides can be found - here.

Routing is the process of navigating through a web application with the help of URLs. When a link in a webpage is clicked, the URL changes which then navigates a user to a new page.

Though the capability to change routes is helpful, we don't always need it. We could always have an entire application be displayed within a single homepage. However, if an app starts to become large, it would be quite difficult to show all the information the app is to contain within a single webpage. This is why nearly all large scale web applications (e.g. YouTube, Twitter, Airbnb, etc.) provide the capability to route between different pages.

Our TinyHouse application is going to have routing. As an example, if a user was to ever venture to the /listings/toronto route, they would see the listings for the city that they're looking for - which in this case is "Toronto".

There are often two ways to achieve routing within a web application - server-side routing or client-side routing.

Server-side Routing#

In server-side routing, web page navigation is handled completely by the server. When a user clicks on a link, the browser sends a new request to the server to fetch the web page.

Pros#

• Server-side routing will only request the web page that the user is viewing, not the entire web app. As a result, the initial page load is often faster since we're only downloading the content for one web page.

• Search Engine Optimization (SEO) is optimized for server-rendered applications.

Cons#

• Every URL change results in a full-page refresh as the server returns the contents to the client. This is the unpleasant blinking state that's shown to a user when a user navigates from route to route.

• Templates that are to remain the same might have to be requested from the server over and over again (e.g. a header and a footer that stays the same on all web pages).

Client-side Routing#

In client-side routing, web page navigation is handled completely by the JavaScript that is loaded on the browser. When a user clicks on a link, the browser simply renders "new content" from the code already loaded in memory.

Because of this, client-side routed web applications are often called Single-Page Applications (SPAs). These are applications that consist of just one web page and the different routes in the application are the same web page displaying different views.

Pros#