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.
Creo que lo estás haciendo bien.
El enfoque entre ssr y react es diferente. En la versión ssr, primero necesita un servidor, de modo que cada llamada a esta página haga esta fetch
antes de que se ensamble una página HTML y se envíe de regreso a la interfaz de usuario. Y luego, NextJS hidratará esta página para que sea como una página React normal al adjuntar todos los demás atributos dinámicos.