M

MLOG

Čeština

Odhalte sílu Next.js App Routeru pochopením klíčových rozdílů mezi Server-Side Rendering (SSR) a Static Site Generation (SSG). Zjistěte, kdy použít kterou strategii pro optimální výkon a SEO.

Next.js App Router: SSR vs. SSG – Komplexní průvodce

Next.js App Router přinesl revoluci do způsobu, jakým vytváříme aplikace v Reactu, a nabízí vylepšený výkon, flexibilitu a vývojářský zážitek. Ústředním prvkem této nové architektury jsou dvě výkonné strategie vykreslování: Server-Side Rendering (SSR) a Static Site Generation (SSG). Volba správného přístupu je klíčová pro optimalizaci výkonu, SEO a uživatelského zážitku vaší aplikace. Tento komplexní průvodce se ponoří do detailů SSR a SSG v kontextu Next.js App Routeru a pomůže vám činit informovaná rozhodnutí pro vaše projekty.

Pochopení základů: SSR a SSG

Než se ponoříme do specifik Next.js App Routeru, ujasněme si, co přesně SSR a SSG znamenají.

Vykreslování na straně serveru (SSR)

SSR je technika, při které jsou React komponenty vykresleny do HTML na serveru pro každý požadavek. Server pošle plně vykreslené HTML do prohlížeče klienta, který následně stránku hydratuje a učiní ji interaktivní.

Klíčové vlastnosti SSR:

Generování statických stránek (SSG)

SSG na druhé straně zahrnuje před-vykreslení React komponent do HTML v čase sestavení (build time). Vygenerované HTML soubory jsou poté servírovány přímo z CDN nebo webového serveru.

Klíčové vlastnosti SSG:

SSR vs. SSG v Next.js App Routeru: Klíčové rozdíly

Next.js App Router představuje nové paradigma pro definování rout a zpracování načítání dat. Pojďme prozkoumat, jak jsou SSR a SSG implementovány v tomto novém prostředí a jaké jsou klíčové rozdíly mezi nimi.

Načítání dat v App Routeru

App Router poskytuje jednotný přístup k načítání dat pomocí syntaxe `async/await` v rámci serverových komponent. To zjednodušuje proces načítání dat bez ohledu na to, zda používáte SSR nebo SSG.

Serverové komponenty: Serverové komponenty jsou nový typ React komponent, které běží výhradně na serveru. To vám umožňuje načítat data přímo ve vašich komponentách bez nutnosti vytvářet API routes.

Příklad (SSR):

// app/blog/[slug]/page.js
import { getBlogPost } from './data';

export default async function BlogPost({ params }) {
  const post = await getBlogPost(params.slug);

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

V tomto příkladu funkce `getBlogPost` načítá data blogového příspěvku na serveru pro každý požadavek. `export default async function BlogPost` naznačuje, že se jedná o serverovou komponentu.

Příklad (SSG):

// app/blog/[slug]/page.js
import { getBlogPost } from './data';

export async function generateStaticParams() {
  const posts = await getAllBlogPosts();
  return posts.map((post) => ({ slug: post.slug }));
}

export default async function BlogPost({ params }) {
  const post = await getBlogPost(params.slug);

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

Zde se funkce `generateStaticParams` používá k před-vykreslení blogových příspěvků pro všechny dostupné slugy v čase sestavení. To je pro SSG klíčové.

Strategie cachování

Next.js App Router poskytuje vestavěné mechanismy cachování pro optimalizaci výkonu jak pro SSR, tak pro SSG. Porozumění těmto mechanismům je zásadní.

Datová cache: Ve výchozím nastavení jsou data načtená pomocí `fetch` v serverových komponentách automaticky cachována. To znamená, že následné požadavky na stejná data budou obslouženy z cache, což snižuje zátěž na váš datový zdroj.

Cache celé routy: Celý vykreslený výstup routy může být cachován, což dále zlepšuje výkon. Chování cache můžete konfigurovat pomocí volby `cache` ve vašich souborech `route.js` nebo `page.js`.

Příklad (Vypnutí cache):

// app/blog/[slug]/page.js

export const fetchCache = 'force-no-store';

import { getBlogPost } from './data';

export default async function BlogPost({ params }) {
  const post = await getBlogPost(params.slug);

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

V tomto případě `fetchCache = 'force-no-store'` vypne cachování pro tuto konkrétní routu, čímž zajistí, že data budou vždy načtena čerstvá ze serveru.

Dynamické funkce

Routu můžete za běhu deklarovat jako dynamickou nastavením konfigurační volby `dynamic` v segmentu routy. To je užitečné pro informování Next.js, zda routa používá dynamické funkce a měla by být v čase sestavení zpracována odlišně.

Příklad (Dynamický segment routy):

// app/blog/[slug]/page.js
export const dynamic = 'force-dynamic'; // ve výchozím stavu statické, pokud nečte request

import { getBlogPost } from './data';

export default async function BlogPost({ params }) {
  const post = await getBlogPost(params.slug);

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

Inkrementální statická regenerace (ISR)

App Router nabízí inkrementální statickou regeneraci (ISR) jako hybridní přístup, který kombinuje výhody SSR i SSG. ISR vám umožňuje staticky generovat stránky a zároveň je aktualizovat na pozadí v zadaném intervalu.

Jak funguje ISR:

  1. První požadavek na stránku spustí statické generování.
  2. Následné požadavky jsou obsluhovány ze staticky vygenerované cache.
  3. Na pozadí Next.js regeneruje stránku po uplynutí zadaného časového intervalu (doba revalidace).
  4. Jakmile je regenerace dokončena, cache je aktualizována novou verzí stránky.

Implementace ISR:

Pro aktivaci ISR je třeba nakonfigurovat volbu `revalidate` ve vaší funkci `getStaticProps` (v adresáři `pages`) nebo v možnostech `fetch` (v adresáři `app`).

Příklad (ISR v App Routeru):

// app/blog/[slug]/page.js
import { getBlogPost } from './data';

export default async function BlogPost({ params }) {
  const post = await getBlogPost(params.slug);

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

export const revalidate = 60; // Revalidace každých 60 sekund

Tento příklad konfiguruje ISR tak, aby se blogový příspěvek revalidoval každých 60 sekund. To udržuje váš statický obsah čerstvý bez nutnosti přestavovat celý web.

Výběr správné strategie: Praktický průvodce

Výběr mezi SSR, SSG a ISR závisí na specifických požadavcích vaší aplikace. Zde je rámec pro rozhodování:

Kdy použít SSR:

Příklad: Zpravodajský web s neustále aktualizovanými články a upozorněními na nejnovější zprávy. Vhodné také pro kanály sociálních sítí, které se obnovují v reálném čase.

Kdy použít SSG:

Příklad: Osobní portfolio web prezentující vaše dovednosti a projekty. Stránka „O nás“ společnosti, která se mění jen zřídka.

Kdy použít ISR:

Příklad: E-shop s cenami produktů, které se aktualizují denně. Blog, kde jsou nové články publikovány několikrát týdně.

Osvědčené postupy pro implementaci SSR a SSG v Next.js App Routeru

Pro zajištění optimálního výkonu a udržovatelnosti dodržujte tyto osvědčené postupy při implementaci SSR a SSG v Next.js App Routeru:

Pokročilá témata

Edge Functions

Next.js také podporuje Edge Functions, které vám umožňují spouštět serverless funkce na okraji sítě (edge network). To může být užitečné pro úkoly jako A/B testování, autentizaci a personalizaci.

Middleware

Middleware vám umožňuje spouštět kód před dokončením požadavku. Můžete použít middleware pro úkoly jako autentizace, přesměrování a feature flags.

Internacionalizace (i18n)

Při tvorbě globálních aplikací je klíčová internacionalizace. Next.js poskytuje vestavěnou podporu pro i18n, což vám umožňuje snadno vytvářet lokalizované verze vašeho webu.

Příklad (nastavení i18n):

// next.config.js
module.exports = {
  i18n: {
    locales: ['en', 'fr', 'es', 'de'],
    defaultLocale: 'en',
  },
}

Příklady z praxe

Podívejme se na některé reálné příklady toho, jak různé společnosti používají SSR, SSG a ISR s Next.js:

Závěr

Next.js App Router nabízí výkonnou a flexibilní platformu pro tvorbu moderních webových aplikací. Pochopení rozdílů mezi SSR a SSG, spolu s výhodami ISR, je klíčové pro informovaná rozhodnutí o vaší strategii vykreslování. Pečlivým zvážením specifických požadavků vaší aplikace a dodržováním osvědčených postupů můžete optimalizovat výkon, SEO a uživatelský zážitek a nakonec vytvořit úspěšnou webovou aplikaci, která osloví globální publikum.

Nezapomeňte neustále sledovat výkon vaší aplikace a přizpůsobovat svou strategii vykreslování podle potřeby. Krajina webového vývoje se neustále vyvíjí, takže pro úspěch je nezbytné zůstat v obraze s nejnovějšími trendy a technologiemi.