Launched in September 2021, the Digital Agency runs various projects with the goal of digitising society as a whole. It also aims to design services from the user's perspective under the slogan 'Human-friendly digitalisation: No one left behind'.
As part of this digitalisation endeavour, the Digital Agency is implementing a project to build the unified government web platform to which all ministries and agencies will eventually migrate, and ANNAI was selected to carry out the verification project for this.
The migration of the Digital Agency's website to a headless CMS was positioned as part of this project, and its aim was to deepen knowledge about the headless technology being considered for application to the unified government website, as well as to apply the design system to the new Digital Agency website.
Migration of the Digital Agency website to a headless CMS
Why Drupal was chosen
As of 2015, Drupal was beginning to be used as a headless CMS. At the time, the concept (and a feature) ‘entity’ was introduced to Drupal 7. With this change, Drupal has become a data store that handles pieces of data with various data types rather than handling data as a text for web content. With the introduction of entities, Drupal emerged as a general-purpose backend system that sets itself apart from typical web CMSs.
However, Drupal 7 was still built based on the assumption that requests are returned as rendered HTML pages. In response to the growing need for Drupal not only as a headless CMS but also as a backend for mobile apps and smart devices, Drupal 8 has undergone an architectural renewal from the API-first principle.
Through this complete rebuild, Drupal has transformed into a true and powerful headless CMS and has been a driver in leading many headless CMS projects to success.
With a track record and reliable community support, Drupal was chosen as the backend for the new Digital Agency website.
Headless architecture and rendering methods
The frontend of the new website is built with Next.js, while the backend is built with Drupal. Because the Static Site Generation (SSG) method was selected, the entire site is pre-built.
The architecture
Drupal is used for the creation and management of the site’s content. The content is built by specific triggers, and the resulting HTML files are stored in a storage. These HTML files are distributed via a CDN.
While there are several rendering methods to choose from, SSG was selected for the Digital Agency's website because 1) the Agency aimed to serve pages/content that didn’t require JavaScript to give maximum consideration to accessibility, and 2) the Agency was interested in using SSG for improved security and performance.
Why Next.js was chosen
Given the adoption of virtual DOM, the choices were Next.js and Nuxt.js. We chose Next for the following reasons:
- The Digital Agency site is considering adopting SSR in the future, but Next.js makes it relatively easy to switch between SSG and SSR at the setting level compared to Nuxt.js
- The availability of a development tool “Next-Drupal”, which can be used when using Next.js with Drupal, speeds up the development process
関連記事
プレスリリース
- ANNAI has been chosen to undertake a research project for building a unified web platform for the Japanese government
- ANNAI is renewing the Digital Agency's website