Which is the best way to render dynamic items in NextJS? - next.js

Question

I´m am new to NextJS and i am finding difficult to understand the difference between getSaticProps and getServerSideProps.
I have a page with a form to add a new event and store it in a json file:
import React from 'react'
import Layout from '#/components/Layout'
import styles from '#/styles/AddEvent.module.css'
export default function AddEventPage() {
const submitHanlder = (e) => {
e.preventDefault();
const formData = {
title: e.target.title.value,
description: e.target.description.value
}
fetch('/api/events', {
method: 'POST',
body: JSON.stringify(formData)
});
console.log(formData)
}
return (
<Layout title='Add New Event'>
<h1>Add Event</h1>
<div className={styles.container}>
<form className={styles.form} action="" onSubmit={submitHanlder}>
<label className={styles.label} >Title</label>
<input type="text" name="title" />
<label className={styles.label} >Description</label>
<input type="text" name="description"/>
<label className={styles.label}htmlFor="">Date</label>
<input type="date" />
<button type='submit' >Submit</button>
</form>
</div>
</Layout>
)
}
This is my api:
const handler = async (req , res) => {
if(req.method === 'POST'){
await fetch('http://localhost:3001/events', {
headers: {
'Content-Type': 'application/json'
},
method: 'POST',
body: req.body
})
return res.status(201).json({ message: 'evento agregado' });
}
return res.status(400).json({ error: 'no se pudo agregar el evento' });
}
export default handler;
And i am storing my data in my db.json:
{
"events": [
{
"id": 1,
"title": "Recital coldplay",
"description": "Recital de coldplay en River"
},
{
"title": "Recital metalica",
"description": "Recital de metalica en velez",
"id": 2
}
]
}
Until now i am rendering my events as i used to do it in react.js by importing the {events} and doing a map function, and it works:
import React from 'react'
import Layout from '#/components/Layout'
import { events } from '../../db.json'
export default function EventsPage({ }) {
return (
<Layout>
<h1>My Events</h1>
<div>
{events.map((event) => {
return (
<div>
<h1>{event.title}</h1>
<p>{event.description}</p>
</div>)
})}
</div>
</Layout>
)
}
This works perfectly fine but i know nextjs provides different methods to make this easier? Which method should i use to optimize my code? Can anyone give an example? Is there any step of my code i could avoid?

Answer 1

getServerSideProps is essentially SSR for the page which executes per request.
getStaticProps is static site generation at build time (plus on a timed interval).
You could use either mechanism to read from your json file server side and pass the content in as props.