Next.js mot React Router v7 : En prestandajämförelse

Abstract

I detta lärdomsprov undersöker jag prestandaskillnader mellan ramverken Next.js och React Router v7. Syftet är att göra en jämförande studie för att identifiera ramverkens svagheter och styrkor. Arbetets frågeställningar är: hur skiljer sig prestandan mellan dessa ramverk? Hur påverkar ramverkens arkitektur prestandan? När ska man välja vilket ramverk? För att besvara dessa frågor byggdes samma applikation med båda ramverken. Dessa testades med hjälp av verktygen Lighthouse och Puppeteer. Analysen fokuserar till stor del på Core Web Vitals. Resultaten visar att React Router v7 presterar betydligt bättre än Next.js i lokala testningen. Next förbättras däremot mycket i produktionsmiljö tack vare optimeringar i Vercel. Slutsatsen är att ramverkens olika arkitekturval har en direkt påverkan på prestandan, och att React Router v7 är effektiv för formulär- och interaktionsintensiva applikationer, medan Next är bra val för projekt som drar nytta av Vercels ekosystem och tillhörande optimeringar.

In this thesis, I examine performance differences between the frameworks Next.js and React Router v7. The purpose is to conduct a comparative study to identify the weaknesses and strengths of each framework. The research questions are: How does performance differ between these frameworks? How does the frameworks' architecture affect performance? When should one choose which framework? To answer these questions, the same application was built with both frameworks. These were tested using Lighthouse and Puppeteer. The analysis focuses largely on Core Web Vitals. The results show that React Router v7 performs significantly better than Next.js in local testing. Next.js, however, improves considerably in production environment due to optimizations in Vercel. The conclusion is that the frameworks' different architectural choices have a direct impact on performance, and that React Router v7 is effective for form- and interaction-intensive applications, while Next.js is a good choice for projects that benefit from Vercel's ecosystem and associated optimizations.