reactjs - When to use the 'use server' directive - Stack Overflow

admin管理员组

文章数量:1279145

The example in /reference/rsc/server-components#async-components-with-server-components shows the following snippet:

// Server Component
import db from './database';

async function Page({id}) {
  // Will suspend the Server Component.
  const note = await db.notes.get(id);
  
  // NOTE: not awaited, will start here and await on the client. 

  //****NO 'use server' USED HERE!****

  const commentsPromise = dbments.get(note.id);
  return (
    <div>
      {note}
      <Suspense fallback={<p>Loading Comments...</p>}>
        <Comments commentsPromise={commentsPromise} />
      </Suspense>
    </div>
  );
}

// Client Component
"use client";
import {use} from 'react';

function Comments({commentsPromise}) {
  // NOTE: this will resume the promise from the server.
  // It will suspend until the data is available.
  const comments = use(commentsPromise);
  return comments.map(commment => <p>{comment}</p>);
}

There is no 'use server' above the call to dbments.get(note.id) in the server component.

However on /reference/rsc/server-functions, it shows this snippet:

// Server Component
import Button from './Button';

function EmptyNote () {
  async function createNoteAction() {
    // Server Function
    'use server';
    
    await db.notes.create();
  }

  return <Button onClick={createNoteAction}/>;
}

"use client";

export default function Button({onClick}) { 
  console.log(onClick); 
  // {$$typeof: Symbol.for("react.server.reference"), $$id: 'createNoteAction'}
  return <button onClick={() => onClick()}>Create Empty Note</button>
}

Why is 'use server' used in the last snippet but not the first snippet?

本文标签： reactjsWhen to use the 39use server39 directiveStack Overflow