Prefetch

API pubblica del Cinema

Vogliamo interfacciarci all'API pubblica del sito del Cinema don Bosco.

Endpoint che restituisce la lista di tutti i film in programmazione:
https://cinema.donboscosandona.it/movie/featured.json

Endpoint che restituisce i dati completi del singolo film:
https://cinema.donboscosandona.it/movie/show/316.json
(nell'esempio passiamo l'id del film 316).


Lettura dei dati da React

Nella nostra pagina andiamo a leggere (fetch) i dati (data) e li passiamo al componente Page nella fase di build, usando getStaticProps come abbiamo già fatto in precedenza per i post del blog.

Nella pagina compare il componente Movies, che riceverà i dati (data) e disegnerà una griglia di card:

Ogni card è disegnata usando questo componente MovieCard, che riceve i dati del singolo film:


Il risultato sarà: