87 lines
3.5 KiB
Markdown
87 lines
3.5 KiB
Markdown
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 `<ClientRouter />` komponente u tvoj osnovni layout. Ovo će automatski "zakačiti" sve linkove u aplikaciji.
|
||
|
||
```astro
|
||
---
|
||
// src/layouts/Layout.astro
|
||
import { ClientRouter } from 'astro:transitions';
|
||
---
|
||
<html>
|
||
<head>
|
||
<ClientRouter /> </head>
|
||
<body>
|
||
<slot />
|
||
</body>
|
||
</html>
|
||
|
||
```
|
||
|
||
### 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
|
||
<ToastContainer client:only="preact" transition:persist />
|
||
|
||
```
|
||
|
||
### 4. Kako postupati s `a` tagovima
|
||
|
||
Sada kada imaš `client-router`, ne moraš više ništa mijenjati u svojim `<a>` 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
|
||
<a href="/login" data-astro-reload>Osvježi cijelu stranicu</a>
|
||
|
||
```
|
||
|
||
|
||
|
||
### 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š `<ClientRouter />` 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 `<ClientRouter />` u `Layout.astro`? Ako jesi, osjećaš li već brzinu navigacije? |