我可以在NextJS中使用getServerSideProps的服务器端道具来初始化动态吗？
提问于 2021-10-09 15:21:11
我目前正在使用NextJS创建一个简单的应用程序，我想知道使用页面上也是动态的应用程序接口中的数据来处理SSR的最佳方法是什么。我目前的方法概述如下，我很好奇在NextJS中是否应该这样做。
我在Home页面组件中使用getServerSideProps从免费的JSON占位符API中检索了一组待办事项，如下所示(请注意，我使用的是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组件内部看到的那样，我使用props (从API检索到的数据)初始化todoState，然后数据变得动态，能够使用表单创建新的todo。在典型的"React方式“中，我知道todo将被初始化为一个空数组，然后在useEffect内部，API可以被调用，然后可以从那里设置状态。然而，我试图理解在NextJS中做这件事的正确方式是什么，因为我对框架和SSR的概念都是新手。
回答 1
Stack Overflow用户
发布于 2021-10-09 16:50:30
我相信你这样做是对的。
ssr和react之间的方法是不同的。在ssr版本中，您首先需要一个服务器，以便在组装HTML页面并将其发送回UI之前，对此页面的每次调用都会生成此fetch。然后，通过附加所有其他动态属性，NextJS将对此页面进行水化处理，使其类似于常规的React页面。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69511192
复制
腾讯云开发者
