Search As Seen On Netflix

4 min readApr 3, 2024

Updating a webpage’s URL without refreshing.

The Interaction

A gif of the Netflix web homepage, as text is entered into the search box, the URL is updated with an appended query string of the text entered into the search box — Gif of a search interaction on Netflix (web)

If you search for a something on Netflix (web), notice that the URL updates while the page displays the search results without actually refreshing the entire webpage.

A gif of the Netflix web homepage search box and the URL bar, as text is entered into the search box, the URL is updated with an appended query string of the text entered into the search box — Gif of the search interaction, zoomed in on the URL bar and search box

This is a different interface compared to sites such as YouTube and Google where the search query does not dynamically update the URL and the search “happens” after a confirmation trigger (e.g. clicking search / hitting the enter key) that refreshes the webpage to display the results. While with the way Netflix implemented their search, the user is seemingly never navigated away from the homepage.

The Specific Lines of Code

There are 2 ways to achieve this URL update as the user types with javascript, without refreshing the page of course:

// 1. modifies the browser's current history entry, without reloading
window.history.replaceState(nextState, unused, nextURL);

// 2. adds an entry to the browser's current history, without reloading
window.history.pushState(nextState, unused, nextURL);

The difference between replaceState and pushState is that the former does not generate an additional entry into the browser’s session history while the latter does. The example below aims to illustrate this difference.

An Example

The sample application is a simple search that searches through a small dataset of the the best selling books across various years.

// this block only shows snippets of the relevant code

// set the page's base url
const pageUrl = window.location.href;

// ...

// function to update the URL
function change_url(query) {
 // query: the text in the search input field
  var nextURL = pageUrl + "?q="+ query
  // if the query is empty, remove the query extension
  if (query.length == 0) {
   nextURL = pageUrl
}
  // of the 2 methods, comment out whichever is not used
  // 1. modifies the browser's current history entry, without reloading
  window.history.replaceState(null, null, nextURL);

  // 2. adds an entry to the browser's current history, without reloading
  window.history.pushState(null, null, nextURL);
}

// ...

Link to full sample application code.

The script adds an event listener to the search input text box. Whenever the user changes the search input, the change_URL function is called with another function to update the search results and change the browser URL.

Version 1: replaceState

Whenever the URL changes, the session’s browser history updates the current entry. The impact is felt when the user attempts to navigate away to another page in history, such as clicking on the back button, the site will navigate them back to the page before they started the search, in this sample application, it’s the home search page, with the base URL.

Sample application search then back interaction using the replaceState function

This can also be verified by checking the number of entries in the browser session history before and after the user interacts with the search — the number of entries does not change.

left: Number of history entries before search, right: Number of history entries after search (replaceState)

Version 2: pushState

Whenever the URL changes, the session’s browser history adds an additional entry. When the user clicks the back button, the site will navigate them back to the last time the query URL changed, instead of the home search page.

A gif of the sample book search , as text is entered into the search box, the URL is updated with an appended query string of the text entered into the search box. On click of the browser back button, the query portion (q=?) displays the user’s last typed word in the search box. — Sample application search then back interaction using the pushState function

This can also be observed by verifying the number of entries in the browser session history before and after the user interacts with the search — the number of entries increases by 5, 1 for each time the user changes the search query to type “witch”.

left: Number of history entries before search, right: Number of history entries after search (pushState)

Which Version?

Which version to ultimately go with depends on each developer’s preference and requirements for the other components of the application. Developmental effort is required to ensure that the forward and backward buttons allow the user to experience the application as intended. Additional code may also be required to ensure that data for analytics still be logged.

Ultimately, this interaction puts forth a method to implement search for Single Page Applications (SPA). This way of interacting with the search function (or most functions on Netflix) do not bring the user out of the page makes for a pleasant user experience where things even seem to load faster since the user is never brought out of the page they landed on.

References

Mozilla Foundation [MDN Contributors]. (2024, January 12). History: pushState() method. Mdn Web Docs. Retrieved February 21, 2024, from https://developer.mozilla.org/en-US/docs/Web/API/History/pushState

Mozilla Foundation [MDN Contributors]. (2024, January 15). History: replaceState() method. Mdn Web Docs. Retrieved February 21, 2024, from https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState