Actualmente estoy creando una aplicación simple usando NextJS y me pregunto cuál es la mejor manera de manejar SSR usando datos de una API que también será dinámica en la página. Mi enfoque actual se describe a continuación, y tengo curiosidad por saber si es así como se debe hacer en NextJS.

Recupero un conjunto de todos de la API de marcador de posición JSON gratuita usando getServerSideProps dentro del componente de mi página de Home de la siguiente manera (tenga en cuenta que estoy usando 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, }, }; };

El componente Home se define como:

 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> ); };

Como puede ver dentro del componente Home , estoy inicializando todoState usando los accesorios (los datos recuperados de la API), y luego los datos se vuelven dinámicos con la capacidad de crear nuevos todos con el formulario. En la típica "manera de reaccionar", entiendo que todos se inicializarían como una matriz vacía, luego dentro de un useEffect , se podría llamar a la API y luego se podría establecer el estado desde allí, sin embargo, estoy tratando de entender cuál es la forma correcta de hacer esto en NextJS, ya que soy nuevo en el marco y el concepto de SSR.