Si están usando Next.js 9.3 o que sea más nuevo. En su documentación de getInitialProps() recomiendan usar getServerSideProps() o getStaticProps().
La principal diferencia entre ambas funciones es que getServerSideProps()
se llama en cada carga de página, mientras que getStaticProps()
solo es llamada al momento de hacer build. Con esto anterior ya claro, sabemos que debemos usar getServerSideProps()
para hacer lo que el profesor hizo esta clase.
Mi codigo usando getServerSideProps()
quedo de esta forma:
import 'isomorphic-fetch';
function App({ channels }) {
return (
<>
<header>Podcasts</header>
<div className="channels">
{channels.map(channel => (
<div className="channel">
<img src={channel.urls.logo_image.original} alt="" />
<h2>{channel.title}</h2>
</div>
))}
</div>
<style jsx>{`
header {
color: #fff;
background: #8756ca;
padding: 15px;
text-align: center;
}
.channels {
display: grid;
grid-gap: 15px;
padding: 15px;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.channel {
display: block;
border-radius: 3px;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15);
margin-bottom: 0.5em;
}
.channel img {
width: 100%;
}
.channel h2 {
padding: 5px;
font-size: 0.9em;
font-weight: 600;
margin: 0;
text-align: center;
}
`}</style>
<style jsx global>{`
body {
margin: 0;
background: white;
font-family: system-ui;
}
`}</style>
</>
);
}
export async function getServerSideProps() {
let req = await fetch('https://api.audioboom.com/channels/recommended');
let { body: channels } = await req.json();
return { props: { channels: channels } };
}
export default App;
Si tienen alguna duda sobre el codigo me pueden preguntar o ir a la documentación de Next.js.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?