Meta tags:
description=Documentation for RedwoodSDK — the React framework for Cloudflare.;
description=React, Server Components, Server Actions, and Suspense;

Headings (most frequently used words):

options, server, and, data, serverquery, serveraction, responses, rendertostream, rendertostring, element, promise, experimental, react, components, fetching, displaying, functions, advanced, usage, how, it, works, context, returning, manual, rendering, on, this, page, the, rsc, only, header, side, optimization, intercepting, action, readablestream, string,

Text of the page (most frequently used words):
the (75), server (52), #component (27), client (26), react (24), and (22), data (18), use (16), #function (16), return (15), response (15), for (13), const (13), components (13), todos (13), you (12), async (12), export (12), serverquery (11), this (11), serveraction (10), page (10), from (10), todo (10), ctx (10), action (9), options (8), rendertostream (8), side (8), only (8), status (8), can (8), with (8), string (7), rsc (7), functions (7), your (7), redwoodsdk (7), default (7), import (7), addtodo (7), auth (7), title (7), rendertostring (6), element (6), responses (6), document (6), html (6), await (6), div (6), experimental (5), header (5), not (5), will (5), any (5), new (5), form (5), render (5), returned (5), rwsdk (5), tsx (5), formdata (5), pages (5), when (5), where (5), button (5), suspense (5), promise (4), rendering (4), context (4), payload (4), rendered (4), returns (4), automatically (4), actions (4), which (4), standard (4), that (4), also (4), redirect (4), behavior (4), state (4), updated (4), queries (4), get (4), method (4), isauthenticated (4), worker (4), userid (4), user (4), readablestream (3), optimization (3), fetching (3), request (3), hydration (3), wrap (3), without (3), stream (3), tree (3), true (3), initclient (3), src (3), redirects (3), location (3), middleware (3), requestinfo (3), unnecessary (3), rehydrate (3), overhead (3), query (3), check (3), create (3), must (3), todopage (3), sdk (3), manual (2), advanced (2), usage (2), intercepting (2), returning (2), how (2), works (2), displaying (2), storage (2), handling (2), routing (2), whether (2), inject (2), corresponding (2), injectrscpayload (2), false (2), around (2), given (2), wrapping (2), 404 (2), notfound (2), takes (2), callback (2), streams (2), does (2), handle (2), negotiation (2), required (2), like (2), route (2), interactivity (2), handles (2), provides (2), way (2), onactionresponse (2), useful (2), after (2), add (2), are (2), headers (2), available (2), custom (2), code (2), setting (2), all (2), call (2), result (2), while (2), calls (2), typically (2), expect (2), entire (2), need (2), requireauth (2), 401 (2), unauthorized (2), throw (2), hypothetical (2), utility (2), lib (2), file (2), recommend (2), renders (2), findmany (2), type (2), executed (2), sent (2), streamed (2), allow (2), loading (2), then (2), realtime (2), database (2), email (2), authentication (2), next, previous, called, relevant, error, paramter, errors, happen, during, onerror, designed, generating, features, transitions, require, different, format, handler, submissions, may, fail, fully, interactive, routes, please, defineapp, limitations, decodes, imperatively, prevent, log, console, entry, intercept, providing, want, manually, perform, effects, based, 303, list, success, logic, other, types, supported, their, metadata, made, has, 3xx, objects, particularly, performing, completes, share, globally, between, per, basis, populated, via, prop, allows, resolve, directly, keeping, current, perfectly, intact, avoiding, flickering, cycles, contains, actual, actionresult, tells, there, change, node, null, recognizes, skips, expensive, process, instead, minimal, wrapped, sends, special, behind, scenes, uses, specialized, protocol, enable, fast, fetches, full, searchtodos, customize, http, delete, deletetodo, createtodo, rehydrates, post, mutations, secret, getsecretdata, gettodos, simple, many, interactions, especially, give, more, control, over, wrappers, submit, name, text, input, submitted, back, parsed, view, execute, able, boundary, show, being, fetched, receives, object, pass, fallback, key, map, app, run, they, easily, fetch, make, part, click, myclientcomponent, needs, interact, clicking, etc, mark, directive, hydrated, browser, hello, myservercomponent, used, build, interface, means, these, include, copy, markdown, legacy, router, reference, troubleshooting, vitest, debugging, optimize, frontend, development, guides, hosting, security, environment, variables, cron, queues, overview, core, migrating, quick, start, started, search, docs, framework, cloudflare,

Text of the page (random words):
redwoodsdk docs the react framework for cloudflare react server components redwoodsdk search get started quick start migrating to 1 x core overview request handling routing react server components storage queues cron email environment variables authentication security hosting experimental realtime database authentication guides frontend development email database optimize server function streams debugging vitest troubleshooting reference create rwsdk sdk worker sdk router sdk client legacy realtime react server components react server components copy markdown react server components server actions and suspense react is used to build your user interface by default all components are server components that means that the component is rendered on the server as html and then streamed to the client these do not include any client side interactivity export default function myservercomponent return div hello from the server div when a user needs to interact with your component clicking a button setting state etc then you must use a client component mark the client component with the use client directive this will be hydrated by react in the browser use client export default function myclientcomponent return button click me button fetching and displaying data react server components run on the server they can easily fetch data and make it part of the payload that s sent to the client src app pages todos todopage tsx export async function todos ctx const todos await db todo findmany where userid ctx user id return ol todos map todo li key todo id todo title li ol export async function todopage ctx return div h1 todos h1 suspense fallback div loading div todos ctx ctx suspense div the todopage component is a server component it is rendered by a route so it receives the ctx object we pass this to the todos component which is also a server component and renders the todos suspense when a server component is async you ll be able to wrap it in a suspense boundary this will allow you to show a loading state while the data is being fetched server functions allow you to execute code on the server from a client component pages todos functions tsx use server import requestinfo from rwsdk worker export async function addtodo formdata formdata const ctx requestinfo const title formdata get title await db todo create data title userid ctx user id the addtodo function is a server function it is executed on the server when the form is submitted from a client side component the form data is sent to the server and the function is executed the result is streamed back to the client parsed by react and the view is updated with the new todo pages todos addtodo tsx use client import addtodo from functions export default function addtodo return form action addtodo input type text name title button type submit add button form serverquery and serveraction standard react server action calls typically expect the server to return the entire updated ui tree so the client can rehydrate the page for many interactions especially queries where you only need the returned data this is unnecessary overhead to give you more control over this behavior redwoodsdk provides serverquery and serveraction wrappers serverquery use serverquery for fetching data method get default behavior returns data only does not rehydrate or re render the page location must be in a use server file we recommend queries ts queries ts use server import serverquery from rwsdk worker import isauthenticated from lib auth hypothetical auth utility simple query export const gettodos serverquery async userid string return db todo findmany where userid query with middleware e g auth check export const getsecretdata serverquery async check auth if isauthenticated throw new response unauthorized status 401 async return secret data serveraction use serveraction for mutations method post default behavior rehydrates and re renders the page with the updated server state location must be in a use server file we recommend actions ts actions ts use server import serveraction from rwsdk worker import isauthenticated from lib auth hypothetical auth utility export const createtodo serveraction async title string await db todo create data title action with middleware const requireauth async auth check if isauthenticated throw new response unauthorized status 401 export const deletetodo serveraction requireauth async id string await db todo delete where id you can also customize the http method export const searchtodos serveraction async query string method get how it works behind the scenes serverquery uses a specialized optimization of the rsc protocol to enable fast data only fetches without the overhead of a full page re render the x rsc data only header standard react server action calls typically expect the server to return the entire updated ui tree so the client can rehydrate the page for queries where you only need the returned data this is unnecessary overhead when you call a function wrapped in serverquery the client sends a special x rsc data only true header server side optimization the redwoodsdk server recognizes this header and skips the expensive process of rendering your page components instead it returns a minimal rsc payload node null tells react there is no ui change required actionresult contains the actual data returned by your function this allows redwoodsdk to resolve the function call result directly in your client component while keeping the current ui state perfectly intact avoiding any flickering or unnecessary hydration cycles context context is a way to share data globally between server components on a per request basis the context is populated by middleware and is available to all react server components pages and server functions via the ctx prop or requestinfo ctx returning responses server functions can return standard response objects which is particularly useful for performing redirects or setting custom headers after an action completes when a response is returned redwoodsdk automatically handles it redirects if the response has a 3xx status code and a location header the client will automatically redirect custom responses other response types are also supported and their metadata status headers is made available on the client src pages todos functions tsx use server export async function addtodo formdata formdata logic to add todo redirect to the todos list page after success return response redirect todos 303 intercepting action responses you can intercept action responses on the client by providing an onactionresponse callback to initclient this is useful if you want to handle redirects manually or perform side effects based on the response src entry client tsx import initclient from rwsdk client initclient onactionresponse response console log action returned status response status return true to prevent the default redirect behavior return true advanced usage manual rendering redwoodsdk also provides a way to render your react server components imperatively with rendertostream and rendertostring to render your component tree to a readablestream rendertostream and rendertostring rendertostream element options promise readablestream experimental takes in a react server component can be a client component or server component and returns a stream that decodes to html limitations rendertostream is designed for generating html streams it does not automatically handle the negotiation required for react server components features like server actions or client side transitions which require a different response format if you use rendertostream in a route handler interactivity like form submissions may fail for fully interactive routes please use the standard render function in defineapp which handles this negotiation automatically const stream await rendertostream notfound document const response new response stream status 404 options document the document component to wrap around the react server component element if not given will return the rendered react server component without any wrapping injectrscpayload false whether to inject the corresponding rsc payload for the react server component to use for client side hydration onerror a callback function called with the relevant error as the only paramter if any errors happen during rendering rendertostring element options promise string experimental takes in a react server component can be a client component or server component and returns an html string const html await rendertostring notfound document const response new response html status 404 options document the document component to wrap around the react server component element if not given will return the rendered react server component without any wrapping injectrscpayload false whether to inject the corresponding rsc payload for the react server component to use for client side hydration request handling routing previous page storage next page on this page fetching and displaying data server functions serverquery and serveraction serverquery serveraction how it works the x rsc data only header server side optimization context returning responses intercepting action responses advanced usage manual rendering rendertostream and rendertostring rendertostream element options promise readablestream experimental options rendertostring element options promise string experimental options