API-gateway en reverse proxy (Nginx + Spring Cloud Gateway) · Les

HTTP/2 en Nginx-optimalisatie

Benut de functies van het HTTP/2-protocol met Nginx om laadtijden en efficiëntie van webapplicaties te verbeteren.

Les 2 van 411 stappen

HTTP/2 en Nginx-optimalisatie is een gratis API-gateway en reverse proxy (Nginx + Spring Cloud Gateway)-les op CoddyKit. Dit is les 2 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject API-gateway en reverse proxy (Nginx + Spring Cloud Gateway). Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus API-gateway en reverse proxy (Nginx + Spring Cloud Gateway) bevat in totaal 4 lessen.

Verbeter de prestaties met HTTP/2

Welkom! Vandaag bekijken we HTTP/2, de opvolger van HTTP/1.1, en hoe je dit met Nginx kunt benutten om de prestaties van je webtoepassing aanzienlijk te verbeteren.

HTTP/2 bevat veel optimalisaties die webgebruik sneller en efficiënter maken voor gebruikers.

Waarom upgraden? Beperkingen van HTTP/1.1

Laten we eerst begrijpen waarom HTTP/2 nodig was. HTTP/1.1 wordt veel gebruikt, maar heeft enkele knelpunten:

Blokkering aan het begin van de rij: Per verbinding kan slechts één aanvraag tegelijk worden verwerkt.
Meerdere verbindingen: Browsers openen veel verbindingen voor bronnen, wat extra overhead veroorzaakt.
Niet-efficiënte headers: Headers worden bij elke aanvraag ongecomprimeerd verzonden.

De kern van HTTP/2: de magie van multiplexing

Een van de belangrijkste functies van HTTP/2 is multiplexing. Hiermee kunnen meerdere aanvragen en antwoorden gelijktijdig via één enkele TCP-verbinding worden verzonden en ontvangen.

Stel je één snelweg met veel rijstroken voor, waarop auto's tegelijkertijd kunnen rijden, in plaats van een weg met één rijstrook waarop auto's op elkaar moeten wachten.

Kleinere headers met HPACK

HTTP/2 introduceert HPACK-compressie voor aanvraag- en antwoordheaders. In plaats van bij elke aanvraag volledige, herhaalde headers te verzenden, doet HPACK het volgende:

header-velden comprimeren;
een gedeelde indexeringstabel gebruiken voor eerder verzonden headers.

Hierdoor wordt de overhead sterk verminderd en verlopen overdrachten sneller, vooral bij veel kleine aanvragen.

Proactieve inhoud: server push

Een andere krachtige functie is server push. Met HTTP/1.1 vragen clients een HTML-pagina op, parseren ze die en vragen ze daarna de bijbehorende CSS, JavaScript en afbeeldingen op.

Met server push kan de server deze verwachte bronnen naar de client sturen voordat de client erom vraagt. Zo wordt de vertraging verminderd en laden pagina's sneller.

Compatibiliteit van Nginx en HTTP/2

Nginx biedt uitstekende, volwassen ondersteuning voor HTTP/2. Door de prestaties van Nginx te combineren met de efficiëntie van HTTP/2 kun je webinhoud sneller en betrouwbaarder aanbieden.

HTTP/2 inschakelen in Nginx is eenvoudig en sluit naadloos aan op bestaande configuraties.

HTTP/2 inschakelen in Nginx

Om HTTP/2 in Nginx in te schakelen voeg je eenvoudig de parameter http2 toe aan je listen-instructie binnen een server-blok. Houd er rekening mee dat HTTP/2 voor beveiliging en browsercompatibiliteit vrijwel altijd met SSL/TLS (HTTPS) wordt gebruikt.

Zo ziet dat eruit:

server {
  listen 443 ssl http2;
  # other directives...
}

Volledig HTTP/2 Nginx-voorbeeld

Laten we een vollediger Nginx-serverblok bekijken dat HTTP/2 samen met SSL/TLS inschakelt. Met deze configuratie kan je server met clients communiceren via het snellere HTTP/2-protocol.

server {
  listen 443 ssl http2;
  listen [::]:443 ssl http2;

  server_name example.com www.example.com;

  ssl_certificate /etc/nginx/ssl/example.com.crt;
  ssl_certificate_key /etc/nginx/ssl/example.com.key;

  root /var/www/html;
  index index.html index.htm;

  location / {
    try_files $uri $uri/ =404;
  }
}

Controleren of HTTP/2 actief is

Hoe weet je na het configureren van Nginx of HTTP/2 daadwerkelijk werkt? Je kunt dit eenvoudig controleren met de ontwikkelaarstools van je browser:

Open DevTools (F12) in Chrome, Firefox of Edge.
Ga naar het tabblad 'Network'.
Laad je pagina opnieuw.
Zoek naar een kolom 'Protocol'. Daar moet h2 staan voor HTTP/2-verbindingen.

Korte controle: voordelen van HTTP/2

Welke belangrijke voordelen en functies van HTTP/2 die de webprestaties verbeteren hebben we geleerd?

Beantwoord dit in de interactieve les

Samenvatting: prestaties verbeteren met HTTP/2

Goed gedaan! In deze les hebben we de kracht van HTTP/2 en de belangrijkste functies ervan verkend, zoals multiplexing, HPACK-headercompressie en server push. We hebben ook geleerd hoe je HTTP/2 eenvoudig inschakelt in Nginx om snellere en efficiëntere webervaringen te bieden.

Door te upgraden naar HTTP/2 zet je een grote stap in het optimaliseren van de laadtijden en algehele reactiesnelheid van je webtoepassing.

Gratis beginnen

Leer API-gateway en reverse proxy (Nginx + Spring Cloud Gateway) met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 12
Lessen: 48

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “HTTP/2 en Nginx-optimalisatie” gratis?

Ja — de volledige tekst van “HTTP/2 en Nginx-optimalisatie” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus API-gateway en reverse proxy (Nginx + Spring Cloud Gateway) wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus API-gateway en reverse proxy (Nginx + Spring Cloud Gateway) bevat in totaal 4 lessen.

Wat leer ik in “HTTP/2 en Nginx-optimalisatie”?

Benut de functies van het HTTP/2-protocol met Nginx om laadtijden en efficiëntie van webapplicaties te verbeteren. Je oefent met API-gateway en reverse proxy (Nginx + Spring Cloud Gateway) door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met API-gateway en reverse proxy (Nginx + Spring Cloud Gateway) te beginnen?

Ervaring vooraf is niet nodig. API-gateway en reverse proxy (Nginx + Spring Cloud Gateway) op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.

Hoe lang duurt de les “HTTP/2 en Nginx-optimalisatie”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over API-gateway en reverse proxy (Nginx + Spring Cloud Gateway)?

Ja. Elke les over API-gateway en reverse proxy (Nginx + Spring Cloud Gateway) bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar API-gateway en reverse proxy (Nginx + Spring Cloud Gateway)