The Content Hub allows you to create content for all digital endpoints. It doesn't matter which endpoint it needs to land. With that I mind, I started wondering... Wouldn't it be cool to connect the content hub directly to a Single Page Application (SPA). But first start with the explanation of what a SPA really is. According to Wikipedia:
A single-page application (SPA) is a web application or website that interacts with the web browser by dynamically rewriting the current web page with new data from the web server, instead of the default method of the browser loading entire new pages. The goal is faster transitions that make the website feel more like a native app.
In a SPA, all necessary HTML, JavaScript, and CSS code is either retrieved by the browser with a single page load, or the appropriate resources are dynamically loaded and added to the page as necessary, usually in response to user actions. The page does not reload at any point in the process, nor does it transfer control to another page, although the location hash or the HTML5 History API can be used to provide the perception and navigability of separate logical pages in the application.
Source: Wikipedia
To convert this into my own words: A SPA is an application that directly interacts with the server. Downloading only the assets it needs to render the requested page. After that, there is only communication between client and server when needed and only the things are downloaded to process the request, nothing more and nothing less. This will result in a fast website that almost feels like a native app.
So what do we need to build our SPA? Let's first start with the obvious, we will need to have some form of client-side routing. As the SPA is going to run in the browser, it would need to be built with JavaScript. As always, we can build it from scratch, but a better solution is to use a JavaScript framework or library. In the following table you can see an overview of the most popular implementations that are out right now.
Copyright by RubyGarage
In the table you can see that React and Angular are two most popular scripts that are used right now. Although they are both built with JavaScript, they do differ from each other. React is a library that is lightweight and maintained by Facebook. Angular on the other hand comes from Google and is a framework. The difference seems small, it rather big. For more information about the difference check out this link to Freecodecamp. For the simple reason that we want to stay in full control, we choose a solution with React.
The other component we will need is the API. This will run server-side a will be tailored to only deliver the data that is needed to the client and nothing more. It will hide the complexities of the underlying connections to other systems. For instance the connection to the Content Hub API. Their are a lot of server-side solutions, like .NET (Core or Framework), Java, NodeJS, etc. To keep in the same line as the Content Hub, I will stick to C# and .NET Core. This is a lightweight framework that can run on Windows as well as Linux. Making this ideal solution.
Other components that we could need are a server-side rendering, JSON mock server and server-side routing. To start with the last, the server-side routing will be needed to direct the traffic to the API or server-side rendering. Another great thing to use, is the JSON mock server. This will allow the front-end to program against the mock server. This will safe development time and also remove the need for an internet connection at development time. Last but not least is the server-side rendering. Since we are using React to create our HTML, it could be difficult for a search indexer, to index our page. Therefor we will use Hypernova, it will allow us to render the React components server-side and ensure each page can be read by an indexer.
When we combine all the components in overview, it will look like this.
The great thing about this solution, it's already been built for you. Go to the GitHub repo react-thingy and clone the repository. After you've cloned the repository you can start building the connection between the SPA and the Content Hub. Have a look at the Web Client SDK from the Content Hub. This will safe you a lot of time to interact with their API.