0:00
प्री रेंडरिंग की दो स्ट्राटेजीजीजी होती है��
0:02
सर्वर साइट रेंडरिंग और स्टाटिक साइट जेनरेशन इन दोनों स्ट्राटेजीजीजी के तुरू हम लो��
0:06
प्री रेंडरिंग कर सकते हैं यानि की जो हमारा HTML है यानि की जो डेटा होता है एक ब्लॉक पोस्ट क��
0:12
वो जनरेट होकर क्लाइन्ट को मिलेगा पहले से रेंडर होकर मिलेगा क्लाइन्ट को API के थुर डेटा फेच नहीं करना पड़ेग��
0:18
यह काम हमने सर्वर साइट रेंडरिंग के थुर किया था आज हम लोग देखेंगे कि किस तरह से हम लोग स्टेमाल कर सकते है��
0:28
गेट स्टाटिक प्रॉप्स और तो और गेट स्टाटिक पाथ्स क्या होता है यहाँ पर जब हम लोग स्टाटिक साइट जेनेट कर रहे हैं तो दो फ़ॉंक्शन्स क्यों ह��
0:34
जब हम सर्वर साइट रेंडर रहे हैं तो सिर्फ एक फ़ॉंक्शन है इस बारे में भी जानेंगे कि दो फ़ॉंक्शन्स क्यों ह��
0:40
गेट स्टाटिक प्रॉप्स और गेट स्टाटिक पाथ्स यह दोनों क्या करते है��
0:44
इसको बहुत अच्छी से समझेंगे हम लोग चलते हैं गंपिटो स्पीक में और इस वीडियो को स्टार्ट करते है��
0:58
स्वर्व मैंने सारे के सारे कमिट्स मार रखे हैं टाइम कुछ टाइम जैसे यह से हम लोग इस कुर्स में आगे बढ़ते जा रहे है��
1:03
आप लोगों को बड़े आराम से दिख जाएगी हमारा जो गिटफ़ है उसमे��
1:07
अब यहाँ पर नए चीज़ की प्लेलिस यह है नेट चला गया क्या नहीं नेट नहीं गय��
1:12
चलो नेट को आने देते हैं आराम से टाइम देने देते हैं नेट को उसका अब यहाँ पर आप लोग देखो जो हमारा हंटिंग कोडर है उसको मैं जल्दी स��
1:18
यहाँ पर यार्न डेव कर देता हूँ जिसनी देर में हमारा यह नेट आ रहा ह��
1:23
इसनी देर में मैं यार्न डेव कर देता हूँ यार्न डेव मेरा नेट चला गय��
1:27
लेकिन आपका नहीं गया होगा तो आपलोग प्लेलिस्ट एकसिस कर लेना ठीक है अब यहाँ पर ब्लॉग के अंदर अगर मैं जाओं अभी तो आप देखो यहाँ प��
1:33
आपका लिए जावस्कृप्ट के लिए जावस्कृप्ट के लिए जावस्कृप्ट के लिए जावस्कृप्ट के लिए जावस्कृप्ट के लिए जावस्कृप्ट के लिए जावस्कृप्ट के लिए जावस्कृप्ट के लिए जावस्कृप्प के लिए जावस्कृ��
2:03
आप नेक्स जियस की सायता से एक स्टाटिक साइड बिल्ड कर लेते है��
2:07
आप कहते हैं कि मुझे कोई API नहीं चलानी, मुझे किसी सरवर की टेंशन नहीं लेन��
2:11
मुझे सिंप्ली आप एक स्टाटिक साइड बिल्ड करके देदो और मैं उसको डिप्लॉय कर लूँग��
2:15
जिस तरह से मैं एक लोकली लिखा हुआ .html पेज रन करता हूँ ठीक है बहुत यह सिंपल से चीज़ ह��
2:21
तो यहाँ पर हम लोगों ने क्या किया था अभी तक हम लोगों ने यहाँ पर कहा गई हमारी वो ब्लॉग वाली फाइ��
2:28
हम यहाँ पर ब्लॉग.js और स्लग.js को एडिट करेंगे और यहाँ पर देखो ब्लॉग.js के अंदर हमने एक फांक्शन राइट किया था जो कि है गेट सरवर साइट प्रॉप्स ठीक है अब यह चेंज हो जाएगा और यह हो जाएगा गेट स्टाटिक प्रॉप्स ठीक ��
2:58
है यहाँ पर देटा फिचंग के अंदर और एक होता है गेट सरवर साइट प्रॉप्स और मेरा आदमी आ रहा है नेट तो मुझे करना पड़ेगा इंतिजार हुआ खत्म आ गया है नेट और अब हम लोग ओवर राइट करेंगे गेट स्टाटिक प्रॉप्स वाले ��
3:28
देखो ये दो फंक्शन्स क्या करते हैं मैं आपको बताता हूँ सबसे पहले मैं ये वाला फंक्शन्स जो कि हमने अभी तक हमने लिखा नहीं है अपने कोड के अंदर इसको मैं ले आता हूँ यहाँ पर ठीक है और आप लोग देखो यहाँ पर गेट स्टाटिक प्रॉ��
3:58
जब मैं जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब ��
4:28
जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब ज��
4:58
और मुझे बताए कि आपमेश कई लोगों को यही जीस गंफिएस नहीं लगेगी कि आपको यही क्या चल रहा है, सर्वर साइट जेनेरेशन क्या है, स्टाटिक साइ��
5:03
जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब ज��
5:33
जब मुझे जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब ��
6:03
आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्��
6:33
प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइ��
7:03
करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आप��
7:33
प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइ��
8:03
करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आप��
8:33
करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आप��
9:03
करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आप��
9:33
प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइ��
10:03
करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आपको प्रताइब करें, आप��
10:33
क्या करूँगा यहाँ पर जो read file है वो promises वाला यूज़ करूँगा, fs.promises.yay यह, ठीक है, अब मैं लिखोंगा let my blog is equal to await और fs.promises.read file ठीक है, और मैं क्या कर रहा हूँ
10:47
blogdata.json और यहाँ पर callback function नहीं आएगा, callback function की जगा क्या आएगा, callback function क��
10:55
जगा पर, मैं जरा zoom out कर लेता हूँ इसको, callback function की जगा पर क्या आएगा, यह भी मैं आपको बता देता हूँ, callback function को हटा लेता हूँ
11:01
पहले यहाँ से मैं, मैंने यहाँ पर कुछ इस तरह से लिखा इसको, यहाँ पर मेरा यह खतम हुआ, और यह मैंने यहाँ से return किया, अब देखो मैं क्या करूँगा, callback function की जगा मेरा यह myblog आगया, और मैं इसको request.query.slug को print नहीं करना चाहता, अभी देखता हूँ कि क��
11:31
परम्स है, copy और paste ठीक है, और मैं आपको बता रहा हूँ दुबारा से कि मैं इसको पूर��
11:38
revise करूँगा, इस वीडियो को end में पूरा summarize करूँगा कि क्या किया हम लोगों ने, ठीक है
11:43
आगया, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह ��
12:13
नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, य��
12:43
नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, य��
13:13
नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, य��
13:43
नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, य��
14:13
नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, यह नहीं है, य��
14:43
शायद इसकी वज़ी से आ रहा हूँ, बट आइ थिंक मैंने जो नेक्स्ट एमेज है मेरा वो तो हटाई दिया ना, तो यह एरर क्यों आ रहा है, इसको तो मैंने कॉमेंट आउट कर दिया ना, हाँ, एकस्पोर्ट सचस्पॉल, अब हो गया, ठीक है, तो अब आप लोग ��
15:13
आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आ��
15:43
पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर ��
16:13
तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो ��
16:43
आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आ��
17:13
पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर ��
17:43
बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बना था, तो आप पर बन��
18:13
इसमें हम पहले get server side props का प्रियोग करके, सर्वर पर HTML जेनेट कर रहे थे, क्लाइन्ट को भीजने से पहले
18:19
एक एक word पर फोकस करना, मैं क्या बोल रहा हूँ, क्लाइन्ट ने मारी सर्वर को request
18:23
सर्वर है हमारा Next.js सर्वर, सर्वर ने क्या किया, क्लाइन्ट के बिहाफ़ पे सारी JavaScript को पहले पहले execute करके
18:31
props के थुरू यहापर पूरा page HTML hydrate करके भेजा, क्लाइन्ट को
18:36
ता कि क्लाइन्ट को आसानी हो, और display करा सके, क्लाइन्ट को जाधा मेहनत ना करनी पड़े
18:41
क्लाइन्ट को जाधा JavaScript ना run करनी पड़े, क्लाइन्ट का अगर internet भी slow है तो भी उसको दिक्कत ना हो
18:45
क्योंकि हम directly जो HTML हो भेज रहे हैं, अलग-अलग API request क्लाइन्ट को बानने की ज़रूरत नहीं पड़ेगी अब
18:50
एसा करने से क्या होगा, एसा करने से यह होगा, कि get-server-site props जो है
18:55
वो server पर सब कुछ अपनी जिम्मेधारी ले लेगा, अपने कंदो पर
18:59
और site fast हो जाएगी to some extent, ठीक है, और उसे के साथ सर live update भी करा
19:05
अगर हमने, अपनी site को to, live update हमें मिलते रहेंगे, लेकिन, अब मैंने आप लोगों से इस वीडियो में करी
19:12
जो गए get static props, अभी जो मैंने बता था, वो get-server-site props था, confused बत उना
19:16
यह है get-static props, जो हमने इस वीडियो में बात करी, get-static props क्या कहता है
19:20
कि यार, client server को request फेजता है, server के पास सब कुछ ready है
19:25
server ने ready करके रखी हुए, पूरी static site, यानि जो आपकी next year site है, उसने पहले से ही एक static site बना दी
19:31
उसने कहा कि, यार मैं भी कोई मेननत नहीं करूँगा, बना कर रख लिए उसने
19:35
अब उसका काम है, बस आपको देना, pages जो आप request कर रहे हो, तो यह जो out directory में हमने बनाई है
19:40
यह files ही है, इसे ही है, files and folder structure, बना कर रख लिया, किसने बना कर रख लिया
19:46
सर्वर ने बना कर रख लिया, टीक है, अब सर्वर को बस faq नहीं है, pages
19:50
किसी ने बुला, मुझे देदो blog post, how to learn fast, फटाक, एकड़म
19:54
कुछ सर्वर को मेननत नहीं करनी पड़ी, एकड़म page बिल गया, पूरी html बिल गया
19:59
तो यह बहुत fast होता है, ठीक है, और आपनों CDN का स्टिमाल कर रहे हो
20:03
जो content delivery के लिए optimised होता है, जो CDN होता है, और जो सर्वर होता है
20:07
difference है, जो सर्वर होता है, वो content delivery के लिए इतना optimised नहीं है, CDN का काम ही यह होता है
20:12
फाइलो को पटकना क्लाइन्ड के उपर, फैक फैक के मारना, इतनी तेज क��
20:16
speed बहुत तेज हो, और बहुत मज़ा आये क्लाइन्ड को, क्लाइन्ड भी गई कि यार मज़ा ही आ गया
20:20
और CDN की एक और खासियत यह होती है, कि अलग अलग location पर cash हो जाती है फैल
20:24
यानि कि अगर आपने कोलकाता से access करी, तो पटकस से आपको मिल जागा, कोलकाता से CDN के थूरू
20:28
अगर आपने United States से करी, वहाँ पर मिल जागा, लंडन से करी
20:32
वहाँ पर मिल जागा, दुबाई से करी, समझ गया आप लोग, तो यह हमारा getstaticprops था
20:38
फिर हमने क्या करा, static side को build करने के लिए, हमें दो functions को implement करना पड़ सकता है
20:44
अब यहाँ पर क्योंकि slug.js है, slug भी dynamically आ रहे हैं
20:48
तो हमें दो functions को implement करना पड़ा, block.js एक simple सा page है, जिसमें हमें सिर्फ blocks चाहिए
20:53
वो ब्लॉग्स हमें कहां से मिलेंगे getstaticprops, getstaticprops में हमने क्या किया
20:57
हमने कहा कि जितने भी blocks हैं, सब को fetch करो, और यहाँ पर जब भी हम generate करेंगे
21:03
यह out वाला folder, यह जब भी हम next export करेंगे, next export क्या होता है, next export एक command होता है
21:08
जो कि out वाला folder generate करने के काम आता है, यहाँ से data लेकर आ रहा है
21:25
और as a props पास कर दे रहा है इस component को, ठीक है, और जब भी static site generate की जाएगी
21:31
तो यह component populated मिलेगा, ठीक है, slug.js में लेकिन दो चीज़ें चाहिए हूँ
21:35
एक तो मुझे चाहिए content, लेकिन content के साथ साथ, पेज़ पर मैं content दिखाने वाला हूँ
21:41
उसके साथ मुझे यह भी चाहिए, कि slug कितने हो सकते हैं, slug.js तो लिखा है
21:45
लेकिन slug.js कौन-कौन से हो सकते हैं, यहाँ पर आप देखो slug.js how to learn flask हो सकता है
21:49
how to learn javascript हो सकता है, how to learn xjs हो सकता है, वो बात बताने के लिए हम getstaticpaths function को उसकरते हैं
21:55
कि कितने वराइटी हैं इस page की, कितने pages generate करने हैं यह वाले
21:59
slug.js, मैंने कह दिया थीन करने हैं, अब यह चीज़ programmatically भी मैं कर सकता था
22:03
यहाँ पर ही code लिख सकता था, इस folder को read करने का, और वही सही तरीका होता
22:07
सॉरी, इस folder को read करने का, block data folder को read करने का, code लिख दिता यहाँ पर
22:11
जो कि इस folder के अंदर के सारी files यहाँ पर, इस तरह से return कर दिता
22:16
मैं वो भी लिख सकता था, और वो ही optimal रहता, फिर मुझे सिर्फ block data में डालना है
22:20
और मेरा काम हो जाएगा, लेकिन मैंने चीज़ों को simple रखने के लिए, इसको ऐसे hard code कर दिया
22:24
आने वाले वीडियो में चेंज करूँगा इसको भी, और get static paths का simply मतलब यह है कि
22:28
slug.js की कौन-कौन सी varieties है, कितने pages generate करने है, slug.js वाले
22:34
जो block post के अंदर, slash block post, slash, कितने-कितने pages generate करने है
22:39
जैसे यहाँ पर मुझे यह करना, यह करना, यह करना है, तो यह होता है get static paths, get static props का मतलब है
22:45
कि अगर एक slug आ गया हमारे पास, तो slug का data का से लाऊँ, get static props
22:49
वो data देगा, props के form में, यानि कि अगर मैंने get static props को दिया
22:54
how to learn flask, तो क्या होगा, how to learn flask के corresponding
22:58
पूरा data मुझे यह वाला मिल जाएगा, यह पूरा data मिल जाएगा, ठीक है, और जब यह data मिल जाएगा
23:02
तो यह काम कौन करेगा, next export जब मैं run करोंगा, तो यह सारे काम हो होके
23:22
तो यह updates नहीं जाएगे, मेरे out folder में, जब तक मैं next export को दुबारा run नहीं करूंगा
23:28
अब अगर मालो, मैंने apple block data के अंदर, एक और end point मना दिया, तो वो update आपको देखने को नहीं मिलेंगे
23:33
तो यह है एक drawback इसका, ठीक है, और एक बड़ा drawback है, इसलिए लोग get server side props का इस्तिमाल करते हैं
23:39
जब भी उनको changing data को display कराना होता है, कि यार उनके changes बहुत तेस तेस हो रहे हैं
23:44
या तो आपको दुबारा से build करना पड़ेगा तेस तेस, या फिर आप क्या करेंगे
23:48
get server side props का इस्तिमाल करेंगे, तो server side generation आप लोग करेंगे, server side rendering जिसको कहते हैं
23:53
वो करेंगे, और वो मैंने पिछले वीडियो में बताया था, इस वीडियो में हमने static side generation देखा
23:58
I hope कि यार अब तो सबको clear होगा, कि ये चीज़े किस तरह से काम कर रहे हैं, ठीक है
24:02
तो अगर आपने अभी तक playlist आक्सेस नहीं कर रही है, ज़रूर करें आक्सेस, और उसे के साथ साथ
24:08
आने वाले वीडियो में हम लोग और clarity देखेंगे, hunting coder को और उचाईं उपर ले कर जाएंगे
24:13
अभी के लिए इस वीडियो में इतना है, आपको बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बह��