Add a note that dynamic is required for the nonce prop (#1685)

Co-authored-by: victoria <[email protected]>
Co-authored-by: Alexis Aguilar <[email protected]>

docs/components/clerk-provider.mdx

@@ -226,7 +226,7 @@ The `<ClerkProvider>` component must be added to your React entrypoint.
   - `nonce?`
   - `string`
 
-  This nonce value will be passed through to the `@clerk/clerk-js` script tag. You can use this to implement [strict-dynamic CSP](/docs/security/clerk-csp#implementing-a-strict-dynamic-csp).
+  This nonce value will be passed to the `@clerk/clerk-js` script tag. Use it to implement a [strict-dynamic CSP](/docs/security/clerk-csp#implementing-a-strict-dynamic-csp). Requires the `dynamic` prop to also be set.
 
   ---
 

docs/security/clerk-csp.mdx

@@ -117,6 +117,9 @@ export const config = {
 
 With this `strict-dynamic` configuration in place, **all script tags must be passed with a `nonce` value** or they will be blocked. This can be done by passing the nonce value as a `nonce` parameter to the script tag. For example, `<script src="https://example.com/script.js" nonce="<nonce_value>"></script>`. If you are using Next.js, any scripts loaded through next will automatically have the nonce value injected.
 
+> [!NOTE]
+> You must pass the [`dynamic` prop](/docs/components/clerk-provider#properties) to `<ClerkProvider>` for `strict-dynamic` CSPs to work correctly. This is because the nonce value is generated on the server and passed to the client, which requires dynamic rendering.
+
 With the above middleware, the nonce value is made accessible via the `x-nonce` request header. An example is provided below on how to access this value within a Next.js page.
 
 ```tsx {{ filename: 'pages/index.tsx' }}