Bedste nyheder API til React-applikationer i 2026 (RSC, TanStack Query, SWR og SSE)

Vælg den forkerte nyheds-API til din React-app, og du får de samme fejl: CORS-fejl i produktion, en API-nøgle sendt til main.js, en Next.js-build, der crasher, fordi leverandøren SDK importerer fs, eller en useEffect + fetch, der genudløses ved hver rendering. Nyheds-API-spørgsmålet i 2026 er ikke "hvilken leverandør?" — det er "hvilken leverandør fungerer med den måde, React rent faktisk renderer på i dag."

Ansvarsfraskrivelse. dette indlæg er på APITube bloggen. APITube er en af de API'er, der er angivet nedenfor. Hvert React-uddrag kører som skrevet.

TL;DR — den bedste nyheds-API til React i 2026

Den bedste nyheds API til React i 2026 er APITube, NewsData.io eller Perigon, fordi hver af dem bruger header-baseret auth (X-API-Key), returnerer ren JSON og virker identisk i en Next.js 15 Server Component, en Route Handler eller en client-side useQuery. NewsAPI.org diskvalificerer sig selv for rigtige React apps ved at blokere ikke-localhost browser-oprindelser og bruge ?apiKey= query-string auth.

Resten af denne artikel: hvorfor du aldrig må placere en nyheds-API-nøgle i en React-komponent, tre kanoniske React-mønstre (RSC, SWR, TanStack Query), useInfiniteQuery til paginerede nyheder, en live-nyheds-SSE hook, og produktions-UX (Suspense + error boundary + skeleton).

Denne artikel er til dig, hvis

Du er en React udvikler, der leverer til produktion — CRA, Vite SPA, Next.js App Router eller Remix. Du ønsker mønstre, der ikke lækker nøgler, ikke genindlæser konstant og ikke går i stykker, når du paginerer eller streamer.

Indholdsfortegnelse

• Læg aldrig din API-nøgle i en React-komponent
• De 6 nyheds-API'er rangeret for React
• Mønster 1: Next.js 15 App Router + async RSC
• Mønster 2: useSWR til et klient-side feed
• Mønster 3: TanStack Query + useInfiniteQuery til pagineret nyheder
• Live nyheder med SSE i en klientkomponent
• Produktions UX — Suspense, skelet, fejlgrænse
• useSWR vs TanStack Query til nyhedsfeeds
• Hvad der ændrer sig for React i 2026-2027
• FAQ
• Dom

Placer aldrig din API-nøgle i en React-komponent

De fleste "Nyheder API i React"-tutorials starter sådan her:

// ❌ DON'T: key ships to browser, visible in DevTools → Network → main.js
function NewsFeed() {
  useEffect(() => {
    fetch(`https://api.example.com/news?apiKey=${process.env.NEXT_PUBLIC_NEWS_KEY}`)
      .then((r) => r.json()).then(setArticles);
  }, []);
}

Alt, der starter med NEXT_PUBLIC_* (Next.js) eller REACT_APP_* (Opret React App), er indlejret i klientbundtet ved build-tidspunktet. Åbn DevTools på enhver side, der bruger den komponent, og nøglen er et par scroll-ticks væk i en JS-fil. De fleste udbydere vil rotere eller suspendere en nøgle i det øjeblik, den vises i en offentlig GitHub-søgning.

Løsningen er ikke et bibliotek – det er arkitektur. Placer nøglen kun i server-side kode, eksponer derefter en tynd proxy:

// ✅ DO: app/api/news/route.ts (Next.js 15 Route Handler)
export const runtime = "nodejs"; // or "edge"
export async function GET(req: Request) {
  const { searchParams } = new URL(req.url);
  const q = searchParams.get("q") ?? "news";
  const res = await fetch(
    `https://api.apitube.io/v1/news/everything?title=${encodeURIComponent(q)}&per_page=20`,
    { headers: { "X-API-Key": process.env.APITUBE_KEY! } } // server-only env var
  );
  const data = await res.json();
  return Response.json(data.results);
}

Klientkode rammer nu /api/news?q=openai — nøgle forbliver på serveren. Samme mønster i Remix (loader/action), SvelteKit, Astro serverruter eller en lille Express/Hono-proxy til en ren SPA.

NewsAPI.org er et specielt tilfælde: dets CORS-politik blokerer aktivt ikke-localhost-oprindelser på Udvikler-planen, hvilket betyder, at selv hvis du ville kalde den fra en React-komponent, ville den ikke fungere i produktion. En proxy er den eneste mulighed. Alle andre store leverandører kan proxys, som standard; NewsAPI.org kræver det til browserkode.

Se vores NewsAPI.org migrationsnoter for hele historien.

De 6 nyheds-API'er rangeret for React

Samme skabelon pr. leverandør: anbefalet mønster, minimalt eksempel, én særhed.

1. APITube

Anbefalet mønster: Next.js 15 RSC eller Route Handler. Native fetch, X-API-Key header. Understøtter SSE streaming til live feeds.

// RSC
const res = await fetch(
  "https://api.apitube.io/v1/news/everything?title=openai&language.code=en",
  { headers: { "X-API-Key": process.env.APITUBE_KEY! }, next: { revalidate: 60 } }
);

Særhed: ingen officiel React SDK — det er en funktion. Svaret inkluderer sentiment, entities, summary. Fungerer identisk i Server Components, Route Handlers og (via proxy) client hooks.

2. NewsData.io

Anbefalet mønster: Route Handler proxy + TanStack Query. Header-godkendelse understøttes.

const res = await fetch(
  "https://newsdata.io/api/1/latest?q=openai&language=en",
  { headers: { "X-API-Key": process.env.NEWSDATA_KEY! } }
);

Særhed: paginering bruger en nextPage cursor-streng — ideel til useInfiniteQuery.

3. Perigon

Anbefalet mønster: RSC. Perigon's event-klyngede svar passer godt til server-renderede feature-kort.

const res = await fetch(
  "https://api.goperigon.com/v1/all?q=openai&language=en",
  { headers: { "x-api-key": process.env.PERIGON_KEY! }, next: { revalidate: 120 } }
);

Særhed: rigere skema (klynger, entiteter) — enten render på serveren eller zod-parse til en slank klientform.

4. GNews

Anbefalet mønster: Route Handler proxy. Query-param auth betyder, at du aldrig rører dette fra en klientkomponent.

const res = await fetch(
  `https://gnews.io/api/v4/search?q=openai&lang=en&apikey=${process.env.GNEWS_KEY}`
);

Særhed: lavere rate limits; cache aggressivt med next: { revalidate: 300 }.

5. TheNewsAPI

Anbefalet mønster: Route Handler proxy. Header-godkendelse.

const res = await fetch(
  "https://api.thenewsapi.com/v1/news/all?search=openai&locale=us",
  { headers: { Authorization: `Bearer ${process.env.THENEWSAPI_KEY!}` } }
);

Særhed: strammere landedækning (~50 lande).

6. NewsAPI.org

Anbefalet mønster: Route Handler proxy, obligatorisk. Kald ikke fra klient.

const url = new URL("https://newsapi.org/v2/everything");
url.searchParams.set("q", "openai");
url.searchParams.set("apiKey", process.env.NEWSAPI_KEY!);
const res = await fetch(url);

Særhed: CORS-blokeret på ikke-localhost; produktion kræver $449/md Business-niveauet. Ikke en god standard for forsendelse af React-apps.

Mønster 1: Next.js 15 App Router + async RSC

Serverkomponenter lader dig await fetch() direkte i en komponent. Ingen useState, ingen useEffect, ingen klient-side hydrering af nyhedsdataene. Nøglen rører aldrig browseren.

// app/news/page.tsx
export const revalidate = 60; // ISR: regenerate every 60s

async function fetchNews() {
  const res = await fetch(
    "https://api.apitube.io/v1/news/everything?title=technology&per_page=12",
    { headers: { "X-API-Key": process.env.APITUBE_KEY! }, next: { revalidate: 60 } }
  );
  if (!res.ok) throw new Error(`News fetch failed: ${res.status}`);
  const data = await res.json();
  return data.results as Article[];
}

export default async function NewsPage() {
  const articles = await fetchNews();
  return (
    <main className="grid gap-4 p-6">
      {articles.map((a) => (
        <article key={a.href}>
          <h2>{a.title}</h2>
          <p>{a.summary}</p>
          <a href={a.href}>Read →</a>
        </article>
      ))}
    </main>
  );
}

Next.js udvider fetch() med cache-kontroller dokumenteret på nextjs.org/docs/app/api-reference/functions/fetch. next: { revalidate: 60 } cacher i 60 sekunder; cache: 'no-store' deaktiverer caching for live data.

Når brugeren klikker på et filter, udløs en Server Action eller naviger til /news?topic=x med useRouter — RSC'en genindlæses på serveren med den nye forespørgsel, og kun HTML-diffen streames til klienten.

Mønster 2: useSWR for et klient-side feed

Brug SWR, når feedet er simpelt: seneste overskrifter, ingen paginering, ingen kompleks cache-invalidering. SWR er 5.3 KB gzipped og har fornuftige standardindstillinger — revalider ved fokus, revalider ved genopkobling, dedupliker identiske anmodninger.

"use client";
import useSWR from "swr";

const fetcher = (url: string) => fetch(url).then((r) => r.json());

export function NewsList({ query }: { query: string }) {
  const { data, error, isLoading } = useSWR(
    `/api/news?q=${encodeURIComponent(query)}`,   // your Route Handler, not the vendor
    fetcher,
    { refreshInterval: 60_000 }                    // poll every minute
  );

  if (isLoading) return <NewsSkeleton />;
  if (error) return <NewsError onRetry={() => location.reload()} />;
  if (!data?.length) return <EmptyFeed />;

  return (
    <ul>
      {data.map((a: Article) => (
        <li key={a.href}><a href={a.href}>{a.title}</a></li>
      ))}
    </ul>
  );
}

Hook'en rammer /api/news, ikke leverandøren. Nøglen er på serveren.

Mønster 3: TanStack Query + useInfiniteQuery for paginerede nyheder

TanStack Query er 16.2 KB gzipped og tjener sin vægt, når du har brug for paginering, mutationer og delt cache-tilstand på tværs af træet. useInfiniteQuery er det kanoniske mønster for infinite-scroll nyhedsfeeds. Docs: tanstack.com/query.

"use client";
import { useInfiniteQuery } from "@tanstack/react-query";

type NewsPage = { articles: Article[]; nextCursor?: string };

async function fetchPage({ pageParam }: { pageParam?: string }): Promise<NewsPage> {
  const url = new URL("/api/news", location.origin);
  url.searchParams.set("q", "technology");
  if (pageParam) url.searchParams.set("cursor", pageParam);
  const res = await fetch(url);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json();
}

export function InfiniteNews() {
  const {
    data, fetchNextPage, hasNextPage, isFetchingNextPage, status,
  } = useInfiniteQuery({
    queryKey: ["news", "technology"],
    queryFn: fetchPage,
    initialPageParam: undefined as string | undefined,
    getNextPageParam: (last) => last.nextCursor,
    staleTime: 30_000,
  });

  if (status === "pending") return <NewsSkeleton />;
  if (status === "error") return <NewsError />;

  return (
    <>
      {data.pages.flatMap((p) => p.articles).map((a) => (
        <article key={a.href}><h3>{a.title}</h3></article>
      ))}
      <button
        onClick={() => fetchNextPage()}
        disabled || isFetchingNextPage}
      >
        {isFetchingNextPage ? "Loading…" : hasNextPage ? "Load more" : "End of feed"}
      </button>
    </>
  );
}

Kobl knappen til en IntersectionObserver for ægte uendelig scroll. Route Handler returnerer { articles, nextCursor } — cursor kommer fra udbyderens paginering (NewsDatas nextPage, APITubes next_page / has_next_pages, osv.).

Live nyheder med SSE i en klientkomponent

Når produktet har brug for push-opdateringer, ikke polling, skal du forbruge Server-Sent Events. APITube eksponerer text/event-stream. Pak EventSource ind i en brugerdefineret hook med genopretning:

"use client";
import { useEffect, useState } from "react";

export function useNewsStream(endpoint: string) {
  const [articles, setArticles] = useState<Article[]>([]);
  const [connected, setConnected] = useState(false);

  useEffect(() => {
    const es = new EventSource(endpoint); // hits YOUR proxy, not the vendor
    es.onopen = () => setConnected(true);
    es.onerror = () => setConnected(false); // EventSource auto-reconnects
    es.onmessage = (evt) => {
      const article = JSON.parse(evt.data) as Article;
      setArticles((prev) => [article, ...prev].slice(0, 50)); // cap memory
    };
    return () => es.close();
  }, [endpoint]);

  return { articles, connected };
}

// Usage
function LiveFeed() {
  const { articles, connected } = useNewsStream("/api/news/stream");
  return (
    <>
      <div>Status: {connected ? "🟢 live" : "🔴 reconnecting"}</div>
      <ul>{articles.map((a) => <li key={a.href}>{a.title}</li>)}</ul>
    </>
  );
}

/api/news/stream Route Handler åbner en langvarig fetch til APITube's SSE endpoint og sender bytes direkte igennem med ReadableStream. Intet ekstra bibliotek, ingen polling.

Produktion UX — Suspens, skelet, fejlgrænse

Et tre-div "Loading..." er ikke en UX. Komponer Suspense + <ErrorBoundary> + skelet:

import { Suspense } from "react";
import { ErrorBoundary } from "react-error-boundary";

export function NewsSection() {
  return (
    <ErrorBoundary fallback={<NewsError />}>
      <Suspense fallback={<NewsSkeleton count={6} />}>
        <AsyncNewsList />
      </Suspense>
    </ErrorBoundary>
  );
}

function NewsSkeleton({ count = 6 }) {
  return (
    <ul className="grid gap-4">
      {Array.from({ length: count }).map((_, i) => (
        <li key={i} className="h-24 animate-pulse rounded bg-gray-200" />
      ))}
    </ul>
  );
}

Fire tilstande at håndtere — indlæsning, fejl, tom, succes. Den tomme tilstand er vigtig: et feedfilter, der returnerer nul artikler, bør fortælle brugerne hvorfor, ikke vise et tomrum.

useSWR vs TanStack Query til nyhedsfeeds

Beslutningsregler efter scenarie:

Numerisk regel: hvis nyheds-UI'en involverer én hook pr. side, er SWR nok. Hvis den involverer tre eller flere koordinerede forespørgsler eller nogen mutation, brug TanStack Query. Forskellen på 11 og KB betaler sig selv hjem første gang du useInfiniteQuery.

Hvad der ændrer sig for React i 2026-2027

Tre skift gør React-side nyheds-API-valget mere afgørende:

1. RSC er nu standard i Next.js og de fleste nye React-frameworks. Nyheds-API'er, der er afhængige af en browser-kun SDK, er i stigende grad akavede; leverandører med ren REST + header-godkendelse fungerer i server-træet uden ceremoni. En ren REST API fungerer identisk i Server Components, Route Handlers og Edge-funktioner, hvilket betyder, at du vælger én leverandør og sender overalt.

2. NEXT_PUBLIC_* offentlige env vars er under strengere CI-gennemgang. Sikkerhedslintere og deploy-tids-checks advarer i stigende grad, når offentlige env vars navngives som API nøgler. Teams, der leverer nye kodebaser i 2026, vil som standard bruge proxy-mønsteret; den gamle "bare tilføj NEXT_PUBLIC_" genvej bliver en CI-fejl.

3. AI-native React apps henter nyheder server-side. Apps bygget på Vercel AI SDK, LangChain.js eller Mastra med React UIs henter nyheder i servertræet før kontekst sendes til modellen. Nyhedshentning på browser-siden til AI-flows er et anti-pattern. React nyheds-API valget i 2026 svarer effektivt til Node nyheds-API valget af en serverframework, der renderer React.

Ofte stillede spørgsmål

Hvordan henter jeg nyheder i React?

Den anbefalede måde at hente nyheder i React i 2026 er at kalde en server-side proxy (Next.js Route Handler, Remix loader, eller Express endpoint), der indeholder API-nøglen, fordi et direkte kald til en nyheds-API fra en React-komponent lækker nøglen ind i klient-bundtet. Til produktion, par proxyen med useSWR (simple feeds) eller TanStack Query useQuery/useInfiniteQuery (paginerede eller komplekse feeds).

Er React Query bedre end SWR for nyheder?

TanStack Query er bedre end SWR til nyhedsfeeds, der kræver paginering, mutationer eller delt cache på tværs af komponenter, fordi useInfiniteQuery og useMutation dækker præcis disse tilfælde. SWR er bedre til en enkelt seneste-overskrift hook, fordi den er 5.3 KB versus TanStack Query's 16.2 KB. For et produktionsnyhedsfeed med infinite scroll, vælg TanStack Query.

Hvordan bygger jeg et nyhedsfeed i Next.js?

For at bygge et nyhedsfeed i Next.js 15, opret en asynkron Server Component, der await fetch()'er nyhederne API server-side med din nøgle i en server-only env var, og render derefter resultaterne som HTML. Tilføj next: { revalidate: 60 } for ISR. For uendelig scroll, eksponer en Route Handler ved /api/news og forbrug den fra en client component med TanStack Query's useInfiniteQuery.

Hvordan skjuler jeg min API-nøgle i React?

Du skjuler din API-nøgle i React ved at beholde den i en server-kun env var (ingen NEXT_PUBLIC_ eller REACT_APP_ præfiks) og kun kalde nyheds-API fra serverkode — en Next.js Route Handler, Remix loader eller en backend-proxy. Alt med præfikset NEXT_PUBLIC_* eller REACT_APP_* bliver indlejret i browser-bundlen og er synligt i DevTools.

Kan React kalde Nyheds-API direkte?

Nej, React kan ikke sikkert kaldes direkte i NewsAPI.org i 2026, fordi dens CORS-politik blokerer ikke-localhost browser-oprindelser på udviklerplanen, og ?apiKey= query-string-godkendelsen ville lække nøglen, selvom CORS tillod det. Det korrekte mønster er en server-side proxy. Andre leverandører med header-godkendelse (APITube, NewsData.io, Perigon) er teknisk set CORS-venligere, men bør stadig proxys i produktion for nøglesikkerhed.

Dom

Den bedste nyheds-API for React i 2026 er den, der fungerer med React's standard rendering-model — server-først, proxy nøglen, lad et hook-bibliotek håndtere cache på klienten. APITube, NewsData.io og Perigon kvalificerer sig alle; NewsAPI.org gør det ikke uden et betalt niveau og en proxy. Uanset hvad du vælger, er proxy-mønsteret ikke-forhandlingsbart, og hook-valget (useSWR vs useQuery) følger af feedets kompleksitet.

APITube leverer en ren REST API, der fungerer lige godt i Server Components, Route Handlers og browser-fetches bag en proxy — X-API-Key header, SSE streaming, 100 anmodninger/dag på gratis niveau, kommerciel brug tilladt. apitube.io

Relateret læsning: Bedste Nyheds-API i 2026: Komplet Sammenligningsguide · Bedste Nyheds-API til JavaScript & Node.js 2026 · Next.js fetch reference · TanStack Query docs

Ressourcer

• APITube — apitube.io — prøv det gratis, sentiment og entiteter inkluderet på hver artikel
• Dokumentation — docs.apitube.io — endpoints, parametre, svarsstruktur, integrationer
• Prissætning — apitube.io/pricing — alle niveauer
• APITube blog — apitube.io/blog — flere guides og sammenligninger

Relaterede vejledninger:

• Nyheder React Dashboard Tutorial
• Flersproget nyheds-app med Next.js
• WebSocket Nyhedsalarmer med Socket.IO