Merge feat/server-actions into feat/on-demand-rsc

docs/admin/customizing-css.mdx

@@ -33,6 +33,19 @@ Here is an example of how you might target the Dashboard View and change the bac
   If you are building [Custom Components](./overview), it is best to import your own stylesheets directly into your components, rather than using the global stylesheet. You can continue to use the [CSS library](#css-library) as needed.
 </Banner>
 
+### Specificity rules
+
+All Payload CSS is encapsulated inside CSS layers under `@layer payload-default`. Any custom css will now have the highest possible specificity.
+
+We have also provided a layer `@layer payload` if you want to use layers and ensure that your styles are applied after payload.
+
+To override existing styles in a way that the previous rules of specificity would be respected you can use the default layer like so
+```css
+@layer payload-default {
+  // my styles within the payload specificity
+}
+```
+
 ## Re-using Payload SCSS variables and utilities
 
 You can re-use Payload's SCSS variables and utilities in your own stylesheets by importing it from the UI package.

docs/admin/server-functions.mdx

@@ -6,15 +6,19 @@ desc: Execute custom server-side logic from client-side code using Server Functi
 keywords: server functions, server-side functions, server-side logic, server-side code, server-side, functions, Payload, headless, Content Management System, cms, javascript, react, node, nextjs
 ---
 
-The Payload [Admin Panel] fully supports [React Server Functions](https://react.dev/reference/rsc/server-actions) (formerly grouped under the "Server Actions" umbrella). These are functions that are defined on the server, using server-only modules, and called from the client. This is a way to execute custom server-side logic from client-side code.
+The Payload [Admin Panel] supports [React Server Functions](https://react.dev/reference/rsc/server-actions) directly through the Payload Config. Server Functions are functions that are defined on the server, which may use server-only modules, but are called by the client. This is a way to execute server-side logic through a client-side action.
 
-Server Functions are a good alternative to traditional [REST API Endpoints](../rest-api#custom-endpoints), with a few key differences. While they behave similarly, Server Functions are simpler to define, not requiring a specified path or method. They are also easier to consume, not requiring any client-side fetch. Server Functions are also able to return rendered React components.
+Server Functions are a good alternative to traditional [REST API Endpoints](../rest-api#custom-endpoints), but with a few key differences. While they behave similarly, Server Functions:
 
-Requests made through a Server Function also do not propagate though the browser's network panel in the same way as fetch requests, making it harder for others to inspect, tamper with, or replay requests directly through the browser.
+1. are simpler to define, not requiring a specified route or method
+2. are easier to consume, not requiring the Fetch API
+3. are able to return React and/or JSX
+
+Server Functions do not necessarily need to be defined in the Payload Config. It is possible to write your own Server Functions and thread them to your client accordingly. You will, however, be responsible for authenticating those requests yourself. All Server Functions defined through the Payload Config will automatically receive a `req` argument, containing the `user`, `payload`, and more.
 
 <Banner type="info">
   <strong>Note:</strong>
-  Server Functions are only available in the Payload Admin Panel, not your public-facing application. For public-facing server-side logic, consider using [Custom Endpoints](../rest-api#custom-endpoints).
+  Server Functions defined through the Payload Config are only available within the Admin Panel, not your public-facing application. For public-facing server-side logic, you can write your own Server Functions directly into your application.
 </Banner>
 
 ## Admin Options
@@ -57,7 +61,7 @@ The function receives an object with the following properties:
 
 ## Client-side Usage
 
-To execute a Server Function from the client, use the `useServerFunctions` hook:
+To execute a Server Function from the client, use the `useServerFunctions` hook, passing the `name` of your Server Function:
 
 ```tsx
 'use client'
@@ -89,7 +93,7 @@ const MyComponent = () => {
 
 ## How it works
 
-In order for Payload to support dynamic Sever Functions, a single handler is placed at the root of the application:
+In order for Payload to support Sever Functions through the Payload Config, a single handler is placed at the root of the application:
 
 ```ts
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
@@ -133,7 +137,32 @@ const Layout = ({ children }: Args) => (
 export default Layout
 ```
 
-This pattern allows us to thread server-only modules, such as the Payload Config, through to the Server Function handler to be consumed within your function's logic.
+The Server Function Handler is a necessary pattern for Server Functions to have access to the Payload Config, as well as any other server-only modules that may be required. This is because all server-only modules _must_ be imported in the closure as the Server Function, wherever the `use server` directive is used. [More details](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#closures-and-encryption).
+
+## Troubleshooting
+
+#### "Unknown Server Function: 'my-server-function'"
+
+    Ensure the `name` property of your Server Function matches the name you are passing through the `serverFunction` args.
+
+#### "Error: Client Functions cannot be passed directly to Server Functions. Only Functions passed from the Server can be passed back again"
+
+    Non-serializable values cannot cross the server / client boundary. Ensure that the args your sending through your Server Function are serializable, i.e. not containing any functions, classes, etc.
+
+#### "Body exceeded _n_ limit"
+
+    By default, Next.js places a 1mb limit on the body size of incoming requests. However, this can be increased by setting the `bodySizeLimit` option in your `next.config.ts` file. [More details](https://nextjs.org/docs/app/api-reference/next-config-js/serverActions#bodysizelimit).
+
+    ```ts
+      {
+        // ...
+        experimental: {
+          serverActions: {
+            bodySizeLimit: '2mb',
+          }
+        }
+      }
+    ```
 
 ## TypeScript