Estoy creando una aplicación de redes sociales usando Next.js + Sanity.
En una aplicación de redes sociales, los datos cambian constantemente a medida que los usuarios agregan comentarios, me gusta, etc., por lo que tendría sentido usar getServerSideProps para SSR, ya que los datos que se muestran deben actualizarse en cada solicitud, ¿no?
Pero, ¿cómo puedo manejar las rutas dinámicas para, digamos, la página de perfil de un usuario, una publicación, etc.? Los documentos explican que para las rutas dinámicas debo usar getStaticPaths y getStaticProps pero eso no garantiza que los datos del perfil o publicación de un usuario se actualicen, ya que se generan de forma estática.
¿Cuál es la forma correcta de resolver esto?
Puede manejar rutas dinámicas agregando corchetes al archivo dentro de la carpeta de páginas.
por ejemplo, tiene una URL de localhost: 3000/ivanatias (ivanatias es su nombre de perfil)
en el directorio de páginas
pages/ [userProfileId].jsPuede leer más sobre el enrutamiento dinámico
ahora context.params.userProfileId obtendrá los parámetros en su URL, que serían ivanatias
ahora puede realizar una consulta de búsqueda en la base de datos dentro de getServerSideProps y obtener los datos con userProfileId
export async function getServerSideProps(context) { const userProfileId = context.params.userProfileId const fakeFetch = await fetch(`someurl.com/profile/${userProfileId}`); const data = await fakeFetch.json(); return { props: { data: data } } }ahora puede usar los datos en su componente
por ejemplo
export default function profile({ data }) { return (<h2>{data.name}</h2>) }ahora con respecto a su pregunta si va a usar getStaticProps o getServerSideProps. depende de usted si cree que los datos no cambian con mucha frecuencia, entonces probablemente pueda usar ISG (regeneración estática incremental)
El uso getServerSideProps le da acceso al parámetro de contexto de esa función que tendrá una propiedad params que contiene su ruta dinámica. Entonces, por ejemplo, si desea tener un perfil de usuario en /user/{handle} , puede crear la siguiente estructura de directorios:
pages/ user/ [handle].js Luego, en su archivo [handle].js (sí, el nombre del archivo tiene corchetes), haría algo como esto:
export default function UserHandlePage({ handle }) { return (<p>Handle: ${handle}</p>) } export async function getServerSideProps(context) { const userHandle = context.params.handle return { props: { handle: userHandle } } } No necesita enumerar las rutas; cualquier visita a /user/... se ejecutará a través de esa función. Consulte también la documentación de Next Dynamic Routes para ver cómo manejar las rutas catch-all y otros parámetros.