Control panel list SSR

[JeffersonBledsoe]

Remove client-side fetching of control panels and perform it on the server. Prevents flash of unfinished control panel list

[netlify]

✅ Deploy Preview for volto canceled.

Name	Link
🔨 Latest commit	da8096a
🔍 Latest deploy log	https://app.netlify.com/sites/volto/deploys/645cc19bdf2df1000883540f

[cypress]

Passing run #5098 ↗︎

0

493

20

0

0

Details:

Merge branch 'master' into control-panel-ssr
Project: Volto	Commit: da8096a6a3
Status: Passed	Duration: 12:34 💡
Started: May 11, 2023 10:24 AM	Ended: May 11, 2023 10:37 AM

_{This comment has been generated by cypress-bot as a result of this project's GitHub integration settings.}

[JeffersonBledsoe]

@sneridagh I'll look into the failing unit test shortly. Any reason the control panel list wasn't already using asyncConnect to fetch the list? I've noticed this in a few places too and would like to update those

[tiberiuichim]

Awesome that you're converting from class to function.

[JeffersonBledsoe]

Awesome that you're converting from class to function.

@tiberiuichim Thanks! If there was the interest, I'd definitely be up for converting more components to functional components. It's alot to learn both class components and functional for developers not familiar with React.

As an aside, any idea what's up with the tests? I'm not sure how to handle async in jest while still letting it render correctly in Cypress

[JeffersonBledsoe]

@tiberiuichim Should the client still do a fetch to get the control panels, even though they should all be there from the SSR asyncConnect call? Seems wasteful to me

[tiberiuichim]

@JeffersonBledsoe This is one of the things that (IMHO) we do wrong with the current approach in Volto. See #2751 for some context.

The issue is a bit historic, to say so: in principle, as far as I understand, AsyncConnect, as a wrapper, would be able to inject async data as props in both SSR and Client. That's why when I've implemented the configuration-based extension mechanism for AsyncConnect, I've named them "asyncPropsExtenders", with an accent on "asyncProps". As far as I can tell, we should not be triggering any async network fetch action from inside the component - exactly your question, (as far as possible, as far as it makes sense to do so), and instead of just relying on the props being injected by the AsyncConnect. The way to go is to remove the __SERVER__ condition in App.jsx, but I guess we didn't want to do it because of time constraints to check that everything works.

[tiberiuichim]

I'm not sure how to handle async in jest while still letting it render correctly in Cypress

See https://training.plone.org/5/effective-volto/testing/unit.html

[erral]

Perhaps this is a stupid question, but why do we need SSR for control panels? This is never a public page and there is no need to render that on the server, right?

[JeffersonBledsoe]

Perhaps this is a stupid question, but why do we need SSR for control panels? This is never a public page and there is no need to render that on the server, right?

Speed and the flash of an incomplete control panel list are the reasons I started this PR. I occasionally work on servers that aren't in my country and there's a noticeable delay between seeing the initial control panel page and having to wait to see the control panel I want to open