Implementacija `astro:client-router` (poznatog kao **View Transitions**) pretvorit će tvoju aplikaciju u **SPA (Single Page Application)**. To znači da se prilikom navigacije ne osvježava cijela stranica, već se samo mijenja sadržaj, što drastično ubrzava rad tvog ERP sustava i zadržava stanje komponenti.
Slijedi korake za potpunu implementaciju:
### 1. Konfiguracija u `Layout.astro`
Najvažniji korak je dodavanje `` komponente u tvoj osnovni layout. Ovo će automatski "zakačiti" sve linkove u aplikaciji.
```astro
---
// src/layouts/Layout.astro
import { ClientRouter } from 'astro:transitions';
---
```
### 2. Upravljanje stanjem (State persistence)
Kada koristiš `client-router`, tvoji **NanoStores** će ostati sačuvani u memoriji između stranica (što je odlično!). Međutim, ako želiš da se određeni dijelovi (npr. naslovi stranica ili podaci koji se moraju resetirati) osvježe, koristi `astro:page-load` event.
U bilo kojoj klijentskoj komponenti (`.jsx`), možeš reagirati na promjenu rute:
```javascript
// U nekoj komponenti ili globalnoj skripti
document.addEventListener('astro:page-load', () => {
console.log('Nova stranica učitana, resetiram UI...');
// Ovdje možeš pokrenuti logiku za resetiranje UI-a ako je potrebno
});
```
### 3. "Persisting" (Očuvanje) elemenata
Ako želiš da se neki elementi **ne smiju** ponovno renderirati (npr. tvoj `ToastContainer` ili navigacijski izbornik), dodaj atribut `transition:persist`.
```astro
```
### 4. Kako postupati s `a` tagovima
Sada kada imaš `client-router`, ne moraš više ništa mijenjati u svojim `` tagovima. Astro će automatski presresti klikove i izvesti "View Transition".
* **Ako želiš isključiti** router za neki specifičan link (npr. vanjski link), koristi:
```html
Osvježi cijelu stranicu
```
### 5. Rješavanje problema s `localStorage` i `useEffect`
Budući da se stranica sada ne osvježava, `useEffect` se neće uvijek okinuti kao kod "hard" reloads. Ako imaš logiku koja se mora izvršiti pri svakom dolasku na stranicu (npr. provjera tokena), umjesto `useEffect(() => {...}, [])` koristi:
```javascript
import { useEffect } from 'preact/hooks';
// Umjesto standardnog useEffect-a, koristi event koji se okida kod svake navigacije
useEffect(() => {
const handleRouteChange = () => {
// Tvoja logika (npr. provjera auth tokena)
};
document.addEventListener('astro:page-load', handleRouteChange);
return () => document.removeEventListener('astro:page-load', handleRouteChange);
}, []);
```
### Zašto je ovo "game changer" za tvoj ERP:
1. **Brzina**: Navigacija između `RadniNalozi` i `Dashboard` postaje trenutačna.
2. **State Preservation**: Tvoji NanoStoreovi ostaju živi. Ako serviser filtrira nalog, navigira na drugu stranicu i vrati se, filtar će biti **sačuvan**.
3. **Animacije**: Možeš lako dodati `transition:animate="fade"` na glavni sadržaj stranice za "profesionalni" osjećaj aplikacije.
**Napomena:** Nakon što dodaš `` u `Layout.astro`, **provjeri konzolu**. Ako dobiješ greške vezane uz "Hydration Mismatch", to znači da smo se vratili na onaj stari problem – tada samo postavi `transition:persist` na te komponente ili koristi `client:only`.
Jesi li implementirao `` u `Layout.astro`? Ako jesi, osjećaš li već brzinu navigacije?