React Server Components (RSC)

Experimental Features
7

Some exciting new developments! Redwood now supports React Server Functions aka React Server Actions :tada:

Server Functions is a way for client components to directly call functions on the server. For this to work the server function needs to be placed in a separate file with a 'use server' directive at the top.

It can look like this

'use server'

// module state on server
let counter = 0

export const getCounter = () => counter

export const increment = () => {
  counter += 1
}

Note that this is just a simple example - not best-practice. counter will be shared by everyone!

Pressing “Increment server counter” in the client component will update counter on the server and re-render the page.

Here’s the code for that client component

'use client'

import { useState } from 'react'

import { mutate } from '@redwoodjs/vite/client'

interface Props {
  increment: () => void
}

export const ServerActionCounter = ({ increment }: Props) => {
  const [count, setCount] = useState(0)
  return (
    <div style={{ border: '3px blue dashed', margin: '1em', padding: '1em' }}>
      <h3>This is a client component.</h3>
      <p>Count: {count}</p>
      <button onClick={() => setCount((c) => c + 1)}>Increment</button>
      <p>
        <button onClick={() => mutate(() => increment())}>
          Increment server counter
        </button>
      </p>
    </div>
  )
}

And here’s how it’s used:

import { getCounter, increment } from './funcs.js'

// ...

return (
  <>
    <p>Server counter: {getCounter()}</p>
    <ServerActionCounter increment={increment} />
  </>
)

I’ve you’ve tried Server Actions in Next you should know that the RW implementation is still very limited. For example you can’t yet add use server inside a function to make it a server action. You can only make an entire file a “React Server Functions-file”.

4 Likes