search

Esri / calcite-design-system

A monorepo containing the packages for Esri's Calcite Design System
https://developers.arcgis.com/calcite-design-system/
Other
289 stars 76 forks source link

Gatsby JS SSR with Calcite Components #620

Closed patrickarlt closed 3 years ago

patrickarlt commented 4 years ago

We have been successfully using Calcite Component in a lot of our work on ArcGIS for Developers. However our main blocker remains the fact that there will always be a FOUC with Calcite Component because the JS and CSS are bundled together and the CSS won't apply until the JavaScript renders leaving items in slots unstyled. This was particularly noticeable on <calcite-tree> https://github.com/Esri/calcite-components/issues/609 in cases where we had ~3000+ items like the ArcGIS Enterprise SDK API Ref often taking several seconds to parse and initialize.

Here is a smaller example from the Enterrpise SDK Guide (~100) items:

72474343-7628cd00-379d-11ea-918d-75df832ba37a

We eventually re-wrote a sub-set of <calcite-tree> in React to avoid this and maintain more control over rendering and performance which is what you see on the site now.

Stencil does support pre-rendering via hydrate app which I setup for Calcite Components. I then wrote a Gatsby JS plugin for calcite component prerendering . This worked but had a few issues:

  1. Poor prerender performance. Since this runs over every page and renders all components on that page our ~3000 tree items prerendered over all 3000 pages for ~9 million components. This looks several hours even working across multiple cores.
  2. Inconsistent prerender results. We noticed that our tree behaved subtly differently when run through hydrate app vs run client side only. We never debugged the because of other issues.

In the end I think it would help to define what the scope of Calcite Components is and how it should be used. Our use cases on ArcGIS for Developers require everything to be prerendered for SEO we want to avoid a FOUC and thus can't wait for Calcite Components to load and style everything. I'm sure esri.com has similar issues. This has lead us to limiting Calcite Component use to things like <calcite-dropdown>, <calcite-tooltip> <calcite-modal> and <calcite-popover> which can hide under other pre-rendered elements.

Ideally we could:

  1. Improve prerender performance of all our components <calcite-tree> is a big one for us but we could also use others.
  2. Improve prerender stability of components. In general this might be fine with a few exceptions but no one is testing it.
  3. Work with Stencil to improve prerendering in Gatsby JS to make it faster especially across lots of pages/components.
macandcheese commented 4 years ago

The scope of calcite-components is absolutely intended to include marketing sites and documentation sites like Esri.com / ArcGIS for Developer documentation.

We should use our support channels with Ionic / Stencil to get more definitive direction for these issues, which will be understandably be show stoppers for some groups until they are resolved.

github-actions[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

github-actions[bot] commented 3 years ago

This issue has been automatically closed due to inactivity.