కొత్త React ప్రాజెక్ట్‌ను ప్రారంభించండి

మీరు ఫ్రేమ్‌వర్క్ లేకుండా కూడా React ని ఉపయోగించవచ్చు—మీ పేజీలో కొంత భాగం కోసం మీరు React ని ఇలాగే ఉపయోగించాలి. అయితే, మీరు పూర్తిగా React తో కొత్త యాప్ లేదా సైట్‌ని బిల్డ్ చేస్తున్నట్లైతే, ఫ్రేమ్‌వర్క్‌ని ఉపయోగించమని మేము సిఫార్సు చేస్తున్నాము.

ఎందుకో ఇపుడు చూదాం.

మొదట్లో మీకు రౌటింగ్ లేదా డేటా ఫెట్చింగ్ అవసరం లేకపోయినా, మీరు వాటి కోసం కొన్ని లైబ్రరీలను వాడవలసి ఉంటుంది. ప్రతి కొత్త ఫీచర్తో మీ JavaScript బండిల్ పెరుగుతున్నందున, ప్రతి రూట్‌కి ఇండివిడ్యుఅల్గా కోడ్‌ను ఎలా స్ప్లిట్ చేయాలో మీరు గుర్తించాల్సి ఉంటుంది. మీ డేటా ఫెట్చింగ్ అవసరాలు మరింత క్లిష్టంగా మారుతున్నందున, మీరు మీ యాప్ చాలా నెమ్మదిగా ఉండేలా చేసే సర్వర్-క్లయింట్ నెట్‌వర్క్ జలపాతాలను ఎదుర్కొనే అవకాశం ఉంది. మీ ఆడియన్స్ లో ఎక్కువ మంది స్లో నెట్‌వర్క్ కండిషన్స్ మరియు లో-ఎండ్ డివైసెస్ ను వాడే యూజర్స్ ఉన్నందున, మీరు ఎర్లీగా కంటెంట్‌ని డిస్ప్లే చేయడానికి మీ కంపోనెంట్లనుండి నుండి HTML ని జెనరేట్ చేయాల్సి ఉంటుంది - ఇది సర్వర్‌లో చేయచ్చు లేదా బిల్డ్ టైంలో చేయచ్చు. సర్వర్‌లో లేదా బిల్డ్ టైంలో మీ కోడ్‌లో కొంత భాగాన్ని రన్ చేయడానికి మీ సెటప్‌ను మార్చడం చాలా క్లిష్టంగా ఉంటుంది.

ఈ సమస్యలు React-స్పెసిఫిక్ కావు. అందుకే Svelte కి SvelteKit ఉంది, Vue కి Nuxt ఉంది మరియు మొదలైనవి. ఈ సమస్యలను మీ స్వంతంగా పరిష్కరించడానికి, మీరు మీ రౌటర్‌తో మరియు మీ డేటా ఫెట్చింగ్ లైబ్రరీతో మీ బండ్లర్‌ను ఇంటిగ్రేట్ చేయాలి. ఇనీటియల్ సెటప్ పని చేయడం కష్టం కాదు, కానీ కాలక్రమేణా పెరుగుతున్నప్పటికీ త్వరగా లోడ్ అయ్యే యాప్‌ను తయారు చేయడంలో చాలా సూక్ష్మబేధాలు ఉన్నాయి. మీరు కనీస మొత్తంలో యాప్ కోడ్‌ని పంపాలనుకుంటున్నారు, అయితే పేజీకి అవసరమైన ఏదైనా డేటాతో పారలెల్గా ఒకే క్లయింట్-సర్వర్ రౌండ్‌ట్రిప్‌లో అలా చేయండి. ప్రోగ్రెసివ్ ఏంహాన్సమెంట్ ను సపోర్ట్ చేయడానికి, మీ JavaScript కోడ్ రన్ కావడానికి ముందే పేజీ ఇంటరాక్టివ్‌గా ఉండాలని మీరు కోరుకోవచ్చు. మీరు మీ మార్కెటింగ్ పేజీల కోసం ఫుల్లీ స్టాటిక్ HTML ఫైల్‌ల ఫోల్డర్‌ను జెనరేట్ చేయాలనుకోవచ్చు, వాటిని ఎక్కడైనా హోస్ట్ చేయచ్చు మరియు వాటిలో JavaScript ని డిసేబుల్‌ చేసినప్పటికీ పని చేస్తాయి. ఈ ఫీచర్లను మీరే బిల్డ్ చేయడానికి చాలా కృషి అవసరం.

ఈ పేజీలోని React ఫ్రేమ్‌వర్క్‌లు మీ వైపు నుండి ఎటువంటి అదనపు సహాయం లేకుండా డిఫాల్ట్‌గా ఇలాంటి సమస్యలను పరిష్కరిస్తాయి. ఇవి చాలా నెమ్మదిగా ప్రారంభించి, ఆపై మీ అవసరాలకు అనుగుణంగా మీ యాప్‌ను స్కేల్ చేయడానికి అనుమతిస్తాయి. ప్రతి React ఫ్రేమ్‌వర్క్‌కు ఒక కమ్యూనిటీ ఉంటుంది, కాబట్టి మీ ప్రశ్నలకు సమాధానాలు కనుగొనడం మరియు టూల్స్ ని అప్‌గ్రేడ్ చేయడం సులభం. ఫ్రేమ్‌వర్క్‌లు మీ కోడ్‌కు స్ట్రక్చర్ ని అందిస్తాయి, మీకు మరియు ఇతరులకు విభిన్న ప్రాజెక్ట్‌ల మధ్య కాంటెక్స్ట్ మరియు స్కిల్స్ ను రిటైన్ చేసుకోవడంలో సహాయపడతాయి. మరోవైపు, మీరు కస్టమ్ సెటప్ చేస్తే, మీరు ఇకపై సపోర్ట్ చేయని డిపెండెన్సీ వెర్షన్‌లతో చిక్కుకుపోయే అవకాశం ఉంది మరియు తప్పనిసరిగా మీ స్వంత ఫ్రేమ్‌వర్క్‌ను సృష్టించే అవకాశం ఉంది. అయితే, అటువంటి ఫ్రేమ్‌వర్క్‌లకు కమ్యూనిటీ లేదా అప్‌గ్రేడ్ పాత్ లేదు (మరియు అవి గతంలో సృష్టించబడిన వాటికి దగ్గరగా ఉన్నప్పటికీ, అవి ఇప్పటికీ అస్థిరంగా డిజైన్ చేయబడ్డాయి).

మీరు ఇప్పటికీ దీనితో సంతృప్తి చెందకపోతే, లేదా ఫ్రేమ్‌వర్క్ అందించలేని ప్రత్యేక పరిమితులను మీ యాప్ కలిగి ఉంటే మరియు మీ స్వంత కస్టమ్ సెటప్‌ని సృష్టించాలనుకుంటే, మేము అలా చేయకుండా మిమ్మల్ని ఆపము! npm నుండి react మరియు react-dom ను ఉపయోగించండి, Vite లేదా Parcel వంటి బండ్లర్‌తో మీ కస్టమ్ బిల్డ్ ప్రాసెస్ను సెటప్ చేయండి మరియు రూటింగ్, స్టాటిక్ జనరేషన్ లేదా సర్వర్-సైడ్ రెండరింగ్ మరియు ఇలాంటి వాటి కోసం మీకు అవసరమైన ఇతర టూల్స్ ను జోడించండి.

Next.js యొక్క App Router బండ్లర్ అఫీషియల్ React Server Components స్పెసిఫికేషన్‌ ను పూర్తిగా ఇంప్లీమెంట్ చేస్తుంది. ఇది బిల్డ్-టైమ్, సర్వర్-ఓన్లీ మరియు ఇంటరాక్టివ్ కాంపోనెంట్‌లను ఒకే React ట్రీలో కలిపి వాడడానికి మిమ్మల్ని అనుమతిస్తుంది.

ఉదాహరణకు, మీరు ఒక సర్వర్-ఓన్లీ React కాంపోనెంట్‌ను డేటాబేస్ నుండి లేదా ఫైల్ నుండి రీడ్ చేసే async ఫంక్షన్‌గా వ్రాయవచ్చు. అప్పుడు మీరు దాని నుండి మీ ఇంటరాక్టివ్ కంపోనెంట్లకు డేటాను పంపవచ్చు:

// ఈ కంపోనెంట్ సర్వర్‌లో (లేదా బిల్డ్ సమయంలో) *మాత్రమే* రన్ అవుతుంది.
async function Talks({ confId }) {
  // 1. మీరు సర్వర్‌లో ఉన్నారు, కాబట్టి మీరు మీ డేటా లేయర్‌తో కమ్యూనికేట్ అవ్వచ్చు. API ఎండ్ పాయింట్ అవసరం లేదు.
  const talks = await db.Talks.findAll({ confId });

  // 2. ఎంత రెండరింగ్ లాజిక్ ని ఐనా యాడ్ చేయండి. ఇది మీ JavaScript బండిల్‌ను పెద్దదిగా చేయదు.
  const videos = talks.map(talk => talk.video);

  // 3. బ్రౌజర్‌లో రన్ అయ్యే కంపోనెంట్లకు డేటాను పంపండి.
  return <SearchableVideoList videos={videos} />;
}

Next.js యొక్క App Router సస్పెన్స్ (Suspense) తో డేటా ఫెట్చింగ్ చేయడానికి సపోర్ట్ ఇస్తుంది. ఇది మీ React ట్రీలో డైరెక్టుగా UI లోని వివిధ భాగాల కోసం లోడింగ్ స్టేట్ని (ఉదాహరణకు స్కెలిటన్ ప్లేస్‌హోల్డర్) స్పెసిఫ్య్ చేయడానికి మిమ్మల్ని అనుమతిస్తుంది:

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

సర్వర్ కంపోనెంట్స్ మరియు సస్పెన్స్ React యొక్క ఫీచర్లు, Next.js వి కావు. అయినప్పటికీ, వాటిని ఫ్రేమ్‌వర్క్ లెవెల్ లో అడాప్ట్ చేసుకోవడానికి కొనుగోలు మరియు నాన్-ట్రివియల్ ఇంప్లిమెంటేషన్ వర్క్ అవసరం. ప్రస్తుతానికి, Next.js యొక్క App Router అత్యంత పూర్తి ఇంప్లిమెంటేషన్. తదుపరి జనరేషన్ ఫ్రేమ్‌వర్క్‌లలో ఈ ఫీచర్‌లను సులభంగా అమలు చేయడానికి React బృందం బండ్లర్ డెవలపర్‌లతో కలిసి పని చేస్తోంది.