Tengo el próximo proyecto js con algunos datos estáticos fuera de línea (como el contenido de la página)
¿Debo usar getStaticProps en mi proyecto?
los datos se almacenan en una matriz para un mapa posterior
Por ejemplo
import { data } from '../data/homepage/content'; const Home: NextPage = () => { return ( <> <Carousel /> {data.map((data, index) => ( <TwoColumnsBlueWhite title={data.title} subTitle={data.subTitle} content={data.content} links={data.links} imageSide={data.imageSide} /> ))} </> ); };Si no espero en el futuro obtener algunos datos de la base de datos. ¿Debo usar getStaticProps para un SEO? O es solo para obtener datos de la base de datos.
import { data } from '../../../data/homepage/content'; import type { NextApiRequest, NextApiResponse } from 'next'; const handler = (req: NextApiRequest, res: NextApiResponse) => { // The cookie middleware will add the `set-cookie` header res.status(200).json(data); }; export default handler; export async function getStaticProps() { const res = await fetch('http://localhost:3000/api/homepage/content'); const posts = await res.json(); return { props: { posts, }, }; } export default Home;```Sí.
Esa será una idea brillante, ya que se recuperará una vez durante el tiempo de compilación y la API nunca se volverá a activar cuando los clientes soliciten la página.
Además, dado que esta página es estática, se puede almacenar en caché de manera efectiva.
Lo que le recomendaré que haga es agregar una revalidación para manejar futuras actualizaciones del contenido de la página de inicio sin reconstruir la página.
export async function getStaticProps() { const res = await fetch('http://localhost:3000/api/homepage/content'); const posts = await res.json(); return { props: { posts, }, revalidate: 10, // In seconds }; } export default Home; Alternativamente, si el contenido de la API es dinámico, le sugiero que use getServerSideProps en su lugar.
getStaticProps es mejor si tiene datos predefinidos porque hará que su aplicación sea más rápida porque
Si exporta una función llamada getStaticProps (Generación de sitios estáticos) desde una página, Next.js renderizará previamente esta página en el momento de la compilación utilizando los accesorios devueltos por getStaticProps
getStaticProps siempre se ejecuta durante la próxima compilación
Demonios, sí, debe usar getStaticProps si sus datos están fuera de línea o estáticos. hay muchas maneras de hacerlo, como mencionaste, tus datos están en el archivo js . En este caso, en su mayoría prefiero crear una función para obtener esos datos, como getData o algo así.
// .../src/lib/fetchData.js import { data } from '../data/homepage/content'; export function getData() { return data; }Y en su página de inicio haga lo siguiente:
import { getData } from "../lib/fetchData"; // getting data as pageProps export default function Homepage({ data }) { return ( <> <Carousel /> {data.map((data, index) => ( <TwoColumnsBlueWhite title={data.title} subTitle={data.subTitle} content={data.content} links={data.links} imageSide={data.imageSide} /> ))} </> ); }; export async function getStaticProps() { const data = getData(); return { props: { data, }, }; }Si sus datos cambian con el tiempo, use next.js para revalidar, es una excelente opción para eso.