• 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]

VPS Starter Arubacloud
0 głosów
137 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 532 wizyt
pytanie zadane 8 maja 2018 w JavaScript przez Xenoxer Użytkownik (560 p.)
0 głosów
0 odpowiedzi 150 wizyt
0 głosów
0 odpowiedzi 481 wizyt

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 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

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

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!

...