• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

172
Views
¿Puedo usar accesorios del lado del servidor de getServerSideProps para inicializar el estado dinámico en NextJS?

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.

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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.

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error