See before you sync

How I sped up my calendar without optimizing my database

This post is a draft and may not be complete.

I have been working on a calendar application.

You all know why we use a database, to store data. I did the same by using hosted postgresql database in the us-west, while I am working on my new calendar application. I have asked bunch of my friends try it and give feedback.

As you might have guessed by now, I care a lot about performance. To find out what was slow, I checked which API calls and server actions were taking the most time.

I have seen an issue which was expected and one which was not.

Expected :

Unexpected :

I then immediately implemented simple cache layer to my database queries using redis for my most repeated sql queries using orm. but the issue still persists.

So I did some digging for the reason and saw that deploying an application and database in us-west is not a great idea when most of my friends who tried this are from India.

So I went back to the drawing board and brainstormed some solutions. Let’s first go through them and then I will explain the solution that actually works.

Ideas that dont work :

Yes, syncing is the issue but not near my application, not my database, not my cache, It needs to be even more closer to the user, their browser.

So, I started on searching for sync layers for my application. Many caught my eye but I am going with Tanstack Query’s Caching feature.

I have considered other options like manually implementing a cache layer using localStorage, but most of the time you dont have to reinvent the wheel, so I went with it.

This have added benifit of faster loading of data in the browser, and also reduced the number of calls to my server. I am in the process of implementing this and maybe update this post with some results.

This helps in implementing more features like offline support, optimistic updates and better mutations which I am planning to do in the future.