时间戳

首页 > 解决方案 > 我可以使用 getServerSideProps 中的服务器端道具来初始化 NextJS 中的动态状态吗？

javascript - 我可以使用 getServerSideProps 中的服务器端道具来初始化 NextJS 中的动态状态吗？

问题描述

我目前正在使用 NextJS 创建一个简单的应用程序，我想知道使用来自 API 的数据处理 SSR 的最佳方法是什么，该数据在页面上也是动态的。我目前的方法概述如下，我很好奇这是否应该在 NextJS 中完成。

getServerSideProps我使用我的页面组件内部从免费的 JSON 占位符 API 中检索一组待办事项，Home如下所示（请注意，我使用的是 TypeScript）：

export const getServerSideProps: GetServerSideProps = async () => {
  const todoAPIResponse = await fetch('https://jsonplaceholder.typicode.com/todos?_limit=10');
  const todos = await todoAPIResponse.json();

  return {
    props: {
      todos,
    },
  };
};

Home组件定义为：

const Home: NextPage = ({ todos }: HomeProps) => {

  const [todoState, setTodoState] = useState(todos);
  const [newTodo, setNewTodo] = useState('');

  const onSubmit = (event: any) => {
    event.preventDefault();
    setTodoState((prev: any) => [...prev, { title: newTodo }]);
    setNewTodo('');
  };

  return (
    <div className={styles.container}>
      {todoState.map((todo: any) => <p key={todo.id}>{todo.title}</p>)}
      <form onSubmit={onSubmit}>
        <input value={newTodo} onChange={(event) => setNewTodo(event.target.value)} />
      </form>
    </div>
  );
};

正如您在Home组件内部看到的那样，我正在todoState使用 props（从 API 检索的数据）进行初始化，然后数据变得动态，能够使用表单创建新的 todos。在典型的“反应方式”中，我知道 todos 将被初始化为一个空数组，然后在 a 内部，useEffect可以调用 API，然后可以从那里设置状态，但是，我试图了解什么在 NextJS 中执行此操作的正确方法是我对框架和 SSR 概念不熟悉。

标签： javascriptreactjsnext.jsserver-side-rendering

解决方案

我相信你做对了。

ssr 和 react 的做法不同。fetch在 ssr 版本中，您首先需要一个服务器，以便在组装 HTML 页面并将其发送回UI之前，对该页面的每次调用都会完成此操作。之后，NextJS将通过附加所有其他动态属性来对该页面进行水合，使其像一个常规的React页面。

推荐阅读