The last decade was turbulent and strongly influencing from a frontend perspective: the rise of JavaScript to the most used programming language and the standardization of CSS3 certainly were milestones in the development of the discipline. Parallel to the evolution of the reactive frameworks frontend teams, however, found themselves in optimization loops for years, the results of which were lost after the frontend code migration to any eventual backend system. The last decade has been marked by the breakthrough of Node.js, today's frontend server environment, which brings sovereignty in regards to performance and micro-optimization possibilities.
At EnergySchweiz, we use Server Side Rendering (SSR) as a solution system for fast development pace with high production performance.
All roads lead to WWW
There are multiple ways to implement digital products. The one that I prefer the least is the long lasting and least giving ones. After all, life is too short for a single web project, and yesterday's NPM package may not be available tomorrow. Progress doesn't mean pushing old technologies to the extreme, but trying new approaches. Thanks to Contentful as a CMS and the dynamic project team from EnergySchweiz, it was clear from the start that performance and system integrity would be driven from the front end till the finish line. And here we are on the other side of the Force, or simply in the new decade.
Gatsby vs. Next.js
With a development phase of only few months, a content-driven data model and a design that does not call for any state management, the extraction of static HTML pages seemed plausible. An application architecture was not necessary and Redux as state management could also be used with Gatsby at any time if necessary. Although I don't know Next.js very well –I'm a lover of dedicated Express.js renderers–, I was aware that there should be an SSG (static site generator) available for Next.js. In the end, however, Gatsby's Plugin Environment and its basic Core SSG approach were convincing.
The Gatsby Concept
With Gatsby, the entire website is pre-rendered in HTML format, then it can be delivered as static files. Data is sourced in all languages at build time and embedded directly into the HTML rendering. A conventional caching middleware becomes obsolete at this point, the server is relieved of any workload at the response time and only serves the requests with static files. A complete build in three languages and a total of around 600 pages takes us 6 to 10 minutes. Build time is part of the deployment process. For the Publisher Preview, a Node.js server runs in parallel with Gatsby in development mode and without a static build process (JavaScript SPA). The preview server is continuously supplied with the latest content data via the Contentful Preview API. This makes it possible for the publisher to generate an adequate preview within seconds at any time.
Lived agility
The focus was on the early visibility of text and image. On one hand, a visible preview gives the publisher security, on the other hand, it promotes the timely completion of the entire content model. The content model, in turn, provides the basis for communication between the content API and the client, because no data can be obtained without knowing the data architecture. At this point, the design implementation is decentralized and carried out in parallel throughout the entire project. So we found ourselves in an alternating parallel process between data modeling, application architecture and design implementation. This flexibility allows us to focus our daily work on the tasks that are relevant at the time and to concentrate on the needs of the customer, the user and the publisher. Instead of submitting oneself completely to the design, the design implementation becomes just a parallel process in a holistic puzzle.
In the beginning was the data record
In recent years, the front end was often responsible for layouting and design, which was then pasted using functional data processes and was responsible for the appearance. With the replacement of individual bricks, the wallpaper had to be glued again, at least in part. With the new process, we present the appearance as a puzzle, which in turn contains the complete technical range for a modern website. With the experience of single page applications, we were able to seamlessly integrate these puzzle pieces in the form of SEO, performance, architecture, accessibility and design. At the same time, each development status represented the final state of the website, since the code is not migrated to other peripheral systems. This leads to progress that can be measured at any time, which benefited planning and the further development strategy.
Selling energy
Right from the start, we focused on performance, and with the PWA plugin from Gatsby we could gain security in caching and loading performance early enough. Gatsby's mature plugin ecosystem proved to be an enormous time saver in terms of multilingualism, loading times and data abstraction. With the help of page transitions, we animated the static pages in the look and feel of a full-fledged PWA. All of these factors give wings to a project: the performance is ensured solely by the basic architecture and does not use any caching middleware. The complete agility in combination with content modeling, content publishing and the hosting and SEO experts saves development costs and time-consuming coordination in the interdisciplinary communication flow.
The power of the front end
The term energy is derived from the Greek and means "acting force". To put it simple, it means the ability to do work, emit heat or project light and thus colors. In a figurative sense, energy stands for what the front end in the UX area has been doing for years. But in the end it was never the acting force, just the lamp on the dynamo.
Contact for your Digital Solution
Book an appointmentAre you keen to talk about your next project? We will be happy exchange ideas with you.
Contact for your Digital Solution with Unic
Book an appointmentAre you keen too discuss your digital tasks with us? We would be happy to exchange ideas with you.
