Server-Side Rendering (SSR) s CosmosDB

Popis

SSR v kombinácii so Server Actions umožňuje vytvárať plne dynamické aplikácie. Dáta sú načítané priamo na serveri a mutácie (pridávanie dát) prebiehajú cez bezpečné serverové funkcie, ktoré po dokončení automaticky revalidujú cache a aktualizujú UI bez nutnosti manuálneho refreshu.

Funkčná ukážka (Demo)

Pridať nový produkt

Názov produktu	Kategória	Cena
33333	44444	555.00 €
dsadaerwer	5435	555.00 €
ssssss	eeeee	33.00 €
test	test2	444.00 €

Ukážka kódu

// app/ssr/actions.ts
"use server";
import clientPromise from "@/lib/mongodb";
import { revalidatePath } from "next/cache";

export async function addProduct(formData: FormData) {
  const client = await clientPromise;
  const db = client.db("showcase");
  await db.collection("products").insertOne({
    name: formData.get("name"),
    category: formData.get("category"),
    price: parseFloat(formData.get("price")),
    createdAt: new Date(),
  });
  revalidatePath("/ssr"); // Refresh dát na strane servera
}

// app/ssr/page.tsx
export default async function SSRPage() {
  const products = await getProducts();
  
  return (
    <form action={addProduct}>
       <input name="name" required />
       <input name="category" required />
       <input name="price" type="number" step="0.01" required />
       <button type="submit">Pridať</button>
    </form>
  );
}