[docs] Improve performance (next.js)

[nathanmarks]

Right now the docs have pretty bad performance. This is what happens when you load pages (esp with more components):

We eventually need a documentation setup that does not involve parsing AST at runtime, it's not scalable. AST parsing for documentation purposes should all be done during the build process imo.

[owencm]

Just my 2¢... I believe having a naively written documentation site that doesn't focus itself on performance is a good thing, since much real world usage of this framework will be in non-performant sites that do the wrong thing, and to the greatest extent possible I'd suggest we should make the framework hardened to that

[nathanmarks]

@owencm for the most part I'd agree, the docs site doesn't need to be over-engineered (or shouldn't be, as you pointed out). However, this particular issue I've highlighted causes a pretty gross performance dip when you navigate the docs. The noticable delay causes bad UX at the moment -- check out the jank.

[thomasmery]

@owencm hi, just browsing the issues here and stumble upon your comment

much real world usage of this framework will be in non-performant sites that do the wrong thing

would you care to explain what you meant by

that do the wrong thing

thanks

[nathanmarks]

@thomasmery What he's saying is, since lots of users do the wrong thing we shouldn't over-optimize the documentation in order to have it be representative of real world use so we can experience user's woes and make sure the framework can hold its ground.

[thomasmery]

thanks,

still not sure what the wrong thing is

but I guess it equals to not optimized

[nathanmarks]

@thomasmery Yes, not perf optimized.

[owencm]

@thomasmery yes, I meant most sites are designed badly when it comes to performance and we should ensure Material-UI is hardened to that as much as possible.

For a specific example, sites often do seconds of blocking JS when buttons are clicked. We should ensure the framework is designed to ensure animations still operate correctly when that happens. I recently submitted pull request #3958 to solve this specific issue that I only discovered because our documentation site does lots of blocking JS!

[oliviertassinari]

I think that we should be using next.js for that issue, that should be a game changer for UX and DX.

[oliviertassinari]

Next.js provides a nice x2 improvement factor without any tweak.