Dette var uka for mobil på lydløs, russisk rulett og mimring — og 852 andre ting som skjedde i frontend-verdenen!
ChatGPT bytter fra Next.js til Remix
React anbefaler å bruke et rammeverk når du starter et prosjekt, men det er ikke etablert om du bør velge Remix eller Nextjs. Tidligere har Remix-entusiast Kent C. Dodds sagt hvorfor han ikke vil velge Next.js, noe som fikk Vercels Lee Robinson til å komme med et motsvar.
Nylig byttet ChatGPT fra Next.js til Remix, noe som igjen vekket debatten om hvilket rammeverk du bør velge. Kan det være at ChatGPT ble lei av å gi seg selv kodeforslag for Pages Router istedenfor App Router?
Endringen av rammeverket er overraskende av flere grunner. Du kan få til det samme fra begge rammeverkene, så jeg undrer meg hvorfor ChatGPT tok seg bryet i å gjøre en frontend-refaktorering i det hele tatt. Er det ikke mest å hente fra backend-optimaliseringer for et slikt produkt?
Han lar 100 millioner logge seg på ChatGPT
Før vi har fått noen fasit fra ChatGPT selv, har Wes Bos tatt frem forstørrelsesglasset for litt begrunnet synsing. Ved å lese av kodebasen, mistenker han at ChatGPT har valgt å gå for en klient-først tilnærming.
Da passer Remix godt inn, ettersom du har en router som lar deg hente data før sidene lastes inn. Du kan gjøre dette også i Next.js, men i nyeste versjon er Next.js server-først, så du ville ha jobbet mot rammeverket.
En grunn til at ChatGPT velger å gå klient-først, kan være at de ikke bare har én web-applikasjon, men også mobil- og desktop-apper, hvor det er API-et som gjør de tunge løftene. Ved å ha en enklere SPA, kan de bruke en wrapper for de ulike plattformene.
For mer synsing, ta en titt på videoen:
Hvorfor velge et rammeverk?
Om du også blir forvirra av hva som egentlig er forskjellen på Remix og Next.js, anbefaler jeg å ta en titt på Brad Westfalls artikkel om hvorfor vi i det hele tatt trenger et rammeverk.
Her forklarer han alt fra useEffect, til TanStack Query og forskjellene mellom å bruke Remix sine loaders og serverkomponenter i Next.js.
En av fordelene med å bruke et rammeverk er å unngå nettverks-vannfall, hvor du har useEffect-er nedover i komponent-treet, som stadig henter noe nytt.
Remix har en fin visualisering av vannfalls-effekten, om du blar halvannen meter ned deres nettside. Her kan du se hvordan du kan få “Spinnageddon” og overvelde brukeren:
FormData inn i fremtiden
Imens pendelen svinger mellom klient- og server-rendring, ser vi også React 19 svinge med seg en gammel JavaScript-standard fra 2010, nemlig FormData:
function onSubmit(event: React.FormEvent) {
event.preventDefault()
const formData = new FormData(event.target)
const formValues = {
name: formData.get('name')
email: formData.get('email)
}
}Nå har FormData blitt mer populært, sannsynligvis på grunn av at nyeste React-versjon pusher mot serverkomponenter og server-actions. Med FormData kan du hente ut verdier fra skjemaet uten ekstra tilstandslogikk.
Brad Westfall er på ballen, og viser oss hvordan du kan type FormData med valideringsbiblioteket Zod. Han viser oss også hvordan FormData kan se ut i rammeverk som Remix, hvor du kan hente ut FormData fra Request:
export async function action(request: Request) {
const formData = await request.formData()
// ...
}Om du er nysgjerrig på hvordan Next.js håndterer FormData, kan du ta en titt på deres docs.
Jeg vet ikke med deg, men alt dette snakket om Remix gjør meg ganske fristet til å teste ut forskjellene førstehånds. Syns du ChatGPT gjorde et godt valg?
Det var alt for denne uka. Ses neste uke!
