Using Notion as a Headless CMS Backend: An Experiment
At Mayven Studios we have no shame in our preference for WordPress for 99% editorial and corporate marketing sites (which is really just a content site, anyway). But, that doesn’t mean we don’t like a good experiment now and then. We’re always looking for the best tools and technologies to build fast, functional, and scalable websites for our clients. One new tool that has gained a lot of traction lately is Notion, which also has a nice little API. I’m not really sure Notion intended this use case, but we were working on something with the notion API anyway, and decided to give it a try.
We’ll explore how we use Notion as a CMS to power purecalculators.com, a website that provides a range of financial and retirement calculators.
Building a Fast and Scalable Website with Notion and Next.js
At the heart of purecalculators.com is a Next.js codebase that is hosted on Vercel. Next.js is a popular React-based framework that provides server-side rendering, automatic code splitting, and optimized caching out of the box, making it an ideal choice for building fast and scalable websites.
With Notion as the CMS, we can manage all of the website’s content directly in Notion, without having to write any code. There are some limitations though, for example the text editing is not as intuitive, and when working with the API, Notion doesn’t act like a WYSIWYG — you have to design and create a layout and treat the Notion page almost like a visual JSON file holding simply data.
Vercel helps to develop Next.js, so the integrations there are super, and have enjoyed working on the stack so far. Very similar to Netlify. On Vercel with Next.js code, we can take advantage of Vercel’s automatic, global CDN network and its instant cache invalidation, which ensures that our website loads quickly and reliably, no matter where in the world the user is located.
Statically Generating Pages for Lightning-Fast Performance
One of the key advantages of using Notion as a CMS is that it allows us to statically generate pages for our website. This means that instead of dynamically generating pages on the fly, as is the case with traditional CMSs, the pages are pre-generated and served from a CDN. Of course you can cache content or even have a headless WordPress CMS, so it’s a similar situation but perhaps in a cleaner UI and less bloat.
This approach has benefits, which apply generally to all headless setups:
- Lightning-fast performance: By pre-generating the pages, the website loads almost instantly, without any wait time for the server to generate the pages.
- Improved security: Since the pages are pre-generated and served from a CDN, there’s no need for a server-side component, reducing the attack surface and making the website more secure.
- Lower cost: With no server-side component required, the website can be hosted on a low-cost CDN, reducing the cost of hosting and maintenance.
Downsides
- Doesn’t work out of the box. You need to create your own notion wrapper and configure it to work with the type of content you plan to write
- Editor is a bit clunky still. WordPress was built for copyediting and content writing and the editor reflects that in that you have the ability to configure images, links, heading, titles, bulleted lists, and more all through one of the standard editors. Notion feels a bit awkward to use sometimes in that regard.
- If you don’t want to use Notion in a headless way, the pages are not optimized for speed, so they are a bit slow to use as a website if you care about performance at all
Overall, Notion is super interesting and easy to use, but the simplicity is a bit of a limitation when you want to have a custom site that has full content editing capabilities. In the end this means…no surprise…we’d still recommend WordPress.
One thing we might be even more convinced of is the benefits of Headless setups in general. The sites are super fast! There is still the question of previews, editing, and deployment, but they all seem like solvable problems in the long run.
