• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

Object Storage Arubacloud
0 głosów
146 wizyt
pytanie zadane 12 kwietnia 2023 w JavaScript przez urogi7 Początkujący (340 p.)

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
  }
}

 

1 odpowiedź

+2 głosów
odpowiedź 12 kwietnia 2023 przez rafal.budzis Szeryf (85,260 p.)
wybrane 13 kwietnia 2023 przez urogi7
 
Najlepsza

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

Podobne pytania

0 głosów
2 odpowiedzi 543 wizyt
pytanie zadane 8 maja 2018 w JavaScript przez Xenoxer Użytkownik (560 p.)
0 głosów
0 odpowiedzi 161 wizyt
0 głosów
0 odpowiedzi 571 wizyt

92,674 zapytań

141,575 odpowiedzi

320,045 komentarzy

62,038 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...