我是NextJS的新手，我发现很难理解getSaticProps和getServerSideProps之间的区别。
我有一个页面，其中包含一个表单，用于添加新事件并将其存储在json文件中：

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

这是我的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;

我把我的数据存储在我的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
    }
  ]
}

到目前为止，我通过导入{events}并执行map函数来渲染我的事件，就像我以前在react.js中做的那样，它工作正常：

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

这个方法非常好用，但是我知道nextjs提供了不同的方法来简化这个过程？我应该用哪个方法来优化我的代码？有人能给予个例子吗？我的代码中有没有可以避免的步骤？