我是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提供了不同的方法来简化这个过程?我应该用哪个方法来优化我的代码?有人能给予个例子吗?我的代码中有没有可以避免的步骤?
1条答案
按热度按时间b5buobof1#
getServerSideProps本质上是针对每个请求执行的页面的SSR。
getStaticProps是在构建时生成的静态站点(加上一个时间间隔)。
您可以使用任何一种机制从JSON文件服务器端进行读取,并将内容作为 prop 传递进来。