Refactor and bugfixes: Improve routing, state management and caching for dataViews

Greenheart commented 3 weeks ago

High level overview

This PR improves the perceived performance when navigating between data groups (companies vs municipalities), among other bugfixes and improvements related to the routing and data loading. Thanks to improved server side caching, data loads faster too, while using less RAM due to reduced duplication in the cache.

Most important changes

Bugfix: Ensure state from URL can control which dataGroup to show by default. This allows linking to the RegionalView again.
Simplify client-side state and rely on server side state plus link prefetching instead. This reduces the unnecessary re-renders on the client when navigating between different datasets.
Add caching for municipalities and companies since they are the heavy datasets. Remove response caching since that duplicates data unnecessarily and thus uses more RAM.
Redirect to default dataset or dataView instead of showing 404 page.
Fix broken caching for the map API endpoint. This greatly speeds up the time it takes to show the map, even when toggling back and forth between the two views /lista and /karta.
Fix hydration warning caused by usage of t imported from i18next instead of importing useTranslation from next-i18next and then getting the t-function via const { t } = useTranslation().
Side effect of the caching change: Fixed a bug where translations didn't update properly during dev HMR. This was because the i18n strings got cached together with the other data. Since we now only cache the actual data, and not the full responses, the i18n strings will now always show the latest version (for routes using the dataview / StartPage).

Remaining tasks

[x] Improve caching on the server side. Instead of duplicating companies and municipalities for every valid combination of dataGroup and dataset, we could cache municipalities and companies separately, and then extend the other cached props. This way, we could reduce RAM usage, and improve performance (since we would get more cache hits for getting the companies + municipalities data).

To solve in a future PR:

Improve page load performance. We're loading way too much data. See #440 for details.

vercel[bot] commented 3 weeks ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
klimatkollen	✅ Ready (Inspect)	Visit Preview	May 13, 2024 9:49am

Greenheart commented 2 weeks ago

Good catch! The PillSwitch is now only responsible for rendering the links, which allows the parent component to update link href based on the selected dataset and dataView.

For companies, we don't need dynamic links yet as we only have one view.

Ready for final testing and review :)

Klimatbyran / klimatkollen