The Emerging GraphQL and Serverless Stack for Building Static Web Sites
Hugo Meissner, founder and CTO at Blazity runs a number of Polish news sites, such as Pikio, that make million-plus API calls a day. He is keen to leverage speed as a competitive advantage by migrating his existing tech stack away from current servers and to a new architecture approach that draws on GraphQL, serverless and a content delivery network to reduce load time and serve up content at scale.
The New Static Site Architecture Model
All content is stored in an AWS Aurora database that is used by Graph.cool, which is the API provider and principal data source for the entire Pikio website.
GraphQL is rapidly gaining widespread adoption, especially amongst publishers, and it is increasingly being used as a complement to delivering single page apps and static sites through a serverless architecture. More tools are expected — particularly around evolving Content Delivery Networks (CDNs) to become more feature-rich “edge service providers” — that support publishers make use of this architectural model.
Graphcool builds a data model on top of Aurora using the GraphQL schema to expose the content through a single API endpoint.
The Graphcool endpoint is then used by GraphCMS to create a headless CMS and to provide more tools for the publisher to define their content model.
CEO and cofounder of GraphCMS, Michael Lukaszczyk said developers are increasing their interest in leveraging GraphQL for content-based sites. “Developers are not happy developing CRUD interfaces as well as GraphQL servers,” said Lukaszczyk. “Our product takes those two pain points and solves them. The benefit is the speed of development: you get GraphQL which is more performant than REST, especially if you query a lot of relational data. And for developers, it is more fun. For certain cases, REST is completely doing the trick, but if you have a complex data structure then we see developers going with GraphQL.”
Meissner pointed to the prefetching capability as a particular need for competitive news content sites, which can prefetch the other pages of the site when a reader hits a landing page, so that future site links are delivered instantaneously. Although within Next.JS, in order to maintain its goal of being a universal framework that is focused on app infrastructure, it does not prefetch the data (or content). The prefetching is limited only to the structure of the site and not the actual content. For that, Meissner uses the Apollo package to pull the data via the GraphQL API from GraphCMS into Next.JS. With the move to version 3.0 and the ability to export a static site, Meissner is hoping that task will no longer be necessary.
Lukaszczyk says at GraphCMS, he is rarely seeing developers use the Angular framework anymore for their development projects. Next.JS and the Gatsby framework are emerging as frontrunners in the way sites are currently being built.
“Now.sh is really cool, and digging into the API enables you to do a lot more powerful things with your deployments, but you have to actually set up the CDN distribution yourself. Netlify is an infinitely scalable global CDN with a lot less configuration from my viewpoint. At present, the biggest scalable issue is server-side rendering. We use server-side rendering with SSR cache, but it is still costly,” said Meissner. “Once we move to the serverless, static site approach, there will be no server-side rendering. Then we can look at site automation, probably through AWS.”
Meissner said the Pikio prototype is testing much faster for load time, is easier to maintain, and will be considerably cheaper.
“The ideal is instant load, but minimizing bundle size, and compressing photos are not easily done for a news site with over 60,000 articles, so automating that is a problem in itself. At present we are tied to WordPress, which is tied to their templating language and we wanted to move to a modern stack. WordPress costs, and you still have to take care of scaling the entire website and managing the SQL database. With our new architecture model, you export it as a static site and you just have an API endpoint, that is the only thing that has to scale.”
Meanwhile, GraphCMS is working on importing tools to help their customers migrate from WordPress to their headless CMS. After that, they will need to build a clean interface for the publishers who are more used to using the WordPress interface for uploading their content.