To make the visitor of the website not even notice the website is loading a lot of information is already fetched before a page change happens. The website is built on React and Redux, this way the data that is being fetched on page change is a simple json object that can be inserted in the view later on. And this data can be reused on multiple places on the website.
When a visitor hovers a link we already fetch the data required for that specific page. So when the user clicks the only thing left to do is render the new view with the information we have which results in an almost instant page change.
One of the targets for the website was to make the development process more trackable. The way this was thought out was to insert the social media posts and show them in the case studies. To make this possible the client connected their Instagram account to the CMS and every hour the new posts are fetched into the CMS as posts.
They can use hashtags to link posts to specific cases. The website now stays up to date with the most recent developments while RED company maintains both their socials and their website.
The website is built on React and Redux on the fronted and with Wordpress as a headless CMS. React is used both for server and client side rendering to ensure the best SEO and performance. On the server the data is fetched to render the website on the server and this data is passed in the initial request. React hydrates the html and data and proceeds with the state of the web app.
Under the hood there is some clever usage of caching to show an up-to-date page counter while not always hitting the database. The first request for the page hit we ask the database for the amount, this value is then immediately saved in Redis for caching. The next user will ask automatically get the data from Redis. When visitor spends a certain time on the website a PUT request is send out to increment the page hit. Every hour an internal service spins up that gets the data from Redis, validates it and pushes it to the database.