search

plone / volto

React-based frontend for the Plone Content Management System
https://demo.plone.org/
MIT License
481 stars 653 forks source link

Listing blocks and SSR #2095

Open cekk opened 3 years ago

cekk commented 3 years ago

I noticed that listing blocks are not rendered in ssr. We remember that this intentionally but i don't remember why.

Our problem is that if you have some listing blocks as top blocks in one page, you see the first load of the page without them, and after some time, they appear (beacuse get loaded on client side).

You can see an example here: https://www.comune.modena.it The first 2 or 3 blocks are listing ones and on page load they are not in the html and get loaded later, moving all the contents down.

Are they omitted for some technical or performance reasons? The ssr can't perform additional api calls and update the store?

tiberiuichim commented 3 years ago

@cekk: I might be wrong, but I think your best bet is to write a block transformer to "prepopulate" the listing in a volatile value in the block data (I've proposed the volatile "smart field" concept for tasks like this).

The problem is that the network-fetching call is only triggered by the block itself, on discovery of its data. There is some code in Volto that uses asyncConnect for SSR, but the view components are dynamically computed, so they can't use asyncConnect.

tiberiuichim commented 3 years ago

Some pointers to the code, why exactly the asyncConnect misses all backend calls done by the blocks:

https://github.com/makeomatic/redux-connect/blob/6e4d865fa5fbb8db2a505cb177583f34fb9edd95/modules/helpers/utils.js#L105 You can see here that it uses the router to identify components that have reduxAsyncConnect set on them https://github.com/makeomatic/redux-connect/blob/6e4d865fa5fbb8db2a505cb177583f34fb9edd95/modules/helpers/utils.js#L83