reactjs - Koja je razlika između Next.js i Create React App?
Pokušavam shvatiti razliku između Next.js-a i Create React App (CRA). Znam da su oba tu da nam olakšaju život prilikom razvoja naših front-end aplikacija koristeći React.
Nakon što sam istražio nekoliko članaka na Googleu, otkrio sam da je glavna razlika
Next.js pruža renderiranje na strani poslužitelja (SSR), dok Create React App pruža renderiranje na strani klijenta (CSR), a SSR poboljšava performanse učitavanja aplikacije.
A što je s drugim parametrima s aspekta razvoja, poput sljedećih?
Održivost i skalabilnost web aplikacije razvijene s Next.js ili CRA
Podrška za TypeScript i React hookove/Redux
Je li to pogrešno uspoređivanje?
Odgovor #1
Koristio sam i NextJs i CRA. Oba ova okvira mogu se koristiti za brzo pokretanje i pružaju dobro iskustvo za programere. Međutim, oba imaju situacije u kojima jedan od njih bolje dolazi do izražaja. Pokušat ću ih usporediti na temelju nekih od ovih čimbenika. Slobodno predložite izmjene s dodatnim točkama ili komentarima.
Renderiranje na strani poslužitelja
| CRA | Next.js |
|---|---|
| CRA ne podržava SSR odmah iz kutije. Međutim, i dalje ga možete konfigurirati. Samo je potrebno više truda za postavljanje SSR-a s vašim preferiranim serverom i konfiguracijom. Razvojni tim trenutno nema planove za podršku ovome u bliskoj budućnosti. Predlažu korištenje drugih alata za ovu namjenu. | NextJs ima različite tipove za SSR. Podržava SSR iz kutije. * Statička generacija: dohvaćanje podataka u vrijeme izgradnje. Ovo najbolje radi za slučajeve poput blogova ili statičkih web stranica * Rendanje na strani poslužitelja: dohvaćanje podataka i renderiranje za svaki zahtjev. To morate napraviti kada trebate poslužiti različit prikaz različitim korisnicima. |
Konfigurabilnost
Mislim da je ovo točka gdje su ti alati vrlo različiti i vaša odluka može ovisiti o ovom faktoru
| CRA | Next.js |
|---|---|
| Create React App vam ne ostavlja puno prostora za konfiguraciju. Konfiguracije poput webpack konfiguracije ne mogu se mijenjati osim ako ne odmaknete od standardnog CRA načina (eject, rescripts, rewired, craco). U biti, morate koristiti ono što je konfigurirano u react-scripts koji je srž CRA. | Gotovo sve je konfigurabilno. Ako provjerite primjere NextJs predložaka, možete vidjeti datoteke poput babelrc, jest.config, eslintrc itd. koje možete konfigurirati. |
Održivost
| CRA | Next.js |
|---|---|
| CRA ima vrlo izražena mišljenja. Ako pratite ažuriranja izdanja CRA, nije teško održavati ga. | NextJs je također dobro održavan. Objavljuju redovita ažuriranja. |
Typescript
| CRA | Next.js |
|---|---|
Podržava odmah po instalaciji. Možete inicijalizirati CRA aplikaciju s TypeScriptom s npx create-react-app my-app --template typescript | Podržava TypeScript odmah. Počnite s konfiguracijama za TypeScript s touch tsconfig.json |
Podrška za Hooks
Najnovija verzija i CRA i NextJs instalira verziju Reacta koja podržava hookove. Također se možete lako nadograditi na najnoviju verziju
Podrška za Redux
Redux je knjižnica koju možete koristiti s oba ova alata.
Odgovor #2
Create React App je samo alat za stvaranje React projekata koji vam pomaže da brzo postavite svoj React projekt. Nakon pokretanja CRA skripte npx create-react-app <appname> dobit ćete lijepu i čistu aplikaciju s jednom stranicom koju možete pokrenuti. Ispod haube dobivate i stvari poput babel, eslint, jest, webpack već postavljene, što je zaista prikladan način za početak razvoja u Reactu. A u slučaju da vam treba više kontrole nad konfiguracijom tih alata, još uvijek možete koristiti npm run eject.
Next.js, s druge strane, je okvir temeljen na Reactu za izradu Node.js aplikacija na strani poslužitelja. To znači da ćete koristiti istu logiku orijentiranu na komponente za izradu stranica i iskoristiti Next.js sustav usmjeravanja za navigaciju između stranica. Renderiranje na strani poslužitelja omogućit će da vrijeme učitavanja bude više raspoređeno, tako da će percipirana izvedba vjerojatno biti bolja. Redux se također može koristiti, ali bit će potrebno nekoliko dodatnih koraka da bi pravilno funkcionirao (pogledajte https://github.com/kirill-konshin/next-redux-wrapper)
Što god odabrali, na kraju će to biti React kodiranje. Komponente, JSX, Podrška za TypeScript, React hooks i svi ostali osnovni aspekti Reacta bit će podržani u svakom slučaju. Stoga možete očekivati sličnu razinu održivosti. S druge strane, skalabilnost ovisi o vašem izboru: ako odaberete Next.js, aplikaciju ćete hostati na serverskoj infrastrukturi koja bi trebala biti dimenzionirana prema vašoj publici, dok React bundle kreiran s CRA-om jednostavno treba biti statički hostan negdje.
Odgovor #3
Ukratko
Najveća razlika je svrha oba projekta. NextJS: JAM Stack ili generator statičkih stranica. Create React App: službeno podržani način za stvaranje jednoplanskih React aplikacija.
Objašnjenje:
Ova enigma vrijedi za mnoge open-source projekte. Izgledaju kao alternative jedan drugom, ali imaju ključne razlike. Na primjer, u ovom slučaju, iako oba projekta koriste ReactJS kao front-end i proizvode web aplikacije, problemi koje rješavaju su vrlo različiti. Postoje neki preklapajući elementi poput tema/malih predložaka u js. ali razvoj i budući rad će biti usmjeren na unaprjeđenje projekta kako bi bolje pomogao u rješavanju njihovog problematičnog zadatka.
tj. NextJS će pokušati uključiti ako postoje nove značajke Markdowna koje su razvijene, što neće biti slučaj u CreateReactApps.
Prijedlog.
Iz vašeg pitanja čini se da tražite ove projekte za razvoj React Native aplikacija. Zato bih preporučio da koristite Create React App.
vaša usporedba trebala bi se prvenstveno temeljiti na tome odgovara li ovaj projekt problemu koji rješavam. zatim usporedite. Održavanje, skalabilnost, podrška za Typescript i React Hooks/Redux.
U slučaju da treba više informacija, slobodno komentirajte.