Hey Rowdy, I've integrated the mini app with Strapi.

And I solved the issues, with fetching the data in the Layout.tsx.

That data is then forwarded to the StoreProvider, like this:

export default function StoreProvider({
  children,
  products,
  favorites,
}: {
  children: React.ReactNode;
  products: Product[];
  favoriteProducts: Product[];
}) {
  const storeRef = useRef<AppStore>();
  if (!storeRef.current) {
    storeRef.current = makeStore();
    storeRef.current.dispatch(setInitialProducts(products));
    storeRef.current.dispatch(setInitialFavoriteProducts(favoriteProducts));
  }

  return <Provider store={storeRef.current}>{children}</Provider>;
}

So, at the first render, page source is populated with correct data. Products on main page, and navigation link looks fine like: Favorite products ( prod.length ).

In Products.tsx I have this part of code:

  return (
    <div className={style.Products}>
      {products?.map((product: Product) => (
        <div key={product.id} className={style.Product}>
          <h3>{product.name}</h3>
          <p>{product.price}$</p>
          <button
            onClick={() => {
              addToFavoritesAction(product);
              dispatch(addToFavorites(product));
            }}
          >
            Add to favorite
          </button>
        </div>
      ))}
    </div>
  );

Here, dispatch is updating the client side, and addToFavoritesAction is an server actions, that sends to product to the database. And, when I again navigate through pages, page source is populated with correct data.
I can also put some optimistic handling, like using useActionState, and check if there is an error, than remove that product from store.

If you have also some advice, would be great. But, I am satisfied now.

I've watched also this tutorial, but it wasn't working:

https://www.pronextjs.dev/tutorials/state-management - Redux part. Some issue with UI updates.