Dette var uka for teknisk arv og overreaksjoner — og 737 ting som skjedde i frontend-verdenen!
Bør du oppgradere til React Router 7?
Vi har lenge visst at React Router 7 markerer sammenslåingen av Remix og React Router, og forrige uke ble denne versjonen sluppet! Så hva betyr dette i praksis?
Når du nå starter et nytt prosjekt, kan du velge om du vil bruke React Router som et rammeverk eller kun som et bibliotek.
Om du bruker React Router kun som et bibliotek, er det et enkelt bibliotek for routing, slik du kjenner det fra før. Det matcher URL-er med riktig komponent, lar deg hente ut URL-data og navigere rundt i appen. Siden du bare får routing, må du selv gjøre valg for andre ting appen trenger, som å bruke TanStack Query for datahenting.
Om du bruker React Router som et rammeverk, får du en del funksjonalitet ut fra boksen, som kodesplitting og lettere å velge blant rendringsstrategier (SSR, SPA, SSG). Du får også et sett med konvensjoner, som at du må sette opp ruter på en viss måte og at du gjerne bruker loaders for å hente data.
Noe som har manglet i React Router, er typesikring — noe som også var en hovedmotivasjon for Tanner Linsey å lage TanStack Router. Nå har typesikker routing også kommet til React Router, også med typesikring for loader-data og actions.
For å gjøre oppgraderingen, er det variabelt hvor mye arbeid det er, utifra hvor du kommer fra. Om du tidligere har brukt React Router 6 og vil til nyeste versjon, er endringen bare å oppdatere en import:
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router";For å gå fra Remix v2 til R7 er det mer arbeid. Du setter ikke lenger Remix-konfigurasjon, som SSR, via Remix-Vite-pluginen — men gjennom filen react-router.config. Vite-pluginen du nå vil bruke er React Router. Så er det en del typesetting du må oppdatere. Se guide i docs.
React Router har også lagd en guide for deg som har brukt React Router 6 og vil nå bruke React Router som et rammeverk.
Med alle disse endringene, er det verdt det?
YouTuber Alam Tuzlak har en hjelpsom video for å vurdere om du bør oppgradere. Overgangen fra React Router 6 til React Router 7 som bibliotek er veldig enkel. Det fins også codemods for å gjøre dette raskt.
For overgangen fra Remix til React Router 7, må du vurdere din situasjon. Det eneste nye for Remix v2 til React Router 7 er SSG og typesikker routing. Så om du ikke trenger dette i prosjektet ditt nå, kanskje du ikke trenger å flytte over med engang. Du kan drøye overgangen til mer funksjonalitet er lagt til, som React Serverkomponenter og middleware. Unntaket er om du skal til å starte en ny applikasjon eller nettopp har starta. Da kan det være verdt å migrere over med en gang, så du slipper merarbeid senere.
Se videoen her:
Vite blir mer fleksibelt
Vite er det mest elskede biblioteket, og er nå ute i versjon 6! Vite er allerede standardvalget for mange JavaScript-rammeverk, så hva endres egentlig med denne nye versjonen?
For den gjengse utvikler er det få nye ting. Men for rammeverk- utviklere har Vite blitt mer fleksibelt med Environment API.
Environment API gjør det mulig for rammeverksutviklere å støtte runtime-miljøer som Deno og Bun, samtidig som de kan håndtere eldre Node.js-versjoner.
Ny funksjonalitet gjør bundling mer kompleks. Tidligere hadde du én bundle for klientkoden og én for SSR, men støtte for React Server Components og middleware krever flere bundles, noe Environment API forenkler.
Du kan lese mer om Environment API her.
… og raskere
Evan You, mannen bak Vite, hadde nylig en keynote og delte sine tanker om fremtiden til Vite — og den er rask.
Vite er en bundler, som igjen er bygd oppå tre komponenter: esbuild, rollup og SWC:
Vite bruker altså to ulike bundlere. En for dev-miljø, og en for produksjonsmiljø. Dette fungerer bra for mange prosjekter, men for veldig store prosjekter, kan byggingen være treg. Siden det er to ulike bundlere, kan det også oppstå forskjeller i dev- og prod- bundelen, som skaper feil du først oppdager i prod.
You jobber derfor med å gå fra tre komponenter til ett verktøy, og verktøyet kaller han rolldown:
Rolldown er skrevet i Rust. Ved å ha ett verktøy, håper You å gjøre byggeprosessen enklere og med færre feil. Og ikke minst ser verktøyet ekstremt kjapp ut. Fra en case-study fikk teamet et allerede optimalisert bygg på 8,5 sekunder ned til 1,11 sekunder ved å bruke rolldown:
Siden mange JavaScript-rammeverk er bygd på Vite, ser fremtiden for oss ganske kjapp ut. Det blir interessant å se hvordan dette påvirker Next.js sin Turbopack.
Se You's keynote her:
Det var alt for denne gang — sees neste uke!
