Arhitektura modernih web aplikacija – Deo 2: Frontend arhitektura: SPA, SSR, SSG i izomorfni pristup

Dobrodošli u drugi deo serijala na ITNetwork.rs! U prethodnom delu smo upoznali monolit, SOA i mikroservise. Sada ulazimo u srce korisničkog iskustva – frontend arhitekturu. Danas ćemo razjasniti tri ključna pristupa: SPA (Single Page Application), SSR (Server-Side Rendering) i SSG (Static Site Generation), kao i moderni izomorfni (univerzalni) pristup koji kombinuje sve prednosti.

Zašto je frontend arhitektura bitna?

Frontend više nije samo „lepa šminka“. On je:

• Prvi dodir korisnika sa aplikacijom
• Ključ za SEO i performanse
• Mesto gde se dešava 80% interakcije

Loš izbor arhitekture = spori load, loš SEO, frustrirani korisnici.

1. SPA (Single Page Application)

Definicija

Cela aplikacija se učitava jednom (index.html + JS bundle), a sve dalje promene se dešavaju u browseru preko JavaScript-a.

Tehnologije

• React + React Router
• Vue + Vue Router
• Angular

Kako radi?

Prednosti

• Admin paneli
• Aplikacije za registrovane korisnike
• Real-time dashboardi (npr. analytics)

2. SSR (Server-Side Rendering)

Definicija

HTML se generiše na serveru za svaki zahtev i šalje gotov browseru.

Tehnologije

• Next.js (React)
• Nuxt.js (Vue)
• Remix, Angular Universal

Kako radi?

Prednosti

• Blogovi, e-commerce
• Marketing stranice
• Bilo šta gde je SEO ključan

3. SSG (Static Site Generation)

Definicija

HTML se generiše u vreme build-a (npr. npm run build) i servira kao statički fajlovi preko CDN-a.

Tehnologije

• Next.js (getStaticProps)
• Gatsby, Astro, 11ty, Hugo

Kako radi?

Prednosti

• Blogovi, dokumentacija
• Marketing sajtovi
• Landing page-ovi

4. Izomorfni (univerzalni) pristup – najbolje iz svih svetova

Definicija

Kombinuje SSR + SSG + SPA po stranici ili ruti.

Primer: Next.js App Router

Struktura (App Directory)

app/
├── layout.tsx          → Glavni layout
├── page.tsx            → Homepage (SSG)
├── blog/
│   └── [slug]/page.tsx → SSG + ISR
├── dashboard/
│   └── page.tsx        → SSR (server component)
└── api/
    └── todos/route.ts  → Serverless API

Primer: app/page.tsx (SSG)

// app/page.tsx
export default function Home() {
  return (
    <main>
      <h1>Dobrodošli na ITNetwork.rs</h1>
      <p>Ovo je statički generisana stranica.</p>
    </main>
  );
}

// SSG po defaultu u App Router-u

// app/dashboard/page.tsx
import { cookies } from 'next/headers';

export default async function Dashboard() {
  const token = cookies().get('auth')?.value;
  const res = await fetch('https://api.itnetwork.rs/user', {
    headers: { Authorization: `Bearer ${token}` }
  });
  const user = await res.json();

  return (
    <div>
      <h1>Zdravo, {user.name}!</h1>
      <p>Tvoj dashboard – renderovan na serveru.</p>
    </div>
  );
}

React Server Components (RSC) – kod se izvršava samo na serveru, ne šalje se klijentu → manji bundle!

State Management u modernom frontendu

// lib/store.ts
import { create } from 'zustand';

type State = {
  todos: string[];
  addTodo: (text: string) => void;
};

export const useTodoStore = create<State>((set) => ({
  todos: [],
  addTodo: (text) => set((state) => ({ todos: [...state.todos, text] })),
}));

Automatski u Next.js

// Dinamički import
const HeavyChart = dynamic(() => import('../components/HeavyChart'), {
  loading: () => <p>Učitavanje grafika...</p>
});

Bundle analiza

npx next build
# → Analiziraj .next/analyze

Cilj: Prvi bundle < 100 KB (gzipped)

Dijagram: SPA vs SSR vs SSG

Poređenje: SPA vs SSR vs SSG

Zlatno pravilo: Počni sa SSG gde možeš. Dodaj SSR gde moraš.

Šta dalje?

U trećem delu ulazimo u backend arhitekturu:

• REST vs GraphQL vs gRPC
• API Gateway
• Verzionisanje i HATEOAS

Tvoj izazov

1. Napravi Next.js aplikaciju sa:
   • app/page.tsx → SSG
   • app/profile/page.tsx → SSR (dohvati korisnika sa /api/user)
2. Postavi na Vercel
3. Komentariši ispod: „Koju arhitekturu koristiš trenutno i zašto?“

Autor: Dušan Antonijević – saradnik ITNetwork.rs
Hvala na čitanju! Podeli tekst sa kolegama.