Making the Supabase Dashboard Supa-fast

Summary

Adding features to the Supabase single-page application dashboard risked performance regressions due to increasing JavaScript bundle sizes. To establish a baseline, the engineering team introduced next-bundle-analyzer and tracked Real User Monitoring alongside Core Web Vitals using Sentry. Optimization efforts focused on pruning dependencies, which included swapping Moment.js for day-js, replacing Joi with ajv, reverting crypto-js to version 3.3.0, and moving the 388 KB zxcvbn password module to a backend API. The team also implemented Next.js dynamic imports for heavy components like spreadsheet parsing, removed legacy server-side props to unlock Automatic Static Optimization, and configured long cache headers on assets. These architectural adjustments brought Core Web Vitals within recommended thresholds and lowered client-side page transition payloads below 200 KB of JavaScript.

Context

Adding new features like a Monaco-backed SQL editor and database views to the Supabase single-page dashboard led to bundle growth and potential performance regressions across the application.

Approach / What changed

The team established bundle and Core Web Vitals baselines, replaced bloated npm dependencies with lightweight or native alternatives, offloaded password-checking logic to the server, lazy-loaded large components with dynamic imports, enabled Next.js Automatic Static Optimization, and corrected browser cache headers.

Takeaways

• Replacing heavy frontend libraries with lightweight or native alternatives, such as switching from Moment.js to day-js or using native fetch instead of axios, substantially reduces bundle footprint.
• Moving computation-heavy modules like zxcvbn to backend APIs and lazy-loading large dependencies like xlsx prevents massive scripts from loading on initial visits.
• Enabling Next.js Automatic Static Optimization by removing getServerSideProps and getInitialProps allows pages to be pre-rendered to HTML and cached on CDNs.

Related reading

• Supabase · May 5, 2021

  Supabase Beta April 2021

  Supabase focused on platform stability, security enhancements, and community support during its April 2021 beta update cycle. To address visual accessibility needs for developers with astigmatisms or those operating in brightly lit environments, the team delivered Light Mode within the dashboard settings. The release also introduced OpenAPI-powered Storage API documentation, community translations for the main repository spanning nineteen distinct languages, and an experimental synchronization server connecting Postgres with Stripe. Dashboard components are systematically migrating into an open-source UI library, establishing necessary foundations for local development tooling and self-hosted environments. Additionally, the team reported substantial contributor growth across its realtime server and UI repositories while continuing engineering on a Workflows engine aimed at a July release.

  Paul Copplestone

• Supabase · Sep 28, 2021

  Supabase Hacktoberfest Hackathon 2021