Fast mobile real-time PWAs with Svelte and headless CMS

Learn how to build real-time progressive web apps with Svelte, Firebase, and headless CMS (Drupal etc.).

Traditional approach to decoupled CMS, where CMS provides only JSON data and no HTML, seems to throw baby out with the bath water. It has some issues:

• You have to reimplement all theming work in your JS frontend
• You still have the problem of what to do with the SEO and page metadata that you lost with the CMS

We'll show a hybrid approach in which you:

• Let the CMS do server-side rendering, without logging in your users (and thus all pages can be CACHED!)
• If they must login (non-editors), let them authenticate to an external authentication system (e.g. Auth0/Okta/FirebaseAuth)
• Move personalization (non-cacheable) and all user generated content (e.g. comments, file uploads) to a FAST external engine, possibly in cloud (e.g. Firebase/Amplify)
• Inject your JavaScript app into Drupal pages (e.g. Decoupled Blocks)
• Use Svelte over React/Vue/Angular
• Use GraphQL to query the CMS, but use persisted queries using HTTP "GET" for better caching and security

This approach is not only more efficient, it is also simpler to implement. We'll get into all technical nitty-gritty if time permits.