chore(website): Upgrade to Docusaurus v3.6 - Enable Docusaurus Faster

[slorber]

Docusaurus Faster should allow the React Native Website to build... faster.

Benchmarks

Cold build:

Site builds 3x+ faster on cold builds.

hyperfine --prepare 'yarn clear' --runs 3 'DOCUSAURUS_FASTER=false yarn build' 'DOCUSAURUS_FASTER=true yarn build'


Benchmark 1: DOCUSAURUS_FASTER=false yarn build
  Time (mean ± σ):     103.536 s ±  1.828 s    [User: 184.537 s, System: 19.702 s]
  Range (min … max):   101.862 s … 105.487 s    3 runs

Benchmark 2: DOCUSAURUS_FASTER=true yarn build
  Time (mean ± σ):     34.091 s ±  0.556 s    [User: 67.332 s, System: 9.419 s]
  Range (min … max):   33.746 s … 34.733 s    3 runs

Summary
  DOCUSAURUS_FASTER=true yarn build ran
    3.04 ± 0.07 times faster than DOCUSAURUS_FASTER=false yarn build

Warm build

About the same time for warm rebuilds, despite the lack of persistent caching (see https://github.com/facebook/docusaurus/issues/10556). Rspack also outperforms

DOCUSAURUS_FASTER=false yarn build
hyperfine --runs 3 'DOCUSAURUS_FASTER=false yarn build' 'DOCUSAURUS_FASTER=true yarn build'


Benchmark 1: DOCUSAURUS_FASTER=false yarn build
  Time (mean ± σ):     41.263 s ±  3.233 s    [User: 49.333 s, System: 9.786 s]
  Range (min … max):   37.870 s … 44.308 s    3 runs

Benchmark 2: DOCUSAURUS_FASTER=true yarn build
  Time (mean ± σ):     36.655 s ±  3.864 s    [User: 71.131 s, System: 11.102 s]
  Range (min … max):   32.397 s … 39.936 s    3 runs

Summary
  DOCUSAURUS_FASTER=true yarn build ran
    1.13 ± 0.15 times faster than DOCUSAURUS_FASTER=false yarn build

[netlify[bot]]

✅ Deploy Preview for react-native ready!

Name	Link
🔨 Latest commit	153c7c55206692093b5c8352a97c1c329990ad30
🔍 Latest deploy log	https://app.netlify.com/sites/react-native/deploys/672cacfdad3d9100087d4eaa
😎 Deploy Preview	https://deploy-preview-4268--react-native.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[slorber]

Docusaurus v3.6 is out - PR updated

Blog post coming: https://docusaurus.io/blog/releases/3.6

@Simek ready to review

[cortinico]

There seems to be something going on with the banner on top (it's like cropped?):

Before	Aftre

[Simek]

Nice catch Nico! 👍

Found out that our CSS variable reassignment has been superseded by @media scoped overwrite in the Docusuars code.

Pushed a small fix for that, and also updated the lock after switching from pre-release to stable Docusuars version.

[slorber]

nice catch thanks

Switching for cssnano to lightningcss might have some subtle effects on CSS order. Previously our optimizer was a bit too aggressive/unsafe and removing that aggressivity (that doesn't even exist in lightnings) might change some rules being applied.

If you want more confidence than manual review, I can run my visual regression tests on the PR, similarly to what I did for the Docusaurus v3 upgrade here https://github.com/facebook/react-native-website/pull/3780

[cortinico]

If you want more confidence than manual review, I can run my visual regression tests on the PR, similarly to what I did for the Docusaurus v3 upgrade here #3780

Yeah that would be nice if is not too much work

[slorber]

I'll do that on Thursday when I'm back on Docusaurus 👍

Yes, it's additional manual work for me because Argos CI is not installed on this repo and I have to work around that using a separate test repo.

In the future, if you want to have visual regression tests simply by adding a PR label on a PR, you could adopt this CI workflow: https://docusaurus.io/blog/upgrading-frontend-dependencies-with-confidence-using-visual-regression-testing

I suggested it on Discord already but not sure who is supposed to make the decision. I think if the React Native team asks for it, @zpao could add Argos to the repo (free OSS plan, already approved for Docusaurus) and I could help you set it up.

The question is: is it worth it? Do you see yourself using visual regression tests more regularly? Can it be useful to you outside of my upgrade PRs?

[cortinico]

Do you see yourself using visual regression tests more regularly?

I guess our primary use cases would be significant version bumps like this one. We rarely do site-wide changes that are hard to check if regressing from a preview

[slorber]

I guess our primary use cases would be significant version bumps like this one. We rarely do site-wide changes that are hard to check if regressing from a preview

If I'm the only one doing these bumps, it's probably useless then. If others do it, it may be useful.

---

Visual regression tests here:

PR: https://github.com/slorber/rnw-visual-tests/pull/9

Only one change reported:

Report: https://app.argos-ci.com/slorber/rnw-visual-tests/builds/75/117730262

Note: this is a false positive and happens because this page has a snack player input autofocus that makes the page scroll: https://reactnative.dev/docs/improvingux

So, it looks safe to merge 👍