మేము నెమ్మదైన స్పందనలను 80% ఎలా తగ్గించాము

Subito అనేది ఇటలీలోని ఒక ప్రముఖ మార్కెట్‌ప్లేస్. మేము ప్రతి నిమిషానికి వేల సంఖ్యలో రిక్వెస్ట్‌లను నిర్వహిస్తాము. మా యాడ్ డీటెయిల్ పేజీ SEO మరియు రెవెన్యూకి చాలా కీలకం.

మేము ఈ పేజీని Next.js Pages Router నుండి App Routerకి మార్చాము. దీని కోసం మేము మా ప్రొడక్ట్ పనులను నిలిపివేయలేదు. మేము చిన్న చిన్న దశల్లో ఈ మార్పును చేపట్టాము.

మేము దీనిని ఎలా చేశామో ఇక్కడ చూడండి.

మా విధానం

మేము ఇన్‌క్రిమెంటల్ స్ట్రాటజీని ఉపయోగించాము. పాత Pages Routerతో పాటు App Router ట్రీని కూడా జోడించాము. దీనివల్ల మేము మైగ్రేషన్ చేస్తున్న సమయంలోనే కొత్త ఫీచర్లను విడుదల చేయగలిగాము.

డేటా ఫెచింగ్ కోసం మేము Server Componentsను ఉపయోగించాము. దీనివల్ల డేటాను అనేక లేయర్‌ల ద్వారా పంపాల్సిన అవసరం లేకుండా పోయింది. మేము ఒక Data Access Layerను కూడా సృష్టించాము. దీనివల్ల ప్రతి రిక్వెస్ట్‌కు డేటాను ఒకే ఒక్కసారి ఫెచ్ చేసేలా చూసుకున్నాము.

HTML స్ట్రీమింగ్‌ను ఎనేబుల్ చేయడానికి మేము Suspense మరియు use() హుక్‌ను ఉపయోగించాము. ఇది డేటా లోడ్ అవుతున్నప్పుడు ఒక స్కెలిటన్ స్క్రీన్‌ను చూపిస్తుంది. దీనివల్ల యూజర్‌కు పేజీ వేగంగా కనిపిస్తుంది.

సవాళ్లు

సమస్య 1: HTTP 410 Gone ఒక పేజీ శాశ్వతంగా తొలగించబడినప్పుడు సెర్చ్ ఇంజన్‌లకు 410 స్టేటస్ అవసరం. App Routerలో దీనిని పంపడానికి ఇన్-బిల్ట్ పద్ధతి లేదు. మేము మా Express సర్వర్‌ని ఉపయోగించి దీనిని పరిష్కరించాము. సర్వర్ రెస్పాన్స్‌ను ఇంటర్‌సెప్ట్

Next.js App Routerకి మైగ్రేట్ చేయడం ద్వారా మేము స్లో రెస్పాన్స్‌లను 80% ఎలా తగ్గించాము

మా అప్లికేషన్ యొక్క రెస్పాన్స్ టైమ్స్ (response times) చాలా నెమ్మదిగా ఉండటం వల్ల మా యూజర్ ఎక్స్‌పీరియన్స్ దెబ్బతింటోంది. ఈ సమస్యను పరిష్కరించడానికి, మేము మా అప్లికేషన్‌ను Next.js Pages Router నుండి App Routerకి మైగ్రేట్ చేయాలని నిర్ణయించుకున్నాము. ఈ ప్రక్రియ ద్వారా మేము స్లో రెస్పాన్స్‌లను 80% వరకు ఎలా తగ్గించామో ఈ ఆర్టికల్‌లో వివరిస్తాము.

సమస్య (The Problem)

మా పాత Pages Router ఆధారిత అప్లికేషన్‌లో కొన్ని ప్రధాన సమస్యలు ఉండేవి:

పరిష్కారం: Next.js App Router (The Solution)

Next.js App Routerని ఉపయోగించడం ద్వారా మేము ఈ క్రింది కీలకమైన మార్పులు చేశాము:

1. React Server Components (RSC)

మేము మా కాంపోనెంట్స్‌ను React Server Componentsగా మార్చాము. దీనివల్ల డేటా ఫెచింగ్ నేరుగా సర్వర్ సైడ్‌లోనే జరుగుతుంది. దీనివల్ల క్లయింట్‌కు పంపాల్సిన JavaScript పరిమాణం గణనీయంగా తగ్గింది, తద్వారా పేజీలు చాలా వేగంగా లోడ్ అవుతున్నాయి.

2. Streaming మరియు Suspense

పేజీ మొత్తం లోడ్ అయ్యే వరకు యూజర్ వేచి చూడకుండా, అందుబాటులో ఉన్న భాగాన్ని వెంటనే చూపించడానికి మేము loading.js మరియు Suspense ఫీచర్లను ఉపయోగించి స్ట్రీమింగ్ (streaming) విధానాన్ని అమలు చేశాము. దీనివల్ల పర్సీవ్డ్ పెర్ఫార్మెన్స్ (perceived performance) గణనీయంగా మెరుగుపడింది.

ఫలితాలు (Results)

ఈ మైగ్రేషన్ తర్వాత మా అప్లికేషన్ పనితీరులో అద్భుతమైన మార్పులు వచ్చాయి:

మెట్రిక్ (Metric) మార్పు (Change)
స్లో రెస్పాన్స్‌లు (Slow Responses) 80% తగ్గాయి
క్లయింట్ సైడ్ JavaScript బండిల్ గణనీయంగా తగ్గింది
TTFB (Time to First Byte) మెరుగుపడింది

ముగింపు (Conclusion)

Next.js App Routerకి మైగ్రేట్ చేయడం వల్ల మా అప్లికేషన్ వేగం మరియు యూజర్ ఎక్స్‌పీరియన్స్ గణనీయంగా పెరిగాయి. మీరు కూడా మీ అప్లికేషన్ పనితీరును మెరుగుపరచాలనుకుంటే, ఈ మైగ్రేషన్ ఒక శక్తివంతమైన మార్గం.