Update Pluggables Framework Documentation

docs/source/recipes/pluggables.md

@@ -27,9 +27,7 @@ To understand how they work, it's useful to look at the architecture:
   at `App.jsx` component level), so you don't have to do it:
 
 ```jsx
-<PluggablesProvider>
-  ...
-</PluggablesProvider>
+<PluggablesProvider>...</PluggablesProvider>
 ```
 
 This `Provider` acts like a centralized place where "insertion points" and
@@ -47,7 +45,9 @@ Then we can plug things as children to the `<Pluggable>` with some `<Plug>`
 components:
 
 ```jsx
-<Plug pluggable="left-column" id="navigation">relevant nav stuff</Plug>
+<Plug pluggable="left-column" id="navigation">
+  relevant nav stuff
+</Plug>
 ```
 
 Declaring a `<Plug>` with the same `id` twice will make the second one (in
@@ -57,16 +57,20 @@ Internally, the `<PluggablesProvider>` keeps a record of `Pluggables` and `Plug`
 this is achieved by having the `<Pluggables>` and `<Plug>` components register
 themselves with the Provider via React context.
 
+```{note}
+While Pluggables are a powerful framework for enhancing component integration, they are currently not compatible with server-side rendering (SSR).
+They excel in providing dynamic visual enhancements for the user interface, such as client components and widgets.
+However, when it comes to handling critical data that needs to load quickly, alternative approaches may be more suitable.
+```
 ## Customize the rendering of plugs
 
 You can customize the rendering of pluggables. The `<Pluggable>` component can take a function as a child and use that function to describe the rendering of pluggables.
 
 ```jsx
 <Pluggable name="block-toolbar">
-{(pluggables) => pluggables.map((p) => (<>{p()}</>))}
+  {(pluggables) => pluggables.map((p) => <>{p()}</>)}
 </Pluggable>
 ```
-
 ## Passing parameters from the Pluggable to the Plugs
 
 You can also pass options to the `Plugs`, to enable inter-component communication:
@@ -79,9 +83,9 @@ To use the passed params, you can do:
 
 ```jsx
 <Plug pluggable="block-toolbar" id="style">
-{({options}) => {
-  console.log(options);
-  return <Button>Click me</Button>
-}}
+  {({ options }) => {
+    console.log(options);
+    return <Button>Click me</Button>;
+  }}
 </Plug>
 ```

news/4735.documentation

@@ -0,0 +1 @@
+Added note that Pluggables are not compatible with server-side rendering (SSR). @Akshat2Jain

news/4932.bugfix

@@ -1 +1 @@
-Add a marker in the props passed to `RenderBlocks` in the Grid block view @sneridagh
+Add a marker in the props passed to `RenderBlocks` in the Grid block view @sneridagh