I think it’s because you are fetching all the categories unconditionally in the beforeSSR action, not only for the home:
beforeSSR: async ({ state, actions }) => {
await Promise.all(
Object.values(beforeSSRCategories).map((category) => {
return actions.source.fetch(`/category/${category.name}/`);
})
);
};
Right now, you have to do the conditional logic yourself to avoid that. For example, if you want to do this fetch only on the home, you can:
beforeSSR: async ({ state, actions }) => {
if (state.router.link === "/")
await Promise.all(
Object.values(beforeSSRCategories).map((category) => {
return actions.source.fetch(`/category/${category.name}/`);
})
);
};
If you want to do this also on categories, you can:
beforeSSR: async ({ state, actions }) => {
if (state.router.link === "/" || state.router.link.startsWith("/category/"))
await Promise.all(
Object.values(beforeSSRCategories).map((category) => {
return actions.source.fetch(`/category/${category.name}/`);
})
);
};
And so on.
Once you do this conditionally, the data won’t be there when you do the server-side rendering of a post and then move to the home, so you also need to include the same logic in a useEffect of those components:
const Home = ({ state }) => {
useEffect(() => {
Object.values(fetchCategories).map((category) => {
actions.source.fetch(`/category/${category.name}/`);
});
});
};
Be aware that you have to check in those components if the fetch has finished or not using data.isReady.
We are aware that this is not the ideal way to do this, so in the v2 of source these types of things are going to be much more easy and flexible because you should be able to attach additional handlers to a certain route/pattern without having to overwrite the original one.
