next.js a przejmowanie danych z api [działający kod/ prośba o ew. porady / code review]

Question

Cześć wszystkim, napisałem bardzo prostą przykładową aplikacje w next.js, która przyjmuje z api zdjęcie losowego psa i wyświetla, oraz posiada przycisk "Randomize" który to zdjęcie zmienia.

Chcę aby pierwszy request był generowany po stronie servera (getServerSideProps) a każdy kolejny bez odświeżania strony. tak aby po naciśnięciu przycisku Randomize pobierały się dane i odświeżały komponent (w tym przypadku <img>) do którego trafią.

Czy taka taktyka jest poprawna i tok myślenia? Pierwsza strona jest generowana z użyciem propsow od servera (i każda kolejna o ile ktoś zmieni stronę) natomiast przy interakcji z wczytaną stroną i komponentami jeśli zajdzie potrzeba uzupelnienia danych na stronie jest tworzony request do api który uzupelnia komponenty po interakcji.

Tutaj krótki kod działającej aplikacji, nie wiem czy przypadkiem next.js nie ma lepszych możliwosci na takie sytuacje i czy robię wszystko poprawnie.

import { useState } from 'react'


export default function Home({randomDogImage}) {

  const [zwierze,setZwierze] = useState(randomDogImage.message)

  const randomizeHandler = ()=>{

    fetch('https://dog.ceo/api/breeds/image/random').then(result => {

     result.json().then(res =>{
        setZwierze(res.message)
     })

    });

  }

  return (
    <>
     <img src = {zwierze}></img>
     <br/>
     <button onClick={randomizeHandler}> Randomize </button>
    </>
  )
}


export async function getServerSideProps() {

  const res = await fetch(`https://dog.ceo/api/breeds/image/random`)
  const data = await res.json()


  return {
    props: {
      randomDogImage:data
    }, // will be passed to the page component as props
  }
}

 

Answer 1

Jest spoko jednak zrobił bym jedną funkcje do pobierania danych aby nie łamać DRY ;)

Druga rzecz to zamiast getServerSideProps możesz użyć getStaticProps + revalidate. Dzięki temu cały HTML zostanie wrzucony do cache i pierwsze wczytanie strony będzie błyskawiczne. Jednak jest jeden minus. Każdy user zobaczy to samo zdjęcie jako pierwsze.

Jeśli chcesz się przygotować do większych projektów warto zobaczyć jak działa react-query które działa z SSR i Next.js