HTML5

History

Object

Objectives

Modify the address bar with history.pushState
Describe how bookmarking a single page application works

History

HTML5 introduced the history object

history.back();

history.forward();

history.pushState({}, 'title', '/newpage');

Allows javascript to manipulate the browser history

Changes To History

Changes the url address bar

Changes the browser's local navigation history

DOES NOT cause the browser to make a GET request

History

More Info

https://developer.mozilla.org/en-US/docs/Web/API/History_API

What Will We Use History For?

To create a good single page application, we want to have it feel like a normal website

Browser back button, internal links, etc should all seem to behave like a page with server rendering

Server Side Rendering

GET /

index.html (fully rendered)

GET /signin

/signin (fully rendered)

Node.js

HTML

Client Side Rendering (React)

GET /

index.html (only div id="root")

Node.js

React

Render react app

Change address to /signin

Render /signin component

Handling A Bookmark

GET /user/55

index.html (only div id="root")

Node.js

React

Render react app with

correct user component

Bookmarked /user/55

Server side support is required