Server Side Rendering - getServerSideProps() in Next.js _ NextJs Tutorial for Beginners #22
Feb 13, 2024
In the twenty-second tutorial video, "Server Side Rendering - getServerSideProps() in Next.js," beginners are introduced to the `getServerSideProps()` function in Next.js, which enables server-side rendering (SSR) for dynamic data fetching. This tutorial focuses on leveraging `getServerSideProps()` to fetch data at request time, allowing for dynamic content generation on each page load. Viewers learn how to implement `getServerSideProps()` within their Next.js projects to fetch data from various sources, such as APIs or databases, and pass it as props to their components. Additionally, the tutorial may cover best practices for error handling, caching, and optimization when using `getServerSideProps()`. By mastering `getServerSideProps()`, beginners can enhance the performance, SEO, and user experience of their Next.js applications by ensuring that content is always up-to-date and rendered on the server before being sent to the client.
Show More Show Less View Video Transcript
0:00
आज हम लोग देखेंगे कि किस तरह से हम लोग get server side props का इस्तेमाल करक��
0:04
server के थुरू HTML generate कर सकते हैं मतलब client server को request बेजेग��
0:09
एक बार server के पास request आ जाएगी तो वो सारी APIs के थुरू page को hydrate कर देग��
0:15
जो भी logic लगाना है वो सारा लगा देगा HTML को generate करने के लि��
0:18
और finally client को generated HTML वाला page भेजेगा जिसके अंदर सारा का सारा content लिखा हुआ ह��
0:25
ऐसा करने से client को मेहनत नहीं करनी पड़ेगी API के थूड़ data fetch करने क��
0:29
और जो first contextual paint होगा वो बहुत कम होगा page load बहुत जल्दी हो जाएग��
0:36
तो चलते हैं computer screen में देखते हैं यह गेट सर्वर साइट प्रॉप्स फंक्शन के थूं हम लोग किस तरह से सर्वर साइट रेंडरिंग कर सकते हैं लेट्��
0:43
केट स्टार्टिट विद इस वीडियो और यान डेव लिखूंगा और आप लोगों को बताऊंगा कि किस तरह से हम लोग सर्व��
1:01
रेंडरिंग करते हैं ठीक है तो यहां पर आप लोग देखोगे सारे के सारे कंपनेंट यह यूज नहीं करता है उनक��
1:05
बंद करता हूं प्लोज टू द राइट करता हूं और यह सबसे बड़े ब्लॉक डॉट जीएस में अप्लाई करते हैं देखो या��
1:11
मान लोगी मेरे पास ये blog.js, मैं जरा यहाँ पर server खोल लेता हूँ अपना
1:16
साकि एक अच्छा idea रहे हमें, हम क्या कर रहे हैं, मान लो मेरे पास ये page है और मैं चाहता हूँ कि ये
1:22
server कुछ इस तरह से generate करके दे, कि मेरे पास how to learn flask, how to learn next.js
1:27
right click view page, source, यह सारा का सारा मेरे पास रहे यहां पर सोच में अभी नहीं है देखो जीरो सर्च रिजल्ट्स आ रहे हैं जब मैंन��
1:35
इसको कंट्रोल ऐफ करके सर्च किया तो अगर मैं जावास्क्रिप्ट को सर्च करूं तो नो रिजल्ट्स वट्सवेबर ठीक है आ��
1:44
ने भी देखा और अगर मैं फ्लास्ट को भी करूं तब भी कोई रिजल्ट नहीं आएगा मैं चाहता हूं कि यह सार��
1:48
कंटेंट मेरे व्यूपेज सोर्ट्स को विजिट करने के बाद मुझे वापर डिस्प्ले हो यानी कि मेरे हट��
1:54
content का एक हिस्सा बने ठीक है तो यहां पर हम क्या करेंगे आप कि यहां पर जल्दी से हम लोग एक फंक्श��
2:02
लिखेंगे और वह एक सर्वर साइड प्रॉप्स और मैं आप लोगों को नेक्स्ट यह की रिलेवेंट डॉक्यूमेंटेशन प��
2:07
बता दूंगा नेक्स्ट यह स्केट सर्वर साइड प्रॉप्स ठीक है गिट सर्वर साइड प्रॉप्स और यह सर्वर साइड प्रॉप्��
2:14
क्या होते हैं भी आपको बताता हूं देखिए गैट सर्वर साइड प्रॉप्स क्या होते हैं कि आप लोग एक फंक्शन इसक��
2:19
implement करोगे ठीक है मैं यहां पर इसको कॉपी कर लूं जरा और यह कॉपी नहीं हो रहा है कि एक इमेज है अर��
2:26
इमेज क्यों डाल दी नोंने कुछ हमें कॉपी करने के लिए भी देते हैं इमेज डाल दी पूरी नोंने ऐसा क्यों रहा ह��
2:32
यह मैं कॉपी नहीं कर पा रहा हूं चाहिए डाख मोट की वाज़े से कुछ दिक्कत आ रही है हां चाहिए एक्सटेंशन को��
2:37
दिक्कत कर रही थी तो मैं मैंने तरह डाख मोट है तब तब ठीक हुआ है ठीक है वापस एनिबल कर लूंगा और मैं क्य��
2:44
करूंगा यह फंक्शन है गेट सर्वर साइड प्रॉप्स इसको मुझे इंप्लीमेंट करना है अब आप लोग देखते हैं यहा��
2:50
पर मैं क्या कर रहा हूं मैं यहां पर लिख रहा हूं है डी गुड बॉय ठीक है मैंने यहां पर प्रॉप्स लिखा ह��
2:56
गुड़ बॉय अब मैं क्या करूंगा यहां पर प्रॉप्स एक्सेप्ट कर सकता हूं यह वाले ठीक है और मैं क्या करूंग��
3:02
बहुत ही सिंपल सा काम करूंगा मैं कंसोल डॉट लॉग करूंगा प्रॉप्स को ठीक है और आप लोग यहां पर देखना क्या होग��
3:09
और मैं console.log server पर कर रहा हूँ props को ठीक है by the way यहाँ प��
3:13
how to learn flask print visit visit
3:24
बॉय आ गया इसका क्या मतलब हुआ इसका मतलब समझे दे इसका यह मतलब है कि आप लोग जो भी चीज यहां प��
3:30
एक्सपोर्ट करोगे वह यहां पर उपलब्ध हो जाएगी एस प्रॉप्स यानि कि आपने प्रॉप्स के अंदर जो भी डाल��
3:36
वह आपके यहां पर उपलब्ध हो जाएगी आपके कंपोनेंट के अंदर ठीक है और यह प्रॉप्स यह सर्वर साइड पर रन करत��
3:43
हैं जो फंक्शन है यह सर्वर साइड पर रन करता है सॉरी नॉट प्रॉप्स यह फंक्शन सर्वर साइड पर रन करता है ठीक ह��
3:47
चलो जूम करता हूं लेकिन मैं यह करना नहीं चाहता यह बहुत बोलिंग काम है एडिव बॉय मतलब नहीं ह��
3:54
इस चीज कर दिए मतलब मतलब भी है लेकिन इस कंटेक्स में नहीं इस फ्लॉक के कंटेक्स मैंसे तो मैं एक गुड़ बॉ��
3:59
हुई तो आप सभी को पता है ठीक है तो कॉपी करूंगा मैं इसको और कॉपी करने के बाद इन फैक्ट करूंगा कॉपी भी नहीं करूंगा और यूज एफेक्ट को मैं खतम कर दूंगा मैं यूज एफेक्ट इस्तेमाल नहीं करूंगा मैं यह नहीं कि पॉपुलेट नहीं क��
4:29
टेक्स थोड़ा सा बदल जाएगा तो मैं यहां पर लिखूंगा लेट डेटा इस एकॉल टू अवेट फेच यह और डॉट देन क��
4:35
इस्तेमाल नहीं करूंगा अब मैं अब मैं सिर्फ इतना करूंगा और इसके बाद मैं क्या करूंगा लेट मैं कहूंग��
4:42
प्रॉप्स इस इकॉल टू अवेड डेटा डॉट जेसन ठीक है अब मैं कुछ इस तरह का काम करूंगा तो जो मेरे माई प्रॉप्��
4:52
है उसके अंदर मेरे प्रॉप्स आ जाएंगे अब देखो मैं क्या करूंगा यहां पर आप लोग देखते जाना मैं क्या करूंग��
4:57
यहां पर मैं प्रॉब्स को कुछ इस तरह से रिटर्न कर दूंगा मैं पॉइंट ऑफिस और आप लोग देखना कि मैं जैस��
5:04
इस पेज को विजिट करूंगा इसको रिलोड करूंगा तो आप लोग देखो यहां पर यह रहा है एरर सीलिएजिंग प्रॉब्ल��
5:09
फ्रॉम गेट सर्वर साइड प्रॉप्स एंड ब्लॉग सीव्ड ऑप्जेक्ट एरे एक मिनट मैंने कुछ बड़कर दिया यहां पर प्रॉप्��
5:17
मुझे इसको इस तरह से करना पड़ेगा ठीक है अब मैं इसको रिलोड करूंगा अगर तो आप लोग देखना यहां पर क्या होग��
5:23
जब मैं इसको रिलोड करूंगा मैंने कंसोल और लॉग प्रॉप्स क्यों टाइप मुझे यह भी रखना पड़ेगा मैं इसको रिलो��
5:29
देखो जैसे ही आप लोग यहां पर देखो कि यह पूरा का पूरा जो ब्लॉक से सारे वह यहां पर आ चुके है��
5:35
अब देख रहा है आप लोग यहां पर माय प्रॉप्स के अंदर आ चुके हैं तो यहां पर माय प्रॉप्स के अंदर सार��
5:40
मेरा मसाला मौजूद है ठीक है अब मैं माय प्रॉप्स का नाम चेंज करूंगा और माय प्रॉप्स के नाम को मै��
5:45
चेंज करके और ऑल ब्लॉक्स अब दूंगा ठीक है ऑल ब्लॉक्स ठीक है ��
5:53
अब यहां पर रिलोड करूंगा तो यहां पर ऑल ब्लॉक्स करके आएगा यह टीक है तो ऑल ब्लॉक्स के अंदर एक यहां प��
6:03
प्रॉब्स के अंदर ऑल ब्लॉक्स है दिखाता हूं अभी आपको माय प्रॉब्स पर पुराना वाला आ गया यहां पर देखो आ��
6:09
और अल्ब्लॉक्स और ब्लॉक्स के अंदर सारे ब्लॉक्स है इन फॉर्म ऑफ एन अरेज ठीक है अब देखो मैं क्या करूंगा यहा��
6:16
page source flask flask flask HTML dev h3 server site rendering
6:45
I hope server site rendering समझ में आ गई आप लोगो को किस तरह से काम करती ह��
6:49
तो basically हमने ऐसा क्यों किया? आप कहो यार ऐसा करा क्यों यार? पहले भी तो सही दिखरा था page
6:54
देखो यार ऐसा इसलिए करा ताकि हम request time पर populate करे��
6:58
request time पर HTML generate करें और request time पर जब हम HTML generate करेंग��
7:02
तब यहाँ पर हमारा जो view page source जब हम करेंगे पेज का HTML सोर्स है उसके अंदर भी डाटा आएग��
7:09
I hope आप लोग समझ गए यह चीज कैसे काम करती है अगली वीडियो में हम लोग देखने वाले है��
7:13
कि किस तरह से हम लोग Static Site Generation करेंगे लेकिन इससे पहले हम Static Site Generation करने से भ��
7:18
पहले मैं आप लोगों को यहां पर दिखाना चाहता हूं कि सेम चीज आप लोग यहां के लिए कैसे लगा सकते हैं और यहा��
7:23
के लिए मैं थोड़ा तेज करूंगा यूज इफेक्ट के अंदर जो काम हमने किया हुआ और यह जो यह जो सारा काम हमने किय��
7:28
यूज एफेक्ट के अंदर मैं इसको यहां से कट करूंगा और यूज एफेक्ट को पूरे को मैं कट करूंगा यहां से इन फैक्��
7:35
इतना पार्ट में यहां से कट करूंगा और यहां पर मैं एक फंक्शन इंप्लेमेंट करूंगा जिसका नाम है एसिंग फंक्श��
7:42
एट सर्वर साइड प्रॉप्स ठीक है यह फंक्शन के अंदर डालूंगा इस चीज को मैं इस पूरी चीज को ठीक है इ��
7:48
फंक्शन के अंदर डालूंगा यहां पर मैं फॉरमेट डॉक्यूमेंट करूंगा और यहां पर मैं पेस्ट करूंगा इसको ठी��
7:56
और यह करने के बाद ब्लॉग सेट ब्लॉग यह भी ठीक है और यूज स्टेट नहीं यह चीज मुझे ऊपर ही डालनी पड़ेगी यार स्टेट थोड़ना बनाऊंगा कोई सर्वर साइट पर मैं ठीक है यह चीज मैंने करी राउटर इस इकॉल टो यूज राउटर और यू��
8:26
टर्न कर दूंगा यह फॉरमैट डॉक्यूमेंट से millet यार तो नहीं आ रहा है तो आ रहा है उसे नोली भ��
8:33
गॉइंट साइड ऑफ बॉडी फॉंक्शनल कंपोनेंट तो यह यूज राउटर का इस्तेमाल तो यहां पर नहीं कर सकता त��
8:37
लग को लेकर कैसे आओ अगर मैं आपको करूं कंसोल डॉट लॉग और कॉन्टेक्स्ट तो इस कॉन्टेक्स्ट के अंदर क्य��
8:45
इस कॉन्टेक्स्ट ऑब्जेक्ट को जरा इंटरस्पेक्ट करते हो देखते हैं इसके अंदर क्या है अगर मैं सेव करूं औ��
8:50
रिलोड करूं और मैं अपने कंसोल के अंदर देखूं जाकर तो मेरे कॉन्टेक्स के अंदर क्या-क्या यह मुझे पत��
8:55
लग जाएगा देखो यहां पर कॉन्टेक्स के अंदर बहुत सारी चीजें है ठीक है आप देख रहे हैं कॉन्टेक्स ऑप्टे��
9:00
यहाँ पर बहुत सारी चीजें तो मैं यहाँ पर देखूंगा कि किसी जरा से और मुझे यूअरल मिल जाता है अगर मुझे रिक्वेस्��
9:05
जाती है तो कितनी अच्छी बात होगी तो मैं यहाँ पर ढूंढ रहा हूं उसको और इसके रिक्वेस्ट के अंदर एक यूअर��
9:11
तो मैं यहाँ पर लिखूंगा .request.url context.req.url और मेरा काम बन जाएगा यार, मेरा काम बन जाएगा, मुझे user router की जरूरत नहीं है, देखो यहाँ पर, मैंने यह चीज करी, और जैसे मैंने यह चीज करी, यहाँ पर देखो, एक error मुझे मिल गया है, लेकिन क्या मेरा यह जो ��
9:41
टॉट यू रेल देखने को मिल रहा है नेक्स्ट स्टेप किया था मैंने और हां मिल रहा है देखो ब्लॉग पोस्��
9:46
context context query query query
10:06
रिस्पोंस के अंदर शायद रिस्पोंस के अंदर है रिक्वेस्ट के अंदर है डोट रिक्वेस्ट डोट क्वेरी अब इफेंड नॉट रॉन इफेंड नॉट रॉन रिलोड करता हूं और रिलोड करने के बा��
10:16
डॉट क्वेरी अंडिफाइंड आ गया रिक्वेस्ट डॉट क्वेरी अंडिफाइंड आ गया कहां पर है यह मुझे यह जो क्वेरी है व��
10:22
चाहिए देखो यूअरल तो यहां पर है लेकिन मुझे यूअरल नहीं चाहिए मुझे चाहिए क्वेरी ठीक है यह क्वेरी जो ह��
10:46
एड़र से ठीक है तो जो क्वेटी है वह यहां पर तो नहीं दिखाई पड़ रही है मुझे इसका मतलब मुझे डायरेक्��
10:52
लीड डिफिकांट एक्स टोट को एक लिखने की जरूरत है नॉट शूर्ड नॉट शूर्ड अगर मैं यह लिखता हूं को टेक्��
11:00
क्वेरी तो हां कॉन्टेक्स व्हाट क्वेरी ओके तो कॉन्टेक्स व्हाट क्वेरी हम को चाहिए थी और कितना टाइम लग गय��
11:06
कॉन्टेक्स व्हाट क्वेरी को छूटने में एक काम करता है इसको यहां पर कमेंट आउट करता है और यूज राउटर क��
11:10
अभी फिलाल हमें जरूरत नहीं है ठीक है यह डॉट डेन वाला जो सिंटेक्स है उसको मैं मिटाऊंगा क्योंकि य��
11:15
अब हमें नहीं चाहिए सिंपली हमें फेच करना है और फेच करने के बाद हम अवेट सिंटेक्स का इस्तेमाल करेंग��
11:23
यहां से कॉपी करूंगा एकदम ऐसे कॉपी करूंगा ठीक है और यहां पर बस मैं फैच की कॉल को चेंज करूंगा कंट्रो��
11:32
एक्स कंट्रोल भी ठीक है और यहां पर मैं रिटर्न कर दूंगा माइ ब्लॉग ऑल ब्लॉक्स नहीं माइ ब्लॉग क्योंक��
11:39
एक ब्लॉग है यहाँ पर ठीक है वहाँ पर बहुत सारी ब्लॉग्स है अगर आपको याद हो तो माय ब्लॉग ठीक है तो यहाँ पर मै��
11:45
करूंगा माय ब्लॉग कर दूंगा प्रॉब्स टॉट माय ब्लॉग और यहां पर प्रॉब्स आई होप समझ में आ रहा है यार आ��
11:53
लोगों क्योंकि मैंने काफी ट्राइल एंड अर्रर किया यहां पर लेकिन अभी मेरे साथ से लोड हो जाना चाहिए औ��
11:59
अब लोड हो रहा है देखो अब अगर मैं राइटली करके view page source करूँग��
12:03
तो आप लोग देखना यहाँ पर मैं control F करूँगा और मैं यहाँ पर कुछ जो यहाँ पर है वो लिखू��
12:07
जैसे मानो first class multi paradigm लिखूँ या event driven लिखूँ ठीक ह��
12:11
event driven, देखो यहाँ पर आ गया ही देखो, HTML के अंदर
12:15
पहले यह नहीं आता, आप लोग चाहो तो try कर सकते हो, तो इस तरह से हमारे server side props वाला function काम करता है
12:20
और इस process को कहते है, server side rendering, हमने server side rendering करी
12:25
I hope server side rendering सबको समझ आ गई है इस point पर, अगर आप लोगों ने अभी तक ये playlist access नहीं करी ह��
12:31
जो कि काफी लोगों ने नहीं करी है मैं चाहूँगा आप लोग इसको खोलें अभी के अभी सिर्फ सुनकर मत निकालो मेरी बात क��
12:35
access करो तो कि देखो यार videos को देखते वक्त तो अगर आपके बास पूरा course रहेगा side मे��
12:40
तो learning आपकी optimal रहीगी आप इसको bookmark जरूर करो playlist को खुलके और इसको save कर��
12:44
playlist को access जरूर कर लो और series में देखो वीडियोस को बीच में से नहीं देखना है वीडियोस को ठीक ह��
12:49
क्योंकि कोई वजह ही रही होगी कि मैंने इसको एक playlist में डाला हुआ है अभी के लिए इस वीडियो में इतना है guys
12:54
Thank you so much guys for watching this video and I will see you next time
#Programming
#Educational Software
#Computer Education
