Usporedba JavaScriptove knjižnice React i radnog okvira Next.js za razvoj web aplikacija

završni rad

• Naslov (engleski): Comparing React JavaScript library and Next.js web framework for developing web applications
• Autor: Tin Prvčić
• Mentor: Alan Jović (mentor)
• Član povjerenstva: Alan Jović (predsjednik povjerenstva)
• Član povjerenstva: Nikolina Frid (član povjerenstva)
• Član povjerenstva: Adrian Satja Kurdija (član povjerenstva)
• Ustanova koja je dodijelila akademski / stručni stupanj: Sveučilište u Zagrebu; Fakultet elektrotehnike i računarstva; Zagreb
• Datum i država obrane: 2023-06-29, Hrvatska
• Znanstveno / umjetničko područje, polje i grana: TEHNIČKE ZNANOSTI; Računarstvo

Sažetak

Cilj ovog završnog rada jest usporediti knjižnicu React.js za izradu dinamičnih web aplikacija i radni okvir Next.js, dodatak na knjižnicu React.js koji omogućava renderiranje aplikacije na poslužitelju. Izrađene su po dvije istovjetne aplikacije u obje tehnologije, a zatim uspoređen proces razvoja, kao i aplikacije koje su rezultat razvoja. Za statične aplikacije koje ne pružaju mogućnost izmjene podataka Next.js pokazao se kao bolji izbor jer pruža renderiranje na poslužitelju, koje je bitno radi boljeg rangiranja na internetskim tražilicama, ali i bolje performanse prilikom prvog učitavanja. Za aplikacije koje omogućavaju izmjenu podataka React se pokazao kao bolji izbor, jer unatoč nešto sporijem prvom učitavanju i nedostatku renderiranja na poslužitelju, React pruža mogućnost implementacije priručne memorije na klijentskoj strani, pa je nakon svake izmjene na poslužitelju moguće samo izmijeniti priručnu memoriju, dok je u Nextu potrebno opet dohvatiti sve podatke na trenutnoj stranici (pa čak i one koji se nisu promijenili). Također, takve su aplikacije uglavnom sakrivene iza autentifikacije pa renderiranje na poslužitelju i brzina prvog učitavanja nisu presudni.

Sažetak (engleski)

The aim of this bachelor thesis is to compare the dynamic web front-end library React.js with its companion for rendering these web applications on the server side, Next.js. Two identical pairs of applications were built, then analysed along with the process of their development. It is concluded that Next.js is a better option for static websites that do not allow mutating data as it allows for server-side rendering, making these applications better with search engines, as well as having better first load speed. React, however, is a better choice for web applications that allow for mutating data, as despite its lack of server-side rendering and slower first load, it allows for implementing a frontend cache which can be easily updated after mutating data, whereas applications built with Next.js need to refetch all the displayed data, even if some of it might not have changed. These applications are usually protected by authentication as well, so server-side rendering and first load speed are not of such importance.

• Ključne riječi: React.js; Next.js; Renderiranje na poslužitelju; Renderiranje na klijentu; Radni okvir; Knjižnica
• Ključne riječi (engleski): React.js; Next.js; Server-side rendering; Client-side rendering; Framework; Library
• Jezik: hrvatski
• URN:NBN: urn:nbn:hr:168:981135
• Studijski program: Naziv: Računarstvo; Vrsta studija: sveučilišni; Stupanj studija: preddiplomski; Akademski / stručni naziv: sveučilišni/a prvostupnik/ prvostupnica (baccalaureus/baccalaurea) inženjer/inženjerka računarstva (univ.bacc.ing.comp.)
• Vrsta resursa: Tekst
• Način izrade datoteke: Izvorno digitalna
• Prava pristupa: Zatvoreni pristup
• Datum i vrijeme pohrane: 2023-07-13 10:29:59