docs: add section on reproducible ids for prefix ids (svg#2010)

docs/03-plugins/prefixIds.mdx

@@ -16,4 +16,30 @@ svgo:
       default: true
 ---
 
-Prefix element IDs and class names with the filename or another arbitrary string.
+Prefix element IDs and class names with the filename or another arbitrary string. This is useful for reducing the likeliness of ID conflicts when multiple vectors are inlined into the same document.
+
+## Prefer Reproducible IDs
+
+It's acceptable to generate IDs that have no relation to the node or file they're for, such as through a counter, random number generator, or UUID. Consider the following SVGO config:
+
+```js title="svgo.config.js"
+let prefixCounter = 0;
+
+module.exports = {
+  plugins: [
+    {
+      name: 'prefixIds',
+      params: {
+        delim: '',
+        prefix: () => prefixCounter++,
+      },
+    },
+  ],
+};
+```
+
+However, a solution like this can not gurantee a reproducible prefix. Unpredictable IDs can pose an issue for tooling, namely React, and anything that depends on it like Next.js and Docusaurus.
+
+With unpredictable IDs, if you're prerendering or use SSR (Server-Side Rendering), the client-side and server-side HTML may mismatch, leading to errors on client-side and regenerating the tree.
+
+For this reason, it's preferred to use reproducible prefixes where possible. Consider using the filename or node as a seed to produce a shorter string, rather than generating something from scratch.

docs/03-plugins/removeViewBox.mdx

@@ -14,3 +14,5 @@ This plugin prevents SVGs from scaling, so they will not fill their parent conta
 Some external tools that use SVGO have also been found to override the default preset to disable this plugin by default, including [Docusaurus](https://github.com/facebook/docusaurus/blob/e17784effa2c370d81c7806c22ad19c6dce4a1cc/packages/docusaurus-utils/src/webpackUtils.ts#L127) and [SVGR](https://react-svgr.com/docs/migrate/#svgo).
 
 See [svg/svgo#1128](https://github.com/svg/svgo/issues/1128) for more context.
+
+:::