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

undergraduate thesis

• Title (english): Comparing React JavaScript library and Next.js web framework for developing web applications
• Author: Tin Prvčić
• Mentor: Alan Jović (mentor)
• Committee member: Alan Jović (predsjednik povjerenstva)
• Committee member: Nikolina Frid (član povjerenstva)
• Committee member: Adrian Satja Kurdija (član povjerenstva)
• Granter: University of Zagreb; Faculty of Electrical Engineering and Computing; Zagreb
• Defense date and country: 2023-06-29, Croatia
• Scientific / art field, discipline and subdiscipline: TECHNICAL SCIENCES; Computing

Abstract

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.

Abstract (english)

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.

• Keywords: React.js; Next.js; Renderiranje na poslužitelju; Renderiranje na klijentu; Radni okvir; Knjižnica
• Keywords (english): React.js; Next.js; Server-side rendering; Client-side rendering; Framework; Library
• Language: croatian
• URN:NBN: urn:nbn:hr:168:981135
• Study programme: Title: Computing; Study programme type: university; Study level: undergraduate; Academic / professional title: sveučilišni/a prvostupnik/ prvostupnica (baccalaureus/baccalaurea) inženjer/inženjerka računarstva (sveučilišni/a prvostupnik/ prvostupnica (baccalaureus/baccalaurea) inženjer/inženjerka računarstva)
• Type of resource: Text
• File origin: Born digital
• Access conditions: Closed access
• Created on: 2023-07-13 10:29:59