Если useState не поддерживается компонентами сервера React, как мы назначаем состояние компонента для рендеринга

Question

Я пытаюсь понять компоненты сервера React и то, как визуализировать состояние компонента без использования useState и useEffect. Я создал серверный компонент со встроенным клиентским компонентом, и оба извлекают небольшой объем данных и отображают их в формате JSON.

Клиентский компонент работает должным образом и отображает данные json, полученные из API.

основной.клиент.tsx

      import { useEffect, useState } from "react"

export default function Main() {
    let [data, setData] = useState(undefined);

    async function fetchData() {
        let value = await fetch("https://jsonplaceholder.typicode.com/posts");
        let result = await value.json();
        let slice = result.slice(0,2);
        return slice;
    }

    useEffect(()=>{
        fetchData().then(value => {
            setData(value);
            console.log("data", data)
        });
    }, [])

    return (<div className="component">
        <h1>Client Main</h1>
        {data &&
            <div>
                <pre>
                    {JSON.stringify(data, null, 2)}
                </pre>
            </div>
        }
    </div>)
}

Компонент сервера не выполняет повторную визуализацию данных json. По сути, это дубликат клиентского кода без useEffect, useRef и useState, потому что они недоступны на сервере.

Он отображает инициализированные данные, но не полученные данные.

основной.сервер.tsx

      import Client from "../components/main.client"

export default function Main() {
    let data = {key: "initial value"};
    let hello = "hello world";
    
    async function fetchData() {
        let value = await fetch("https://jsonplaceholder.typicode.com/posts");
        let result = await value.json();
        let slice = result.slice(0,2);
        return slice;
    }

    fetchData().then(value => {
        data = [...value];
        console.log("data", data)
    });

    return (<div className="component">
        <h1>Server Main</h1>
        {hello}
        {data &&
            <div>
                <pre>
                    {JSON.stringify(data, null, 2)}
                </pre>
            </div>
        }
        <Client/>
    </div>)
}

как я могу правильно назначить массив данных (возвращенный из выборки), чтобы он отображался на сервере?

Answer 1

Если вы используете Next.JS, вероятно, вам нужно использовать «использовать клиент»; перед любым импортом, чтобы решить эту проблему. См. этот пример:

      "use client";
import { useState } from "react";
import Image from "next/image";
import { Inter } from "@next/font/google";

Надеюсь, это поможет вам.