I’m building an application using Next.js 14 and am holding my filtering state within the URL. The request that returns the filtered data is a POST request that takes a payload of a certain structure. To minimize data transformation and to allow for the filtering functionality I have built on the backend, I’ve decided to hold that json structure in the URL.

I don’t really need a specific solution, but I’d really like to know some popular methods that applications use to handle these situations.

An application that I use at work has their filter parameter set like this:

filter=XQAAAAK1BgAAAAAAAABBqQqHk62Wwa8yt9cbbXI48HpL2ei1XixEiNVOhiWmf4IrTn4sWU_3IKAU8pp0JakGP0gOsW1DYtFKp_AC2BTRzpOo78iZHOVvr0hiJRbBk1oOhmSsdxnw2f69aDURlb4PiVuSSbER27VQYN-57zTVmZsJqxzjcETFi4WWxtxPwK_ocueZkNh9p_mYJ_Lftk9Qvgo-fovKKbZQ4UZJh4eGahSdexKvbcE_6UfjrakEiewsnDmmM1T4-6KDTnRGICSqLEs7fd6oRyH7vHpGYz7eCootuSxGdjX_266ueNw9Fhp1I4j7mbqbh_PzmHayl2gRM-yalVJL2CvxM3sdPb6m7ttkZYzfCxYxE6wwSvi8C78VzordKUpopYPbEHTWzrPru5QRqqr3PDRoSOwK2d0E0kTKO1PJnxU0KjCSa_2R4Rza_i4aHGxQD2b7UvNkV4oVEU9BusJwRP7DAcQ

I can’t seem to figure out how this is encoded and would like some insight if anyone recognized the encoding method.

My current solution is using the lz-string library to compress and encode the stringified json, but there are cases where this string can still be way too long from the browsers to handle (2000 character limit).

I expected it to be much shorter than just encoding to base64, but it still isn’t short enough in some cases.