Next.js हर रूट पर आपको एक सर्वर देता है, जो वाहन इमेजरी के लिए बिल्कुल सही जगह है। लिस्टिंग को लोड करने के साथ-साथ वाहन को रिज़ॉल्व करें, URL को next/image को दे दें, और ISR को यह तय करने दें कि इसे कितनी बार फिर से चलाया जाए।
किसी क्लाइंट स्टेट को मैनेज करने की ज़रूरत नहीं है और कोई इफेक्ट लिखने की ज़रूरत नहीं है। लिस्टिंग को फेच करने वाला घटक अपने इमेजेज को भी रिज़ॉल्व करता है, और ब्राउज़र को फिनिश्ड मार्कअप मिलता है जिसमें URL पहले से ही प्लेस में है।
चार चरण, जिनमें से एक कॉन्फ़िग फ़ाइल है जिसे आप एक बार संपादित करते हैं और भूल जाते हैं।
npm i vehicleimagery, key को एक environment variable में रखें, और next.config में remotePatterns में हमारी image host जोड़ें।
उसी घटक जो लिस्टिंग को लोड करता है, वह अपने वाहन को रिज़ॉल्व करता है और हर कोण के लिए URL प्राप्त करता है।
URL को स्पष्ट चौड़ाई और ऊंचाई के साथ पास करें। ऑप्टिमाइज़र srcset का प्रबंधन करता है, और फिक्स्ड डाइमेंशन लेआउट शिफ्ट का प्रबंधन करते हैं।
वाहन इमेजरी तब बदलती है जब आपका कैटलॉग बदलता है, हर रिक्वेस्ट के लिए नहीं। घंटों में मापा गया एक रीवैलिडेट विंडो आमतौर पर उदार होता है।
बिना भारी मेहनत के वाहन छवियाँ अपने उत्पाद में लाइए। साफ़ दस्तावेज़ीकरण, खुले SDK और तैयार प्लगइन मिनटों में आपके स्टैक से जुड़ जाते हैं, और हमारा स्टेटस पेज लाइव दिखाता है कि API कैसा चल रहा है।
हमारा CDN छवि को कैश करता है, और आपका ISR कैश रिज़ॉल्यूशन परिणाम को रखता है। दोनों मिलकर यह मतलब है कि एक व्यस्त वाहन विवरण पृष्ठ हजारों विज़िट्स को बिना एक भी कॉल के बिना आपकी सर्वर से बाहर जाने के साथ-साथ सेवा कर सकता है।
सबसे आम गलती यह है कि वाहन इमेजरी को एक क्लाइंट चिंता के रूप में एक फ्रेमवर्क में ट्रीट किया जाए जो आपको एक सर्वर फ्री में देता है। एक कार्ड घटक में एक useEffect विकास में काम करता है और फिर उत्पादन में प्रकट होता है जैसे एक्सपोज क्रेडेंशियल्स, एक धीमा Largest Contentful Paint और एक ग्रिड जो डेटा ट्रिकल्स के साथ रिफ्लो करता है।
रेंडर के दौरान रिज़ॉल्व करना तीनों को एक साथ हटा देता है। लिस्टिंग क्वेरी और छवि लुकअप एक ही जगह पर होती है, परिणाम पृष्ठ के बाकी हिस्सों के साथ-साथ उसी रीवैलिडेशन नियमों द्वारा कैश किया जाता है, और next/image एक सामान्य रिमोट URL देखता है। इंटीग्रेशन एक फाइल में एक दर्जन लाइनों में समाप्त होता है, जिसे आप पहले से ही लिखने वाले थे।
हाँ। next.config में remotePatterns में हमारी इमेज होस्ट को जोड़ें, और ऑप्टिमाइज़र उन्हें किसी अन्य रिमोट इमेज की तरह ही ट्रीट करता है।
दोनों। app router बेहतर फिट है क्योंकि रिज़ॉल्यूशन एक सर्वर घटक में होना चाहिए, लेकिन getServerSideProps या getStaticProps का कॉल बिल्कुल एक जैसा काम करता है।
ISR, लगभग हर मामले में। वाहन इमेजरी आपकी कैटलॉग के साथ बदलती है, न कि प्रत्येक विज़िटर के लिए, इसलिए कई घंटों की एक रीवैलिडेट विंडो आमतौर पर पर्याप्त सटीक होती है।
हाँ। SDK fetch का उपयोग करता है और इसमें कोई Node विशिष्ट डिपेंडेंसी नहीं है, इसलिए एज रूट हैंडलर्स और मिडलवेयर बिना शिम के काम करते हैं।
नहीं। आप उसी चौड़ाई का अनुरोध कर सकते हैं जिसे आप रेंडर करते हैं और next/image को पूरी तरह से छोड़ सकते हैं। ऑप्टिमाइज़र srcset के लिए सुविधाजनक है, आवश्यक नहीं।
रिस्पॉन्स आपको बताता है जब एक फॉलबैक मॉडल ईयर का उपयोग किया गया था, इसलिए आप यह तय कर सकते हैं कि इसे दिखाना है, एक ब्रांडेड प्लेसहोल्डर दिखाना है या इमेज स्लॉट छिपाना है।
हमसे बताएं कि कौन से रूट्स वाहन दिखाते हैं और वे किस साइज़ में रेंडर होते हैं। हम URL और आपको आवश्यक remotePatterns एंट्री के साथ वापस आते हैं।
