Započnite novi React projekat

Naravno da možete koristiti React bez framework-a—kako biste koristili React za deo vaše stranice. Međutim, ako kreirate novu aplikaciju ili sajt koristeći samo React, preporučujemo da koristite framework.

Evo i zašto.

Čak i ako vam ne treba rutiranje ili fetch podataka na početku, verovatno ćete želeti da dodate neke biblioteke za njih. Kako vaš JavaScript bundle raste sa svakom novom funkcionalnošću, možda ćete morati da podelite kod za svaku rutu pojedinačno. Kako vaše potrebe za fetch podataka postaju složenije, verovatno ćete naići na server-client mrežne vodopade koji čine da vaša aplikacija deluje veoma sporo. Kako vaša publika uključuje više korisnika sa lošim mrežnim uslovima i uređajima niske klase, možda ćete morati da generišete HTML iz vaših komponenti da biste prikazali sadržaj ranije—ili na serveru, ili tokom vremena izgradnje. Menjanje vašeg setup-a da bi se pokrenuo neki od vašeg koda na serveru ili tokom vremena izgradnje može biti veoma komplikovano.

Ovi problemi nisu specifični za React. Zato Svelte ima SvelteKit, Vue ima Nuxt, i tako dalje. Da biste rešili ove probleme sami, moraćete da integrišete vaš bundler sa vašim router-om i sa vašom bibliotekom za fetch podataka. Nije teško napraviti početni setup, ali postoji mnogo suptilnosti u pravljenju aplikacije koja se brzo učitava čak i dok raste tokom vremena. Želećete da pošaljete minimalnu količinu koda aplikacije ali da to uradite u jednom client-server roundtrip-u, paralelno sa bilo kojim podacima potrebnim za stranicu. Verovatno ćete želeti da stranica bude interaktivna pre nego što se vaš JavaScript kod pokrene, da biste podržali progresivno poboljšanje. Možda ćete želeti da generišete folder potpuno statičkih HTML fajlova za vaše marketing stranice koje mogu biti hostovane bilo gde i da i dalje rade sa isključenim JavaScript-om. Izgradnja ovih mogućnosti sami zahteva pravi posao.

React framework-ovi na ovoj stranici rešavaju probleme kao što su ovi automatski, bez dodatnog posla sa vaše strane. Oni vam omogućavaju da počnete veoma jednostavno i da onda skalirate vašu aplikaciju sa vašim potrebama. Svaki React framework ima zajednicu, tako da je lakše naći odgovore na pitanja i nadograditi alate. Framework-ovi takođe daju strukturu vašem kodu, pomažući vam i drugima da zadržite kontekst i veštine između različitih projekata. Nasuprot tome, sa custom setup-om je lakše zaglaviti se na nepodržanim verzijama zavisnosti, i na kraju ćete zapravo kreirati vaš sopstveni framework—iako bez zajednice ili putanju za nadogradnju (i ako je išta kao oni koje smo pravili u prošlosti, više haotično dizajnirani).

Ako i dalje niste ubedjeni, ili vaša aplikacija ima neobične zahteve koji nisu dobro podržani od strane ovih framework-ova i želite da napravite vaš sopstveni custom setup, ne možemo vas zaustaviti—krenite! Uzmite react i react-dom sa npm-a, napravite vaš custom build proces sa bundler-om kao što je Vite ili Parcel, i dodajte druge alate kada vam budu potrebni za rutiranje, statičku generaciju ili server-side rendering, i tako dalje.

Next.js-ov App Router bundler potpuno implementira zvaničnu React Server Components specifikaciju. Ovo vam omogućava da pomešate komponente koje se izvršavaju tokom vremena izgradnje, komponente koje se izvršavaju samo na serveru, i interaktivne komponente u jednom React stablu.

Na primer, možete napisati server-only React komponentu kao async funkciju koja čita iz baze podataka ili iz fajla. Zatim možete proslediti podatke iz nje vašim interaktivnim komponentama:

// Ova komponenta se izvršava *samo* na serveru (ili tokom vremena izgradnje).
async function Talks({ confId }) {

  // 1. Vi ste na serveru, tako da možete da komunicirate sa vašom bazom podataka. API pristupna tačka nije potreban.
  const talks = await db.Talks.findAll({ confId });

  // 2. Dodajte bilo koju količinu rendering logike. To neće učiniti vaš JavaScript bundle većim.
  const videos = talks.map(talk => talk.video);

  // 3. Prosledite podatke komponentama koje će se izvršavati u pretraživaču.
  return <SearchableVideoList videos={videos} />;
}

Router Next.js aplikacije je takođe integrisan sa fetch podataka pomoću Suspense-a. Ovo vam omogućava da specificirate stanje učitavanja (kao što je skeleton placeholder) za različite delove vašeg korisničkog interfejsa direktno u vašem React stablu:

<Suspense fallback={<TalksLoading />}>
  <Talks confId={conf.id} />
</Suspense>

Server Komponente i Suspense su fičeri React-a, a ne Next.js fičeri. Međutim, njihovo usvajanje na nivou framework-a zahteva podršku i ne-trivijalan rad na implementaciji. Trenutno, Next.js App Router je najkompletnija implementacija. React tim sarađuje sa developerima bundler-a da bi ove mogućnosti bile lakše za implementaciju u sledećoj generaciji framework-ova.