మీరు గత కొన్ని సంవత్సరాలుగా వివిధ meta-frameworks మధ్య మారుతూ ఉంటే, SvelteKit 2 మీకు ఉపశమనం మరియు అనుమానం కలిగించే వింత మిశ్రమంగా అనిపిస్తుంది. ఉపశమనం, ఎందుకంటే ఇది సంక్లిష్టతను పెంచడానికి బదులుగా నిజంగా తగ్గిస్తుంది. అనుమానం, ఎందుకంటే ఏదో తప్పు జరుగుతుందని మీరు ఎదురుచూస్తూనే ఉంటారు. కానీ అది ఎప్పుడూ జరగదు. Svelte 5తో కలిపి, ఈ stack 2026లో ఒక full-stack applicationను రూపొందించడానికి అత్యంత ఉత్పాదకమైన మార్గాలలో ఒకటి, మరియు డెవలపర్ ఎక్స్‌పీరియన్స్ (developer experience) గణాంకాలు కూడా దీనిని ధృవీకరిస్తున్నాయి. Svelte 4 ఉత్పత్తి చేసిన దానికంటే బండిల్స్ (Bundles) సుమారు 35% తక్కువ పరిమాణంలో వస్తాయి. Routing, server functions, మరియు authentication patterns అన్నీ మొదటి శ్రేణి అంశాలు (first-class citizens), ఇవి మీరు విడివిడిగా అతికించుకోవాల్సిన ప్లగిన్‌లు కావు.

runes రియాక్టివిటీని స్పష్టంగా చేస్తాయి

అతిపెద్ద మార్పు Svelte 5 యొక్క runes ద్వారా వస్తుంది. Svelte యొక్క మునుపటి వెర్షన్లు డిపెండెన్సీలను ట్రాక్ చేయడానికి $: లేబుల్ మరియు చాలా compiler magic ఉపయోగించేవి. అది పనిచేసేది, కానీ ఏదైనా విఫలమైనప్పుడు, మీరు కనిపించని వైర్లను (invisible wires) డీబగ్ చేస్తూ ఉండేవారు. Runes ఆ మ్యాజిక్‌ను స్పష్టమైన ఫంక్షన్‌లతో భర్తీ చేస్తాయి. మీరు దేనిని ట్రాక్ చేయాలో కంపైలర్‌కు ఖచ్చితంగా చెబితే, అది వింటుంది.

మీరు తెలుసుకోవలసిన విషయాలు ఇక్కడ ఉన్నాయి:

  • $state రియాక్టివ్ వేరియబుల్స్‌ను హ్యాండిల్ చేస్తుంది. ఏదైనా విలువను $state() లో ఉంచితే, దాన్ని ట్రాక్ చేయాలని కంపైలర్‌కు తెలుస్తుంది.
  • $derived ఇతర state నుండి విలువలను లెక్కిస్తుంది. మీకు ఫిల్టర్ చేసిన లిస్ట్ లేదా ఫార్మాట్ చేసిన టోటల్ కావాలా? $derived ఉపయోగించండి. $effect నుండి దీని ప్రధాన తేడా ఏమిటంటే, $derived అనేది విలువల (values) కోసం, పనుల (actions) కోసం కాదు.
  • $effect సైడ్ ఎఫెక్ట్స్ (side effects) రన్ చేస్తుంది. డాక్యుమెంట్ టైటిల్ అప్‌డేట్‌లు, మాన్యువల్ DOM కొలతలు లేదా క్లీనప్ అవసరమయ్యే టైమర్‌లను ఇలా అనుకోవచ్చు. ఇది DOM కమిట్ అయిన తర్వాత రన్ అవుతుంది, ఇది ఒక lifecycle hook లాగా ఉంటుంది కానీ నిర్దిష్ట రియాక్టివ్ డిపెండెన్సీలకు అనుసంధానించబడి ఉంటుంది.
  • $props కాంపోనెంట్స్‌లో డేటాను స్వీకరించడానికి పాత export let పద్ధతిని భర్తీ చేస్తుంది. ఇది మరింత స్పష్టంగా ఉంటుంది మరియు TypeScriptతో మెరుగ్గా పనిచేస్తుంది.

ఈ మోడల్ ఆచరణలో బాగా ఉపయోగపడుతుంది. మీరు దేనిని మార్క్ చేస్తారో కంపైలర్ దానిని మాత్రమే ట్రాక్ చేస్తుంది కాబట్టి, డెడ్ కోడ్ (dead code) అలాగే ఉంటుంది. ఒక వేరియబుల్ ఎందుకు అప్‌డేట్ అయిందో అని మీరు ఆలోచించాల్సిన అవసరం ఉండదు, మరియు మీరు మీ స్వంత స్పష్టమైన సూచనలను నమ్మడం ప్రారంభిస్తారు.

కాన్ఫిగరేషన్ ద్వారా కాదు, ఫోల్డర్‌ల ద్వారా రూటింగ్

SvelteKit రూటింగ్ కోసం మీ ఫైల్ సిస్టమ్‌ను ఉపయోగిస్తుంది. నిర్వహించడానికి ప్రత్యేకమైన రూటర్ ఫైల్ ఉండదు. ఒక డైరెక్టరీలో +page.svelte ఫైల్‌ను ఉంచితే, ఆ డైరెక్టరీ లైవ్ రూట్ (live route) అవుతుంది.

+layout.svelte ద్వారా ఆ రూట్‌లను షేర్డ్ UI (Shared UI) చుట్టూ ఉంచుతుంది. మీ రూట్ డైరెక్టరీలో ఒక దానిని ఉంచితే, ప్రతి చైల్డ్ రూట్ దానిని పొందుతుంది. ట్రీలో లోతుగా ఒక దానిని ఉంచితే, ఆ విభాగం మాత్రమే ఆ వ్యాపర్‌ను పొందుతుంది.

సర్వర్-సైడ్ లాజిక్ +page.server.ts లో ఉంటుంది. ఇది మీ పేజీ రెండర్ కావడానికి ముందే రన్ అవుతుంది, కాబట్టి డేటాబేస్ క్వెరీ చేయడం, కుక్కీని వాలిడేట్ చేయడం లేదా అథెంటికేట్ కాని యూజర్‌ను తిరస్కరించడం వంటివి ఇక్కడ చేస్తారు. మీ load ఫంక్షన్ నుండి డేటా టైప్స్ ఆటోమేటిక్‌గా మీ పేజీ కాంపోనెంట్‌లోకి వస్తాయి, అంటే మీరు మాన్యువల్ ఇంటర్‌ఫేస్‌లను రాయకుండానే మీ డేటా టైప్ చేయబడుతుంది.

రా (Raw) API ఎండ్‌పాయింట్లు +server.ts ఫైల్‌లలో ఉంటాయి. ఇవి స్టాండర్డ్ HTTP హ్యాండ్లర్‌లను—GET, POST, PUT, DELETE—ఎక్స్‌పోర్ట్ చేస్తాయి, కాబట్టి మీ పేజీలతో పాటు ఒక REST బ్యాక్ ఎండ్ నిర్మించడం సహజంగా అనిపిస్తుంది.

ఒక అండర్ రేటెడ్ ఫీచర్: గ్రూప్ రూట్స్ (group routes). ఫోల్డర్ పేరును బ్రాకెట్లలో, ఉదాహరణకు (auth) అని ఉంచడం ద్వారా, మీరు URLలో కొత్త సెగ్మెంట్‌ను చేర్చకుండా షేర్డ్ లేఅవుట్‌ను సృష్టించవచ్చు. ఇది /auth/login మరియు /auth/signup కాకుండా, /login మరియు /signup వద్ద ఉండే లాగిన్ మరియు సైన్అప్ పేజీల కోసం పర్ఫెక్ట్.

డేటా, సెక్యూరిటీ మరియు ప్రోగ్రెసివ్ ఎన్‌హాన్స్‌మెంట్

ఆధునిక ఫ్రేమ్‌వర్క్‌లు ఫుల్-స్టాక్ గురించి మాట్లాడటానికి ఇష్టపడతాయి, కానీ చాలా వరకు ఆథ్ చెక్స్ (auth checks) లేదా ఫామ్ లాజిక్‌ను ఎక్కడ ఉంచాలో చెప్పవు. SvelteKit మీకు స్పష్టమైన హుక్స్ (hooks) ఇస్తుంది.

డేటా ఫెచింగ్ కోసం +page.server.ts ఉపయోగించండి. అక్కడ ఉండే load ఫంక్షన్ కేవలం సర్వర్‌లోనే రన్ అవుతుంది, కాబట్టి మీ డేటాబేస్ క్రెడెన్షియల్స్ బ్రౌజర్‌కు ఎప్పుడూ తెలియవు. SvelteKit మీ load రిటర్న్ వాల్యూస్ నుండి టైప్స్‌ను జనరేట్ చేస్తుంది, కాబట్టి మీ ఫ్రంటెండ్ ఖచ్చితంగా ఉంటుంది.

మొత్తం అప్లికేషన్‌ను నియంత్రించడానికి (gate) hooks.server.ts ఉపయోగించండి. ఇది ప్రతి రిక్వెస్ట్‌పై రన్ అవుతుంది, కాబట్టి సెషన్లను వెరిఫై చేయడానికి, JWT ఎక్స్‌పైరీని తనిఖీ చేయడానికి లేదా వచ్చే ఈవెంట్‌లకు యూజర్ కాంటెక్స్ట్‌ను జోడించడానికి ఇది సరైన స్థలం.

మ్యుటేషన్ల (mutations) కోసం, ఫామ్ యాక్షన్స్ ఉపయోగించండి. విడివిడిగా ఒక API ఎండ్‌పాయింట్‌ను కనెక్ట్ చేసి JSONని హ్యాండిల్ చేసే బదులు, మీరు +page.server.ts లోపల ఒక యాక్షన్‌ను నిర్వచించవచ్చు. ఇక్కడి గొప్పతనం ప్రోగ్రెసివ్ ఎన్‌హాన్స్‌మెంట్ (progressive enhancement). ఒకవేళ జావాస్క్రిప్ట్ లోడ్ అవ్వకపోయినా—లేదా యూజర్ దాన్ని డిసేబుల్ చేసినా—ఫామ్ ఇప్పటికీ సర్వర్ యాక్షన్‌కు సబ్మిట్ అవుతుంది మరియు పేజీ ఫలితంతో రీ-రెండర్ అవుతుంది. జావాస్క్రిప్ట్ అందుబాటులో ఉంటే, SvelteKit పూర్తి రీలోడ్ లేకుండానే అనుభవాన్ని మెరుగుపరుస్తుంది. మీరు ఒకే కోడ్ నుండి రెసిలెన్స్ మరియు పాలిష్‌ను పొందవచ్చు.

గుర్తుంచుకోవలసిన ఒక నియమం: మీ గణనలను (math) $derived లో చేయండి, $effect లో కాదు. విలువలను లెక్కించడానికి $effect ఉపయోగించడం వల్ల ట్రాక్ చేయడం కష్టమైన అప్‌డేట్ లూప్‌లు (update loops) ఏర్పడవచ్చు. $effect ను నిజమైన సైడ్ ఎఫెక్ట్స్ కోసం మాత్రమే ఉంచండి, మరియు మీ కంప్యూటెడ్ స్టేట్‌ను $derived కి వదిలేయండి.

SvelteKit వర్సెస్ Next.js

రెండు ఫ్రేమ్‌వర్క్‌లు ప్రొడక్షన్ అప్లికేషన్‌లను విడుదల చేయగలవు, కానీ వాటి మధ్య లాభనష్టాలు (trade-offs) నిజంగా ఉంటాయి.

బండిల్ సైజ్ (Bundle size) విషయంలో SvelteKit మెరుగ్గా ఉంటుంది. Svelte కాంపోనెంట్లను vanilla JavaScriptగా కంపైల్ చేస్తుంది మరియు Virtual DOMను పూర్తిగా వదిలేస్తుంది, కాబట్టి runtime footprint చిన్నదిగా ఉంటుంది. Next.js తనతో పాటు React యొక్క reconciliation engineను కలిగి ఉంటుంది.

రియాక్టివిటీ (Reactivity) కూడా భిన్నంగా ఉంటుంది. SvelteKit runesలను compile timeలో పరిష్కరిస్తుంది. బ్రౌజర్ కేవలం సాధారణ అప్‌డేట్‌లను మాత్రమే అందుకుంటుంది. Next.js అనేది React యొక్క runtime hooks మరియు reconciliation పై ఆధారపడి ఉంటుంది, అంటే క్లయింట్ వైపు ఎక్కువ పని జరుగుతుంది.

SvelteKitతో ఆన్‌బోర్డింగ్ (Onboarding) సులభంగా ఉంటుంది. దీని మెంటల్ మోడల్ చిన్నది. రీ-రెండర్‌లను (re-renders) నివారించడానికి మీరు useEffect dependency arrays లేదా memoization పజిల్స్‌తో సతమతమవ్వాల్సిన అవసరం లేదు. TypeScript ఇంటిగ్రేషన్ గురించి కూడా ప్రస్తావించాల్సిందే. రెండు ఫ్రేమ్‌వర్క్‌లు