innei

</Tab>
<Tab label="page.tsx">
```tsx filename="app/server-action/page.tsx"
'use client'

import { useState } from 'react'
import type { ReactNode } from 'react'

import { actionRevalidate } from './action'

export default () => {
  return (
    <div className="flex flex-col gap-4">
      <ServerActionRevalidate />
    </div>
  )
}

const ServerActionRevalidate = () => {
  return (
    <form
      action={async (e) => {
        await actionRevalidate()
      }}
    >
      <button type="submit">このページのレイアウトを再検証</button>
    </form>
  )
}

</Tab>
</Tabs>

![](https://nextjs-book.innei.in/images/4.gif)

ボタンをクリックすると、ページが再レンダリングされ、ページがリロードされることなく最新のサーバー時間が更新されました。

## サーバーアクションを使用してストリーミング UI を取得

少し考えてみましょう。サーバーアクションが ReactNode 型を返したらどうなるでしょう。

<Tabs>
<Tab label="page.tsx">
```tsx filename="app/server-action/page.tsx" {21}
'use client'

import { useState } from 'react'
import type { ReactNode } from 'react'

import { actionReturnReactNode } from './action'

export default () => {
  return (
    <div className="flex flex-col gap-4">
      <ServerActionRenderReactNode />
    </div>
  )
}

const ServerActionRenderReactNode = () => {
  const [node, setNode] = useState<ReactNode | null>(null)
  return (
    <form
      action={async (e) => {
        const node = await actionReturnReactNode()
        setNode(node)
      }}
    >
      <button type="submit">サーバーアクションから ReactNode をレンダリング</button>
    </form>
  )
}

</Tab>
</Tabs>

![](https://nextjs-book.innei.in/images/5.gif)

ボタンをクリックすると、ページが React ノードをレンダリングしました。この React ノードはサーバーアクションから返されたものです。

私たちは、App Router でサーバーコンポーネントを使用できることを知っています。サーバーコンポーネントは、非同期をサポートする無状態コンポーネントです。非同期コンポーネントの戻り値は実際には `Promise<ReactNode>` であり、`ReactNode` はシリアライズ可能なオブジェクトです。

では、Suspense + 非同期コンポーネントを利用すると、どのような結果になるでしょうか。

<Tabs>
<Tab label="action.tsx">
  ```tsx filename="app/server-action/action.tsx" {3,7}
  export const actionReturnReactNodeSuspense = async () => {
    const Row = async () => {
      await sleep(300)
      return <div>React ノード</div>
    }
    return (
      <Suspense fallback={<div>読み込み中</div>}>
        <Row />
      </Suspense>
    )
  }
  ```
</Tab>

<Tab label="page.tsx">
```tsx filename="app/server-action/page.tsx"
'use client'

import { useState } from 'react'
import type { ReactNode } from 'react'

import { actionReturnReactNodeSuspense } from './action'

export default () => {
  return (
    <div className="flex flex-col gap-4">
      <ServerActionRenderReactNode />
    </div>
  )
}

const ServerActionRenderReactNode = () => {
  const [node, setNode] = useState<ReactNode | null>(null)
  return (
    <form
      action={async (e) => {
        const node = await actionReturnReactNodeSuspense()
        setNode(node)
      }}
    >
      <button type="submit">サーバーアクションから ReactNode をレンダリング</button>
    </form>
  )
}

export const actionReturnReactNodeSuspenseStream = async () => {
  const createStreamableRow = () => {
    const { promise, reject, resolve } = createResolvablePromise()
    const Row = (async ({ next }: { next: Promise<any> }) => {
      const promise = await next
      if (promise.done) {
        return promise.value
      }

      return (
        <Suspense fallback={promise.value}>
          <Row next={promise.next} />
        </Suspense>
      )
    }) /* 私たちの React タイピングは非同期コンポーネントをサポートしていません */ as unknown as React.FC<{
      next: Promise<any>
    }>

    return {
      row: <Row next={promise} />,
      reject,
      resolve,
    }
  }

  let { reject, resolve, row } = createStreamableRow()

  const update = (nextReactNode: ReactNode) => {
    const resolvable = createResolvablePromise()
    resolve({ value: nextReactNode, done: false, next: resolvable.promise })
    resolve = resolvable.resolve
    reject = resolvable.reject
  }

  const done = (finalNode: ReactNode) => {
    resolve({ value: finalNode, done: true, next: Promise.resolve() })
  }

  ;(async () => {
    for (let i = 0; i < typewriterText.length; i++) {
      await sleep(10)
      update(<div>{typewriterText.slice(0, i)}</div>)
    }
    done(
      <div>
        {typewriterText}

        <p>タイピング完了。</p>
      </div>,
    )
  })()

  return <Suspense fallback={<div>読み込み中</div>}>{row}</Suspense>
}