Next.js: Spojení Reactu a serverových funkcí

Next.js je framework postavený na Reactu, který integruje serverové funkce do vývoje React aplikací. Toto propojení umožňuje vytvářet aplikace, které kombinují serverově renderované stránky s interaktivním front-endem.

1. Server-Side Rendering (SSR)

Next.js umožňuje generovat stránky na serveru při každém požadavku uživatele. To je užitečné pro aplikace, které potřebují dynamický obsah, například uživatelská data nebo výsledky z API.

export async function getServerSideProps(context) {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data },
  };
}

export default function Page({ data }) {
  return <div>{data.name}</div>;
}

2. Static Site Generation (SSG)

Next.js umožňuje předgenerování HTML stránek během build procesu. Výsledné stránky jsou rychlé a vhodné pro obsah, který se nemění často.

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data },
  };
}

export default function Page({ data }) {
  return <div>{data.name}</div>;
}

3. API Routes

Next.js umožňuje definovat serverové API endpointy přímo v aplikaci, což eliminuje potřebu samostatného backendu.

export default function handler(req, res) {
  if (req.method === 'GET') {
    res.status(200).json({ message: 'Hello from API route!' });
  } else {
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

4. Client-Side Rendering (CSR)

Next.js podporuje standardní React rendering na straně klienta. Tato metoda se hodí, když aplikace potřebuje načítat data přímo v prohlížeči po inicializaci.

import { useState, useEffect } from 'react';

export default function Page() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('/api/data')
      .then((res) => res.json())
      .then((data) => setData(data));
  }, []);

  return <div>{data ? data.name : 'Loading...'}</div>;
}

5. Hybridní přístup

Next.js umožňuje kombinovat SSR, SSG, a CSR na jedné aplikaci. Například můžete mít statickou hlavní stránku a dynamické podstránky generované serverově.

6. Optimalizace a SEO

SSR a SSG poskytují HTML již na první načtení, což zlepšuje SEO a rychlost načítání. Next.js také automaticky optimalizuje obrázky a CSS.

Díky těmto funkcím Next.js spojuje sílu Reactu pro uživatelské rozhraní s výhodami serverových funkcí, což z něj činí skvělý nástroj pro moderní webové aplikace.