Progressive Enhancement in Django vs Remix
December 21, 2021
In this post, I want to tell you a quick story about one of the reasons I love Remix: super simple progressive enhancement.
A couple years ago, my team at work was tasked with creating a new application that would be used internally by our sales reps. The tool needed to allow reps to quickly search through our available products and build quotes to send to customers. For various reasons, we decided to build the app with Django.
Django is awesome. One thing I love about Django (and similar frameworks like Rails) is that you render your HTML server-side. The way you do this in Django is with their Django template language, which is an extension of HTML that allows you to reuse HTML files, and embed
We eventually needed enough interactivity in our quoting app that it was pretty difficult to maintain. We decided it would make our lives easier as developers to convert the entire front end to a React SPA and just use Django for the API routes and talking to the database. This solved our maintenance problems, and handling data was made easy with React Query, but I still felt like we had lost something.
It was around the time I was thinking about these problems that I heard about Remix. I bought a supporter license and dove in, and I immediately knew it was the solution I was looking for.
Remix gives you all the benefits of server-side rendering while also making the transition to interactivity on the client completely seamless. All it takes is one
loader functions are used during the initial server render, and they are automatically made available as endpoints and called from the client on page or layout transitions.
If you want to get fancy with forms and do form submissions client-side without a document refresh, you just have to switch from
<form> to Remix's
<Form>. Remix will then prevent the default refresh behavior, call an endpoint that runs your
action for that route, and call all the loaders for that route so the data on the page stays up to date. It's the same behavior the browser gives you, but without the page refresh!