window.pipedriveLeadboosterConfig = { basis: 'leadbooster-chat.pipedrive.com', companyId: 11580370, playbookUuid: '22236db1-6d50-40c4-b48f-8b11262155be', versie: 2, } ;(functie () { var w = venster als (w.LeadBooster) { console.warn('LeadBooster bestaat al') } anders { w.LeadBooster = { q: [], on: functie (n, h) { this.q.push({ t: 'o', n: n, h: h }) }, trigger: functie (n) { this.q.push({ t: 't', n: n }) }, } } })() Strategieën voor het ophalen van gegevens in NextJS - The Codest
The Codest
  • Over ons
  • Diensten
    • Software Ontwikkeling
      • Frontend ontwikkeling
      • Backend ontwikkeling
    • Staff Augmentation
      • Frontend ontwikkelaars
      • Backend ontwikkelaars
      • Gegevensingenieurs
      • Cloud Ingenieurs
      • QA ingenieurs
      • Andere
    • Het advies
      • Audit & Consulting
  • Industrie
    • Fintech & Bankieren
    • E-commerce
    • Adtech
    • Gezondheidstechnologie
    • Productie
    • Logistiek
    • Automotive
    • IOT
  • Waarde voor
    • CEO
    • CTO
    • Leveringsmanager
  • Ons team
  • Case Studies
  • Weten hoe
    • Blog
    • Ontmoetingen
    • Webinars
    • Bronnen
Carrière Neem contact op
  • Over ons
  • Diensten
    • Software Ontwikkeling
      • Frontend ontwikkeling
      • Backend ontwikkeling
    • Staff Augmentation
      • Frontend ontwikkelaars
      • Backend ontwikkelaars
      • Gegevensingenieurs
      • Cloud Ingenieurs
      • QA ingenieurs
      • Andere
    • Het advies
      • Audit & Consulting
  • Waarde voor
    • CEO
    • CTO
    • Leveringsmanager
  • Ons team
  • Case Studies
  • Weten hoe
    • Blog
    • Ontmoetingen
    • Webinars
    • Bronnen
Carrière Neem contact op
Pijl terug KEREN TERUG
2021-04-09
Software Ontwikkeling

Strategieën voor het ophalen van gegevens in NextJS

The Codest

Pawel Rybczynski

Software Engineer

De laatste tijd wint NextJS steeds meer aan populariteit als een manier om React toepassingen te bouwen. Het feit dat NextJS verschillende strategieën voor het ophalen van gegevens biedt, draagt hier zeker aan bij.

En dat zijn:

  • Weergave aan de klantzijde: CSR,
  • Rendering aan serverzijde: SSR,
  • Statische site rendering: SSG,
  • Incrementele statische regeneratie: ISR.

NextJS biedt, in tegenstelling tot de gewone React app, een functie die pre-rendering heet. Dit betekent dat vooraf gerenderde HTML wordt weergegeven tijdens de eerste lading. In traditionele React applicaties wordt de hele app geladen en gerenderd aan de kant van de client. Vervolgens, nadat de JS code is geladen, wordt de toepassing interactief.

Statische generatie

In SSG wordt de HTML tijdens het bouwen gegenereerd en hergebruikt voor elke aanvraag. Nadat een productieversie is gemaakt, zal elk verzoek dat statisch gegenereerde HTML-bestand opnieuw gebruiken.

Er zijn ook twee soorten statische generatie: met en zonder gegevens.

In het eerste geval wordt de HTML gegenereerd na het ophalen van de gegevens door de belofte op te lossen. In dit geval kunnen we de methode voor het ophalen van gegevens getStaticProps gebruiken... maar alleen als je Next.js 9.3 of nieuwer gebruikt. Zo niet, denk er dan over na om te upgraden, want de oudere methode getInitialProps wordt niet langer aanbevolen en zal deprecated worden. Deze methode wordt ook bij elke client-side navigatie aangeroepen, dus het is niet efficiënt als je niet bij elk verzoek gegevens wilt ophalen.

export async functie getStaticProps() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts");
  const posts = await res.json();
  return {
    props: {posts },
  };
} 

Wat echt cool is, is een nieuw uitgebrachte functie genaamd ISR (Incremental Static Regeneration), die iets tussen SSG en SSR in zit. Hiermee kun je (met behulp van een specifieke sleutel genaamd revalidate) de pagina incrementeel regenereren. Dit betekent dat je met deze sleutel de app niet elke keer opnieuw hoeft te bouwen als je een update wilt van de gegevens die van de server zijn gehaald. Voeg gewoon de revalidate sleutel toe met de revalidatieperiode in seconden.

export async functie getStaticProps() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts");
  const posts = await res.json();
  return {
    props: {
      posts,
    },
    revalidate: 30,
  };
}

Dit betekent dat als er na die periode verzoeken komen, de gegevens opnieuw van de server worden gehaald.

Een andere situatie is wanneer je een dynamische pagina gebruikt en het pad afhankelijk is van externe gegevens. In dat geval kunnen we de methode getStaticPaths gebruiken om te vertellen welke dynamische routes vooraf geladen moeten worden:

export async const getStaticProps = ({params }) => {
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`);
  const post = await res.json();
  return {
    props: { post },
  };
}
export async functie getStaticPaths() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts");
  const posts = await res.json();
  const paths = posts.map(({ id }) => ({ params: { id: `${id}` } });
  return {
    paden,
    fallback: false,
  };
}

Er is een mooie manier om te controleren welke dynamische routes zijn gemaakt. Je kunt de volgende build en de volgende export uitvoeren en daarna heb je een statische versie van je app in de nieuw aangemaakte out directory.

Laten we nu de pre-build paden beperken:

export async functie getStaticPaths() {
  return {
    paden: [{params: { id: "1" } }, {params: { id: "2" } }
    fallback: false,
  };
}

Na het uitvoeren van de volgende export, zien we in beide gevallen (met en zonder een beperkt aantal paden) een verschillend aantal berichten gevonden in mijn-appoutposts.

volgende_uitvoer

Laten we nu eens kijken naar de cruciale en vereiste fallback parameter. Deze zegt wat er moet gebeuren als de pagina niet vooraf is gerenderd tijdens het bouwen. Als deze is ingesteld op true, wordt getStaticProps uitgevoerd en wordt die pagina gegenereerd. Als deze parameter false is, krijgen we 404 als we dat specifieke pad proberen te laden. Nog iets: pagina's met fallback die zijn ingeschakeld in getStaticPaths kunnen niet worden geëxporteerd.

Hieronder zie je de resultaten van het laden van dezelfde dynamische pagina in beide gevallen:

Eerste geval (zonder beperkte paden)

eerste

Tweede geval (met beperkte paden en fallback ingesteld op false)

tweede<em>terugval</em>valse

Tweede geval (met beperkte paden en fallback ingesteld op waar)

tweede<em>terugval</em>waar

Rendering op de server

Het belangrijkste verschil met SSG: er wordt bij elke aanvraag nieuwe HTML gegenereerd. Dit wordt vooral gebruikt als we externe gegevens ophalen. In dit geval is het niet nodig om de app elke keer opnieuw te bouwen als we de gegevens van de server willen bijwerken.

export async functie getServerSideProps() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts");
  const posts = await res.json();
  return {
    props: {
      posts,
    },
  };
}

De methode getServerSideProps lijkt erg op getStaticProps. Het verschil is dat getServerSideProps bij elke aanvraag wordt uitgevoerd, terwijl getStaticProps eenmalig in build-time wordt uitgevoerd.

Rendering aan de klantzijde

Met client-side rendering is het laden van de pagina in eerste instantie een beetje traag. De communicatie met de server gebeurt in de runtime. Je kunt het op een meer traditionele manier doen:

const Blog = () => {


 const [posts, setPosts] = useState([]);
  useEffect() => {
    const fetchData = async () => {
      const res = await fetch(
     "https://jsonplaceholder.typicode.com/posts");
      const posts = await res.json();
      setPosts(posts);
    };
    fetchData();
  }, []);

We kunnen ook een andere oplossing gebruiken, 'swr' - React Hooks library voor het ophalen van gegevens door Vercel*, die sterk wordt aanbevolen door de makers van NextJS. SWR staat voor State While Revalidate.

* Gegevensbron: SWR door Vercel

import useSWR uit "swr";


const Blog = () =&gt; {
 const fetcher = (url) =&gt; fetch(url).then((r) =&gt; r.json());
 const {data: berichten = [], fout } = useSWR(
    "https://jsonplaceholder.typicode.com/posts", fetcher);
 Als (fout) retourneer <div>Berichten niet geladen</div>;
 Als (!posts.length) terugkeren <div>laden...</div>;
 retour (
    <>
      {posts.map((post) =&gt; (
            {post.title}
        ))}
    </>
}

Samenvatting

NextJS geeft ons de extra mogelijkheid om te kiezen welke van de data fetching strategieën we willen gebruiken op elke pagina. We hoeven niet slechts één oplossing te volgen voor de hele applicatie.

Snelkoppeling

  • getServerSideProps - als je app moet pre-render bij elke aanvraag met opgehaalde gegevens
  • getStaticProps - als de gegevens één keer kunnen worden opgehaald tijdens het bouwen en bij elke aanvraag kunnen worden gebruikt zonder bij te werken
  • getInitialProps - niet aanbevolen, wordt afgeschreven
  • getStaticPaths - voor het vooraf renderen van dynamische paden
VolgendeJs voor- en nadelen
Advies over digitale productontwikkeling

Lees meer:

Rails API & CORS. Een vleugje bewustzijn

Waarom je (waarschijnlijk) Typescript zou moeten gebruiken?

De hoogste kwaliteit code in je SaaS-project. Waarom zou je daar als (niet-technische) oprichter om geven?

Verwante artikelen

Software Ontwikkeling

Bouw Toekomstbestendige Web Apps: Inzichten van The Codest's Expert Team

Ontdek hoe The Codest uitblinkt in het creëren van schaalbare, interactieve webapplicaties met geavanceerde technologieën, het leveren van naadloze gebruikerservaringen op alle platforms. Ontdek hoe onze expertise digitale transformatie en business...

DE BESTE
Software Ontwikkeling

Top 10 in Letland gevestigde bedrijven voor softwareontwikkeling

Lees meer over de beste softwareontwikkelingsbedrijven van Letland en hun innovatieve oplossingen in ons nieuwste artikel. Ontdek hoe deze technologieleiders uw bedrijf kunnen helpen verbeteren.

thecodest
Oplossingen voor ondernemingen en schaalvergroting

Essentiële Java-softwareontwikkeling: Een gids voor succesvol uitbesteden

Verken deze essentiële gids over succesvolle outsourcing Java-softwareontwikkeling om de efficiëntie te verbeteren, toegang te krijgen tot expertise en projectsucces te stimuleren met The Codest.

thecodest
Software Ontwikkeling

De ultieme gids voor outsourcing in Polen

De sterke groei van outsourcing in Polen wordt gedreven door economische, educatieve en technologische vooruitgang, die IT-groei en een bedrijfsvriendelijk klimaat stimuleert.

DeCodest
Oplossingen voor ondernemingen en schaalvergroting

De complete gids voor IT-auditmiddelen en -technieken

IT-audits zorgen voor veilige, efficiënte en compliant systemen. Lees het volledige artikel om meer te weten te komen over het belang ervan.

The Codest
Jakub Jakubowicz CTO & medeoprichter

Abonneer je op onze kennisbank en blijf op de hoogte van de expertise uit de IT-sector.

    Over ons

    The Codest - Internationaal softwareontwikkelingsbedrijf met technische hubs in Polen.

    Verenigd Koninkrijk - Hoofdkantoor

    • Kantoor 303B, 182-184 High Street North E6 2JA
      Londen, Engeland

    Polen - Lokale technologieknooppunten

    • Fabryczna kantorenpark, Aleja
      Pokoju 18, 31-564 Krakau
    • Hersenambassade, Konstruktorska
      11, 02-673 Warschau, Polen

      The Codest

    • Home
    • Over ons
    • Diensten
    • Case Studies
    • Weten hoe
    • Carrière
    • Woordenboek

      Diensten

    • Het advies
    • Software Ontwikkeling
    • Backend ontwikkeling
    • Frontend ontwikkeling
    • Staff Augmentation
    • Backend ontwikkelaars
    • Cloud Ingenieurs
    • Gegevensingenieurs
    • Andere
    • QA ingenieurs

      Bronnen

    • Feiten en fabels over samenwerken met een externe partner voor softwareontwikkeling
    • Van de VS naar Europa: Waarom Amerikaanse startups besluiten naar Europa te verhuizen
    • Tech Offshore Ontwikkelingshubs Vergelijking: Tech Offshore Europa (Polen), ASEAN (Filippijnen), Eurazië (Turkije)
    • Wat zijn de grootste uitdagingen voor CTO's en CIO's?
    • The Codest
    • The Codest
    • The Codest
    • Privacy policy
    • Gebruiksvoorwaarden website

    Copyright © 2025 door The Codest. Alle rechten voorbehouden.

    nl_NLDutch
    en_USEnglish de_DEGerman sv_SESwedish da_DKDanish nb_NONorwegian fiFinnish fr_FRFrench pl_PLPolish arArabic it_ITItalian jaJapanese ko_KRKorean es_ESSpanish etEstonian elGreek nl_NLDutch