在NextJS中能否用getServerSideProps返回的服务端props初始化动态状态？

你的实现完全符合Next.js Pages Router下SSR场景的标准开发规范，是该场景下的最优写法，比客户端useEffect拉取数据的方案更合理。

写法合理性说明 #

• getServerSideProps是Next.js官方提供的专门用于服务端渲染场景的数据获取API，你通过它在服务端提前拉取待办数据、注入到组件props的逻辑完全符合官方规范，服务端渲染返回的HTML会直接携带初始待办列表内容，首屏加载速度更快，也更利于SEO。
• 用props直接初始化state的逻辑也没有问题，不需要额外在客户端用useEffect二次拉取数据，纯React项目里的useEffect拉取逻辑是CSR场景下的实现方式，放到SSR场景下反而会导致首屏先出现空列表、等客户端JS加载完成才渲染数据的问题，浪费了SSR的能力。

可优化的细节（针对TypeScript规范） #

你可以补充类型定义，替换代码中的any类型，提升类型安全性：

// 定义Todo数据类型
interface Todo {
  id: number;
  title: string;
  completed: boolean;
  userId: number;
}

// 定义页面props类型
interface HomeProps {
  todos: Todo[]
}

另外你当前新增待办的逻辑没有生成唯一id，可能会触发React列表key重复的警告，可以调整新增逻辑：

setTodoState((prev: Todo[]) => [...prev, { 
  id: Date.now(), 
  title: newTodo,
  completed: false,
  userId: 1
}])

如果需要持久化新增的待办数据，你可以在onSubmit回调中补充服务端接口调用逻辑，否则刷新页面后新增的待办会丢失。
如果后续你升级到Next.js 13+的App Router，SSR数据获取的写法会切换为服务端组件直接异步拉取数据，但你当前基于Pages Router的写法是完全符合规范的。

内容的提问来源于stack exchange，提问作者Shadee Merhi