From Dynamic to Pre-Rendered SPA

Published on Oct 2, 2020

I'm currently working on transitioning Writelier from an isomorphic app to a static-generated single page application.

The goal is three-fold: remove loading times, obtain a resilient app that doesn't need an Internet connection to work, and increase my target audience to mobile and desktop users.

As I explained in a previous article, the best way to go about building a pre-rendered SPA is to start with an isomorphic app, then implement the pre-rendering logic before handling front-end routing: it's the method with the fastest time-to-production.

I just started coding the pre-rendering logic: how the web server generates and serves webpages, and how it handles content changes. Since I can't pass data to a static webpage at runtime, some of the backend logic has to move away from the route controllers to be placed in application programming interfaces that will be called by React from the client-side. That's typically the case for all the authentication logic.

After this step, I have to implement the routing logic from React: when a user clicks on an internal link, the app has to display the corresponding page component. Ideally, components are pre-loaded before the user asks for it to avoid loading time, but each component has to be lazy-loaded to decrease the size of the application bundle (and thus increase the app's time-to-interactive score). Doing that with a pre-rendered or server-side rendered application is something I'm not familiar with, so I experimented with this concept beforehand. Code-splitting isn't easy to understand, but I think I'm getting the hang of it.

Last but not least, I have to package all the assets into a progressive web application and leverage the offline storage features provided by web browsers. I already have some experience with this part, but Writelier is on another scale. With more than 25,000 articles published by hundreds of writers, I have to be extra-careful about the offline caching mechanism. Otherwise, there is a chance that some webpages don't get updated correctly and break things.

I planned the release for October 15. Once the move to the new complete architecture is done and most bugs are fixed, I'll finally be able to launch and focus more on community and marketing.