React Server Components vs Client Components

Summary

This video script delves into the concept of React Server Components, explaining their role and how they differ from traditional client-side components. It discusses the evolution from React 18 and Next.js 13.4, highlighting the benefits of server-side rendering for improved performance and user experience. The script guides viewers on leveraging server components for faster initial page loads and reduced JavaScript bundle sizes, ultimately enhancing the overall website speed and interactivity.

Takeaways

• 🌟 The video introduces the concept of React Server Components, a new feature that allows parts of a React application to be rendered on the server-side.
• 🔍 It clarifies the difference between server-side rendering and client-side rendering in React, explaining how server components can improve performance and user experience.
• 🛠️ The video promises a practical implementation of server components, guiding viewers through the process of integrating them into their projects.
• 🚀 For React developers aiming to enhance app performance, understanding server components is crucial, as they can significantly reduce the time to interactivity.
• 🔑 The script discusses the benefits of server components, such as reducing the JavaScript bundle size sent to the client, which can speed up page load times.
• 📚 It explains the architecture of React with server components, emphasizing how it differs from traditional React applications that rely on client-side rendering.
• 💡 The video highlights the importance of identifying which components should be server components and which should remain client-side for optimal performance.
• 🛑 The script addresses common issues with traditional React apps, such as long loading times and blank screen problems, and how server components can help mitigate these.
• 🔄 The concept of 'hydration' is introduced, explaining how React integrates server-rendered content with client-side JavaScript to create interactive pages.
• 🔍 The video provides insights into optimizing the JavaScript bundle size by selectively rendering components on the server or client, leading to faster interactivity.
• 🛠️ It concludes by emphasizing the need for developers to be strategic in their use of server components to enhance the overall user experience without compromising on app functionality.

Q & A

What is the main topic of the video?

The main topic of the video is about React Server Components, explaining what they are, how they work, and their differences from traditional React client components.

Why are React Server Components introduced in the video?

React Server Components are introduced to address certain performance issues and to optimize the user experience by reducing the load on the client-side and enhancing the rendering process on the server-side.

What is the difference between Server-Side Rendering and Server Components as discussed in the video?

Server-Side Rendering refers to the process of rendering a complete page on the server and sending it to the client, while Server Components are a part of React's architecture that allows certain components to be rendered on the server, without necessarily rendering the entire page.

How does the video explain the concept of 'First Paint' in the context of React applications?

The video explains 'First Paint' as the point in time when the user sees some visible content on the screen, which may initially be just the shell of the page with loading indicators, before the actual interactive content is loaded.

What is the problem with having a large JavaScript bundle size as mentioned in the video?

A large JavaScript bundle size can lead to increased load times, which can negatively impact the user experience by making the application feel slow and potentially causing users to leave the site before it fully loads.

How do React Server Components help in reducing the JavaScript bundle size sent to the client?

React Server Components help by only sending the necessary client components to the client, while the server components remain on the server. This means the JavaScript related to server components does not need to be downloaded by the client, reducing the overall bundle size.

What is 'Hyddration' in the context of React applications as discussed in the video?

Hyddration in React refers to the process where the client-side React application attaches event listeners and makes the server-rendered page interactive after the initial rendering is done.

Why is it important to differentiate between Server Components and Client Components in a React application?

Differentiating between Server and Client Components is important for optimizing performance. Server Components can be rendered on the server without sending their JavaScript to the client, reducing the load on the client and improving the initial load time and interactivity of the application.

What is the role of Pages Router in the context of the video?

Pages Router is used in the video to demonstrate the implementation of Server Components in a Next.js application, showing how pages and components are structured and how the routing works with server-side rendering support.

How does the video suggest optimizing the JavaScript bundle for components that do not require interactivity?

The video suggests that for components that do not require interactivity, such as those only displaying data without any interactive elements, they can be marked as Server Components to avoid sending unnecessary JavaScript to the client, thus optimizing the bundle size.

What is the potential impact of using Server Components on the user experience according to the video?

According to the video, using Server Components can improve the user experience by reducing the initial load time and making the application more interactive faster, as it minimizes the amount of JavaScript that needs to be downloaded and processed on the client-side.

Outlines

00:00

🌟 Introduction to React Server Components

The paragraph introduces the topic of React Server Components, emphasizing their significance for developers looking to enhance their applications' performance. It discusses the evolution of server components in React, starting from React 18's introduction of concurrent features to Next.js 13.4's implementation of server components. The speaker highlights the importance of understanding the difference between server-side rendering and client-side rendering in React, and how server components can optimize the user experience by reducing load times and eliminating blank screens during initial page loads.

05:01

🚀 Enhancing User Experience with Server Components

This section delves into the problems faced with traditional React client components, such as long loading times and blank screens, which can lead to high bounce rates. The speaker then contrasts this with the benefits of server components, which can perform initial rendering on the server, thereby reducing the time users see blank screens. The discussion includes the concept of 'first paint', where the page starts to become visible to the user, and how server components can expedite this process. The paragraph also touches on the technical aspects of implementing server components and the potential for a more seamless and interactive user experience.

10:03

🛠️ Practical Implementation of Server Components

The speaker provides a practical walkthrough of implementing server components in a React application. They discuss the process of setting up a development environment with Next.js, creating a basic page with server components, and the differences in how these components are handled compared to client components. The paragraph explains the default behavior of components within the Next.js 'pages' directory as server components and the implications of this for rendering and hydration processes. It also touches on the challenges of integrating interactive elements like buttons within server components and the solutions available.

15:03

🔍 Deep Dive into Server Component Architecture

This section offers an in-depth analysis of the architecture and functionality of server components. The speaker explains how server components can pre-render pages on the server, stream HTML, and only after that, download the necessary JavaScript for client-side interactions. They discuss the optimization of the hydration process due to the reduced size of the JavaScript bundle, which contains only the client components. The paragraph also addresses the trade-offs between server and client components, such as the increased server load during rendering and the benefits of faster interactive page times.

20:04

🎯 Optimizing Component Choice for Performance

The focus of this paragraph is on the strategic decision-making process for choosing whether a component should be a server component or a client component. The speaker illustrates this with examples from an e-commerce website, explaining how certain components like product cards can be optimized by selectively rendering parts on the server and parts on the client. The discussion highlights the importance of this choice in influencing the overall performance and user experience, as well as the potential for reducing the JavaScript bundle size and speeding up the page load times.

25:05

🌐 Practical Example of Server vs. Client Components

In this segment, the speaker provides a practical coding example to demonstrate the difference between server and client components. They show how to create a simple Next.js application with page routing and how components within the 'pages' directory are treated as server components by default. The paragraph includes a demonstration of adding an interactive button, the errors encountered when trying to add event handlers to server components, and the solution of converting the button to a client component to handle interactions. The speaker also discusses the implications of this on the JavaScript bundle size and the overall optimization strategy for a web application.

📚 Conclusion and Future Considerations

The final paragraph wraps up the discussion on server components, summarizing the key points and the benefits they offer for improving web performance. The speaker encourages viewers to like and subscribe for more content and hints at future videos that will cover advanced techniques. This section serves as a conclusion, reinforcing the importance of server components in modern web development and their role in enhancing user experience through faster load times and more efficient resource utilization.

Keywords

💡React Server Components

React Server Components are a feature introduced in React 18.4 that allows developers to render parts of a React application on the server. This is pivotal for the video's theme as it discusses optimizing web application performance. In the script, it is mentioned as a concept that came with React 18.4 and is central to the discussion on improving user experience by reducing load times.

💡Hyddration

Hydrating in the context of React refers to the process where the client-side JavaScript takes over the static HTML content rendered on the server and makes it interactive. The video script discusses how, with the introduction of server components, hydration can be more efficient, as the JavaScript bundle size is reduced, leading to faster interaction times.

💡Client Components

Client Components are parts of a React application that are meant to be rendered on the client side, typically involving interactivity and dynamic behavior. The script emphasizes the importance of distinguishing between server and client components to optimize the application's performance, as client components require JavaScript to be downloaded and executed on the client's browser.

💡Server-Side Rendering (SSR)

Server-Side Rendering is a technique where the server generates the HTML of a web page and sends it to the client, which is then displayed in the browser. The video discusses SSR as a method to improve the perceived performance of React applications by reducing the time users see a blank screen, enhancing the user experience.

💡First Paint

First Paint refers to the time when the user sees something rendered on the screen, which is a critical performance metric. The video script explains how React Server Components can help in optimizing the time to first paint by rendering the shell of the page on the server and sending it to the client.

💡JavaScript Bundle

A JavaScript Bundle in web development is a collection of JavaScript files that are combined and minified for efficient loading. The script discusses the impact of JavaScript bundle size on the application's load time and how server components can reduce the size of the bundle that needs to be sent to the client.

💡Interactivity

Interactivity in a web application refers to the ability of the page to respond to user inputs like clicks or keyboard events. The video script mentions that with server components, the page can become interactive faster because the necessary JavaScript for interactivity can be reduced or optimized.

💡Component Hydration

Component Hydration is the process where the static markup sent from the server is 'hydrated' by the client-side React, making it interactive. The video script explains that with server components, the hydration process can be more streamlined because the JavaScript required for this process is minimized.

💡React 18

React 18 is a major version release of the React library that introduced several new features, including Server Components. The video script mentions React 18 as the version that brought the concept of server components, which is a key topic in the video.

💡Next.js

Next.js is a popular React framework that facilitates server-side rendering and static site generation. The script refers to Next.js as the framework that supports the implementation of React Server Components, indicating its role in the evolution of server-rendered React applications.

💡User Experience (UX)

User Experience is the overall experience a user has while interacting with a system, particularly in this context, a web application. The video script discusses various aspects of React Server Components and how they contribute to improving the overall user experience by making web applications load faster and respond more quickly to user interactions.

Highlights

Introduction to React Server Components and their significance in enhancing performance and user experience.

Explanation of the concept of React Server Components that emerged in React 18 and Next.js 13.4.

Clarification of the difference between Server-Side Rendering and React Server Components.

How React Server Components work and their role in improving the initial load time of web applications.

The problem of blank screen issues and user experience concerns with traditional React client components.

The introduction of Next.js' Pages Router and its support for Server-Side Rendering.

Practical implementation of React Server Components in Next.js applications.

The impact of React Server Components on decreasing JavaScript bundle size and improving site speed.

Discussion on the hydration process of React components and its significance in interactivity.

How to identify which components should be server components and which should remain client components.

The benefits of using React Server Components for developers familiar with React, without needing to learn new technologies.

Addressing the problem of increasing JavaScript bundle size with the addition of features in applications.

Optimizing the user experience by reducing the time to interactive for web pages using React Server Components.

Technical demonstration of creating a user page with server components in Next.js.

Error handling and solutions when using event handlers within server components.

The importance of careful selection of server components to optimize JavaScript bundle size and site performance.

Conclusion summarizing the benefits and practical applications of React Server Components.

Transcripts

हे एवरीवन वेलकम बैक वेलकम टू अनदर

एक्साइटिंग वीडियो एंड इस वीडियो के अंदर

हम बात करने वाले हैं रिक्ट सर्वर

कंपोनेंट्स की यस तो इस वीडियो के अंदर हम

ए टू जड समझने वाले हैं दैट सर्वर

कंपोनेंट्स क्या होते हैं किस तरह से

सर्वर कंपोनेंट्स वर्क करते हैं रिएक्ट के

अंदर एंड नेक्स्ट के अंदर ऑफ कोर्स हम एक

पीओ भी करेंगे हम प्रैक्टिकली

इंप्लीमेंटेशन को भी देखेंगे एंड अगर तुम

एक रिएक्ट डेवलपर या फिर एक नेक्स्ट

डेवलपर बनना चाहते हो तो ये वीडियो

तुम्हारे लिए सुपर डुपर इंपोर्टेंट है

बिकॉज इसके अंदर हम इन डेप्थ में समझने

वाले हैं दैट ली में क्या डिफरेंस है

सर्वर साइड एंटरिंग में रिएक्ट सर्वर

कंपोनेंट्स में और रिएक्ट क्लाइंट

कंपोनेंट्स में तो इस वीडियो को एंड तक

जरूर देखना एंड लेट्स स्टार्ट विद द

वीडियो तो सबसे पहले जब रिएक्ट सर्वर

कंपोनेंट्स का कंसेप्ट आया व्हिच इज लाइक

आई नो दैट रिएक्ट 18 में आया था वो एंड

नेक्स 13.4 में जब हमारे पास पप राउटर आया

था तो हमारे पास कुछ सर्वर कंपोनेंट्स का

कंसेप्ट था लेकिन स्टिल बहुत ज्यादा

कंफ्यूजन है दैट व्हाट इज द डिफरेंस

बिटवीन सर्वर साइड रेंडरिंग सर्वर

कंपोनेंट्स तो एगजैक्टली है क्या तो इस

वीडियो में उसको हम डिमिटी फाई करते और

अच्छे से समझते हैं राइट तो इसके लिए मैं

तुम्हें कुछ रिसोर्सेस भी प्रोवाइड करूंगा

बट अभी के लिए इसको समझते हैं दैट पहले हम

बात करते हैं दैट सिंपल जब हम सिंपल एक

रिएक्ट की बात करते हैं जब हम रिएक्ट में

सिंपल क्लाइंट कंपोनेंट्स बनाते हैं ओके

तो मैं अभी कोई भी लाइक सर्वर साइड

रेंडरिंग सर्वर कंपोनेंट्स की बात नहीं कर

रहा लेट्स टॉक अबाउट सिंपल रिएक्ट ठीक है

तो सिंपल रिएक्ट में जैसे हम आप तक

क्लाइंट कंपोनेंट्स बनाते आ रहे थे तो इस

पर्टिकुलर आर्किटेक्चर को समझने के लिए

व्हाट वी विल डू इज वी विल टेक एन

डायग्राम ठीक है तो यहां पर हमारे पास एक

डायग्राम होने वाली है जिसमें हम मेजर्ली

दो चीजों के बारे में बात करेंगे सो यू

कैन अज्यू एक होता है सर्वर राइट वन इज

सर्वर एंड सेकंड वन इज क्लाइंट राइट तो

व्हाट यू कैन एज्यूम इज दैट ये जो ऊपर

वाली लाइन है दिस इज़ फॉर द सर्वर तो यह

पर्टिकुलर जो ब्लॉक है यह हम सर्वर के लिए

यूज़ करेंगे अभी हम रिएक्ट की बात कर रहे

हैं एंड सिमिलरली जो ये नीचे वाला ब्लॉक

है इसको हम बात करेंगे क्लाइंट की ओके सो

लेट्स अंडरस्टैंड दैट रिएक्ट अगर सिंपल

रिएक्ट में हम बात कर रहे हैं तो सिंपल

रिएक्ट किस तरह से वर्क करती है ओके सो

व्हेन एवर यू विजिट अ वेब पेज सो लेट अस

से दैट तुमने मेरी वेबसाइट को विजिट विजिट

किया तो गलती से मैंने लोकल होस्ट को ओपन

कर लिया तो लेट अस से दैट तुमने मेरी

वेबसाइट को विजिट किया सो तुमने एक

रिक्वेस्ट किया पकडे के ऊपर एंड एज्यूम

करते हैं दैट ये जो पर्टिकुलर पेज है दिस

इज बिल्ट विद सिंपल रिएक्ट ठीक है तो ये

सिंपल रिएक्ट में बना है तो व्हाट हैपेंस

इज व्हेन यू मेक अ विजिट टू

सिंपल तुम्हारे पास एक जेएस बंडल का लिंक

होगा ओके तो दैट मींस जब हमने सर्वर के

ऊपर रिक्वेस्ट किया तो व्हाट हैपेंड हमारे

सर्वर ने हमें एक जेएस बंडल का लिंक दे

दिया एंड अब हमारा ब्राउजर क्लाइंट साइड

पे इस पर्टिकुलर बंडल को करेगा डाउनलोड

ओके

दैट्ची जो बंडल है दिस इज़ लाइक अप्रॉक्स

50 एब तो पहले तो यूज़र को वेट करना होगा

फॉर लाइक फॉर दिस बंडल टू डाउनलोड राइट तो

पहले 50mb का बंडल डाउनलोड होगा अ एंड

जिसमें थोड़ा सा टाइम लगेगा एंड यहीं से

एक प्रॉब्लम स्टार्ट होगी दैट फर्स्ट ऑफ

ऑल यूजर के पास एक ब्लैंक स्क्रीन होगी

बिकॉज़ अभी जेएस का जो बंडल है वो डाउनलोड

हो रहा है ओके जब जावास्क्रिप्ट इस बंडल

जब रिएक्ट का ये जो बंडल है जेएस बंडल है

जब ये डाउनलोड हो जाएगा उसके बाद रिएक्ट

क्या करेगी सिंपल रिएक्ट विल ट्राई टू री

रेंडर विल ट्राई टू रेंडर नॉट री रेंडर

रेंडर द शेल इस पर्टिकुलर पॉइंट का क्या

मतलब ओके रेंडर शेल का क्या मतलब रेंडर

शेल का मतलब होता है दैट इफ यू नो दैट तो

रेंडर शेल स्टेज पे क्या होगा तुम्हारा जो

पेज है जो हमारा रिएक्ट के अंदर जो पेज है

वो स्क्रीन पे विजिबल हो जाएगा एंड वहां

पर हर जगह हमारे पास क्या होंगे लोडिंग

इंडिकेटर्स होंगे राइट सो फॉर एग्जांपल

अगर हम किसी वेबसाइट को विजिट करते हैं तो

हमें लाइक हेडर फुटर दिखना स्टार्ट हो

जाएगा हमें पेज का एक लेआउट दिखना स्टार्ट

हो जाएगा लेकिन अभी भी जो हमारा पेज का

डाटा है वो फेच नहीं हुआ है ठीक है तो

मतलब कि यूजर को पहले जेएस बंडल डाउनलोड

करना पड़ा व्हिच इज वाज अबाउट 50 एब

जिसमें यूजर जस्ट वेट कर रहा था एक खाली

स्क्रीन की तरफ देख रहा था एंड उसके बाद

ये जो रेंडर शेल है यह वाला प्रोसेस हुआ

एंड रेंडर शेल ने क्या किया हमारे लो

लोडिंग स्टेट्स को इनिश आइज कर दिया तो

यानी कि अब यूजर को लोडिंग स्टेट्स दिख

रही है ओके इस पॉइंट पे जितने भी हमारे

यूज इफेक्ट्स हुक होंगे वो रन करेंगे एंड

हमारे जो कंपोनेंट्स हैं वो एक-एक करके

यहां पर एपीआई कॉल करना स्टार्ट करेंगे सो

यू कैन से दैट यहां पर क्या होगा डीवी

क्वेरीज होंगी राइट तो ये हमारे एक सर्वर

पे होंगी तो यानी कि ये जब हमारा पेज

रेंडर हो जाएगा फर्स्ट रेंडर होगा उसके

बाद हमारे यूज इफेक्ट्स रन करेंगे एंड दे

विल मेक अ डीबी क्वेरी नाउ यू कैन अजूम

दैट हमारे जितने भी कंपोनेंट्स हैं लाइक

हमारे बहुत सारे पैरेलल बैक एंड फोर्थ बैक

एंड फोर्थ रिक्वेस्ट होंगी एंड ये डीबी

क्वेरी कुछ अ ऑफकोर्स कुछ टाइम लेगी राइट

आफ्टर द डीबी क्वेरी इज डन मतलब कि हमारा

जो एपीआई कॉल है वो सक्सेसफुल रहा हमारे

पास डाटा आ गया बैक एंड से उसके बाद क्या

होगा यह वापस से रिक्वेस्ट जो रिस्पांस है

वो हमारे क्लाइंट में आएगा एंड उसके बाद

हमारे जितने भी कंपोनेंट्स हैं वो रिर

करेंगे विद दी डाटा तो ये है सि ये है

सिंपल अप्रोच जो अभी तक सिंपल रिएक्ट के

अंदर हो रही थी ओके अब इसमें प्रॉब्लम्स

को आइडेंटिफिकेशन में प्रॉब्लम्स को

आइडेंटिफिकेशन ना स्टार्ट करते हैं तो

सबसे पहली प्रॉब्लम जो है दैट इज कि यहां

तक ना यहां तक सिर्फ जेएस का बंडल डाउनलोड

हो रहा था एंड यहां तक यूजर वाज स्टेयरिंग

एट अ ब्लैंक स्क्रीन तो यहां पे हम बोल

देते हैं दैट यहां तक क्या था ब्लैंक

स्क्रीन थी तो मतलब कि यूजर एक्सपीरियंस

यहां पर बिल्कुल भी अच्छा नहीं है बिकॉज़

यूजर तुम्हारी वेबसाइट पे आया एंड ही इज

स्टेयरिंग एट अ ब्लैंक स्क्रीन राइट तो

बहुत हाई चांसेस है दैट यूजर तुम्हारी

वेबसाइट को छोड़ के जा सकता है प्लस यहां

पर एक और प्रॉब्लम है ओवर टाइम जैसे-जैसे

हम और फीचर्स ऐड करें हमारे एप्लीकेशन के

अंदर हमारा जो ये जेएस बंडल साइज है ये

ओवर टाइम इंक्रीज होता जाएगा जिससे हमारा

जो ये टाइम है ना ब्लैंक स्क्रीन का ये

इंक्रीज होता जाएगा ओके सो पहली प्रॉब्लम

ये है दूसरा क्या होगा इस पर्टिकुलर पॉइंट

पे राइट इस पर्टिकुलर पॉइंट पे यूजर विल

गेट द फर्स्ट पेंट ओके फर्स्ट पेंट का

क्या मतलब होता है दैट इस पर्टिकुलर पॉइंट

ऑफ टाइम पे यूजर को कुछ स्क्रीन पर विजिबल

होगा कुछ कंटेंट चाहे वो लोडिंग कंटेंट ही

है लेकिन इस पर्टिकुलर पॉइंट पर क्या होगा

हमारा जो पेज है वो फर्स्ट पेंट होगा जैसे

फुटर दिखना स्टार्ट हो जाएगा हेडर दिखना

स्टार्ट हो जाएगा बट स्टिल पेज के अंदर

अभी कंटेंट नहीं है अभी हर जगह हमें

लोडिंग इंडिकेटर्स दिख रहे हैं तो अभी भी

यूजर को यहां पे वेट करना पड़ेगा ओके

व्हिच इज ओके बट एटलीस्ट यूजर को कुछ दिख

रहा है एंड यहां पर बिकॉज हमारी जो

जावास्क्रिप्ट है वो लोड हो चुकी है तो

हमारा पेज यहां पर इंटरेक्ट है ओके

इंटरेक्ट का क्या मतलब है दैट अगर कोई

बटंस वगैरह है हमारी स्क्रीन पे तो वो सब

विजिबल है वो सब वर्किंग है बट ऑफकोर्स

हमारे पास कोई भी कंटेंट नहीं है इस पॉइंट

तक व्हिच इज ओके देन व्हाट हैपेंस जब

हमारी ये डीबी क्वेरी होगी एंड उसके बाद

जब ये री रेंडर होगा हेयर आई कैन से इस

पर्टिकुलर पॉइंट ऑफ टाइम पे आई कैन से दैट

आवर पेज इज रेडी आवर पेज इज रेडी विद दी

कंटेंट एंड उसके बाद ही यूजर हमारी

वेबसाइट के साथ इंटरेक्ट करना स्टार्ट कर

सकता है बिकॉज़ कंटेंट हमारा इस पॉइंट तक

रेडी हुआ तो अगर हम इस पर्टिकुलर

आर्किटेक्चर को थोड़ा सा डीप एनालाइज करते

हैं व्हाट यू विल नोटिस इज़ दैट फर्स्ट ऑफ

ऑल यहां पर जो हमारा एसओ है ना वो बिल्कुल

ही पुअर स्कोर में आएगा रीजन बीइंग फर्स्ट

ऑफ ऑल हमारी जो वेब वेबसाइट है वो बहुत ही

स्लो लोड हो रही है राइट तो यहां पर हमारी

जो वेबसाइट है वो बहुत ज्यादा स्लो लोड हो

रही है सेकंड यूजर को इनिशियली ब्लैंक

स्क्रीन देखनी पड़ रही है जिससे हमारा जो

यूजर ड्रॉप परसेंटेज है वो बहुत ज्यादा

इंक्रीज हो सकता है तो ये थी नॉर्मल

रिएक्ट तो नॉर्मल रिएक्ट के अंदर डेवलपर

एक्सपीरियंस वाज टू गुड ठीक है तो जब इफ

यू आर अ रिएक्ट डेवलपर तो अगर हम रिएक्ट

के साथ यूज़ करके कोई एप्लीकेशंस बना रहे

हैं तो एज अ डेवलपर मेरा जो एक्सपीरियंस

है बिल्डिंग एप्लीकेशंस वो फास्ट होगा

राइट बिकॉज़ मुझे डॉम को मैनुअली अपडेट या

डॉम को मैनिपुलेट नहीं करना पड़ रहा तो

रिएक्ट वाज अ गुड लाइब्रेरी फॉर डेवलपर्स

बट इसके कॉन्स क्या थे दैट हमने यूजर

एक्सपीरियंस को एंड हमने दैट इज नोन एज

लाइक य एंड हमने एसओ को कॉम्प्रोमाइज कर

दिया राइट तो यह थी नॉर्मल रिएक्ट व्हिच

इज गुड नाउ नेक्स्ट यस टीम ने क्या किया

नेक्स्ट यस टीम ने इसको एज एन अपॉर्चुनिटी

लिया तो उन्होंने देखा दैट रिएक्ट एक बहुत

ही पावरफुल लाइब्रेरी है नो डाउट इन दैट

डेवलपर्स लव रिएक्ट लेकिन इसको हम थोड़ा

सा ऑप्टिमाइज कर सकते हैं राइट तो

उन्होंने क्या किया इस इसी आर्किटेक्चर को

हम कर लेते हैं कॉपी एंड इसको हम वापस से

यहीं पे कर लेते हैं पेस्ट तो यहां पर हम

बात करेंगे अब नेक्स्ट यर्स की पुराने

नेक्स्ट ईयर्स की जिसमें हमारे पास पेजेस

राउटर होता था ओके तो यहां पर हम बात करते

हैं नेक्स्ट यर्स जिसमें हम क्या यूज करते

थे जिसमें हम यूज़ करते थे पेजेस राउटर

यानी कि सर्वर साइड रेंडरिंग की सपोर्ट थी

राइट तो नेक्स्ट य इस पूरे आर्किटेक्चर को

किस तरह से

रीफैक्स करते हैं लेट्स रिमूव ऑल द एरोज

ठीक है सारे एरोज को रिमूव करते हैं

उन्होंने बोला हम क्या करेंगे ना हम इस

डीबी क्वेरी को ना पहले बैक एंड पे करेंगे

बिकॉज हम सर्वर साइड रेंडरिंग कांसेप्ट

लेकर आ रहे हैं तो वो कांसेप्ट लेकर आए थे

सर्वर साइड रेंडरिंग का ओके तो सर्वर साइड

रेंडरिंग में व्हाट यू कैन डू इज अब हम

डीवी क्वेरी पहले कर सकते हैं बिकॉज हमारा

जो कंपोनेंट है हमें पता है हमारा जो

रिएक्ट है वो पहले सर्वर पर रेंडर होगा

उसके बाद आल्सो व्हाट दे डिड इज जो ये

रेंडर शेल है ना उसको भी इन्होंने शिफ्ट

कर दिया सर्वर के ऊपर मतलब कि जो भी हम

कोड रिएक्ट के अंदर लिखेंगे उसका जो

फर्स्ट रेंडर होगा वो सर्वर के ऊपर होगा

व्हिच इज गुड वो सर्वर के ऊपर होगा तो

इससे क्या हुआ ठीक है इससे जो हमारा जेएस

बंडल साइज है उसको हम थोड़ा सा यहां पे

शिफ्ट करते हैं अब हमारा जो ये फर्स्ट

पेंट था ना इफ यू रिमेंबर दिस फर्स्ट पेंट

वाली चीज अब वो फर्स्ट पेंट हमारी यहां पर

आ चुकी है राइट तो मतलब कि आई विल टेल यू

व वन थिंग ब्लैंक स्क्रीन अब यहां से चली

गई बिकॉज़ क्या हो रहा है हमारा जो रिएक्ट

एप्लीकेशन है वो पहले सर्वर पर रडर हो रहा

है एंड जो भी हमारा

एटीएमएल पे सेंड कर देते हैं ओके तो यू

कैन एज्यूम दैट हमारे पास इस पर्टिकुलर अप

पॉइंट ऑफ टाइम पे हम हमारे पास फर्स्ट

पेंट होगा बिकॉज़ हमारा जो डीबी क्वेरी है

वो बैक एंड पे हुआ उसके बाद इस रेंडर शेल

में हमारे पास कुछ डटा भी है जो इस डीबी

क्वेरी ने रिटर्न किया होगा एंड हमारा जो

फर्स्ट पेंट है वो काफी ज्यादा ऑप्टिमाइज

हो चुका है एंड यू कैन सी दैट पहले हमारा

फर्स्ट पेंट काफी लेट होता था लेकिन अब

हमारा फर्स्ट पेंट पहले होता है व्हिच इज

गुड द प्रॉब्लम इज दैट ठीक है हमारे पास

यहां पर आया लेकिन अभी जो हमारा पेज है ना

इस पर्टिकुलर पॉइंट ऑफ टाइम पे वो

इंटरेक्ट नहीं कर सकता देखो यहां पर लेटर

से हमारे पास एक कोई रिएक्ट का कोड था ठीक

है हमारे पास यहां पर एक रिएक्ट का कोड था

ये ये सर्वर पर रेंडर हो गया ये सर्वर पर

रेंडर हो गया विद दी डाटा बिकॉज़ हमने

सर्वर के ऊपर क्या किया हमने सर्वर के ऊपर

डीवी क्वेरीज वगैरह भी की तो यानी कि इस

पर्टिकुलर पॉइंट ऑफ टाइम पे बट द प्रॉब्लम

इज दैट ये पर्टिकुलर जो पेज है ना ये

इंटरेक्टेबल नहीं है मतलब कि अगर इसके ऊपर

कोई बटंस हैं इसके ऊपर कोई लिंक्स है

एनीमेशंस है वो वर्क नहीं करेंगी एंड डू

यू नो द रीजन उसका रीजन क्या है दैट इसको

इंटरेक्टेबल होने के लिए जावास्क्रिप्ट की

जरूरत है व्हिच इज गुड ओके तो इसको

जावास्क्रिप्ट की जरूरत है तो यानी कि इस

पॉइंट ऑफ टाइम पर क्या होगा हमारा जो

ब्राउजर है ना वो जावास्क्रिप्ट को

डाउनलोड करना स्टार्ट कर देगा ओके वो

जावास्क्रिप्ट को डाउनलोड करना स्टार्ट कर

देगा तो मतलब कि जब बैकग्राउंड में हमारी

जावास्क्रिप्ट लोड हो रही है ना यूजर के

पास एक कंटेंट है स्क्रीन के ऊपर वो भी

विद डाटा व्हिच इज अ गुड थिंग उसके बाद

क्या होगा अब हमारी जावास्क्रिप्ट लोड

होगी 50mb की व्हिच इज ओके यूजर वेट कर

रहा है तो बैकग्राउंड में हो रहा है एंड

उसके बाद एक प्रोसेस होता है जिसको हम

बोलते हैं हाइड्रेशन ओके जिसको हम बोलते

हैं हाइड्रेशन रिएक्ट हाइड्रेशन उसके बाद

क्या होगा ये रिएक्ट हाइड्रेशन होगा नाउ

व्हाट इज दिस रिएक्ट हाइड्रेशन हाइड्रेशन

का मतलब होता है दैट जितना भी हमारा पेज

है राइट जितना भी हमारा स्टैटिक पेज था ना

इसकी जब जेएस डाउनलोड हो जाती है उसके बाद

रिएक्ट क्या करती है इस पूरे डॉम को पूरे

हमारे पेज को ट्रैवर्स करती है डॉम

ट्रैवर्स करती है एंड उसके ऊपर जितने भी

इवेंट लिसन होते हैं वो अटैच कर देती है

सो दैट हमारा जो पेज है वो इंटरेक्टेबल हो

जाए तो मतलब कि क्या हुआ दैट इस पर्टिकुलर

पॉइंट ऑफ टाइम पे हमारे पास सिर्फ फर्स्ट

पेंट था लेकिन हमारा पेज जो था वो

इंटरेक्टेबल नहीं था बटंस वगैरह वर्क नहीं

करेंगे क्यों बिकॉज़ अभी जावास्क्रिप्ट

डाउनलोड नहीं हुई ठीक है उसके बाद

जावास्क्रिप्ट डाउनलोड होगी एंड फिर

रिएक्ट हाइड्रेशन प्रोसेस करेगी इसका क्या

मतलब दैट जितने भी हमारे कंपोनेंट्स हैं

जिनको इंटरेक्टेबल इंटरेक्ट बिलिटी चाहिए

जैसे बटंस को कोई इवेंट लिस्नर्स चाहिए या

फिर कोई एनीमेशंस है तो वो सारी चीजें

रिएक्ट यहां पर करेगी एंड इस पर्टिकुलर

पॉइंट ऑफ टाइम पे क्या होगा हमारा जो पेज

है वो इंटरेक्ट हो जाएगा ओके इसके बाद

हमारा इंटरेक्ट हो गया एंड उसके बाद इफ यू

हैव एनीथिंग ठीक है इसके बाद अगर हमारे

पास कोई भी ऐसी चीज है जिसमें हमें

क्लाइंट साइ डेटा फेचिंग करनी है उसके बाद

वी कैन मेक अ न्यू डीबी क्वेरी ठीक है

लाइक फॉर एग्जांपल इफ यू वांट ठीक है अगर

कोई भी हमें करना है तो वो प्रोसेस एज इट

इज फिर कंटिन्यू रहता है क्लाइंट

कंपोनेंट्स के अंदर ठीक है तो यानी कि अगर

हमारे पास कोई भी यूज़ इफेक्ट्स है या फिर

हम रिएक्ट क्वेरी यूज़ कर रहे हैं तो फिर

वो चीजें एज नॉर्मल चलती हैं बट द थिंग इज

दैट एक सेकंड हम इसको पहले एरोज बना लेते

हैं राइट तो ये चीजें नॉर्मल चलती हैं तो

बेसिकली यहां पर हुआ क्या हमने फर्स्ट

पेंट को बहुत ज्यादा ऑप्टिमाइज कर दिया

राइट फर्स्ट पेंट भी प्लस यहां पर हमारे

पास पार्शियल डाटा भी होगा ओके तो जितना

भी डाटा हमने सर्वर साइड रेंडर किया है ना

वो हमारे पास यहां पर होगा ओके तो इससे

क्या चीजें सॉल्व हुई नंबर वन चीज जो

सॉल्व हुई दैट इज एसओ बिकॉज अब एसईओ के

पास कोई भी ब्लैंक स्क्रीन नहीं है राइट

इस पर्टिकुलर टाइम पे हमारे पास एक ब्लैंक

स्क्रीन थी तो जितने भी बॉट्स आएंगे उनको

पहली बात क्या दिखेगा उनको ब्लैंक स्क्रीन

दिखेगी एंड बिकॉज हमारा सारा कंटेंट

जावास्क्रिप्ट के थ्रू जनरेट हो रहा था तो

उस केस में में क्या होगा एसओ का जो स्कोर

है वो बहुत ज्यादा पुअर हो जाएगा बट यहां

पर हम क्या करते हैं हम रेंडरिंग करते हैं

सर्वर पे एंड जो भी हमारा

html4 पे सेंड कर देते हैं तो इसका क्या

मतलब दैट जो हमारे पास पार्शियल डाटा है

ना वो पहली बात हमारे पास फर्स्ट पेंट है

तो यानी कि कोई भी ब्लैंक स्क्रीन नहीं है

एंड बिकॉज़ जितना भी डाटा हमने सर्वर पे

रेंडर किया है उसके हमारे पास स्टैटिक

कोई भी ब्लैंक स्क्रीन नहीं दिखनी पड़ेगी

राइट एंड थर्ड बेस्ट थिंग इज दैट अगर एज अ

डेवलपर आई एम कंफर्टेबल विद रिएक्ट तो मैं

यहां पर रिएक्ट में ही कोड कर सकता हूं तो

मुझे कोई भी न्यू चीज सीखने की जरूरत नहीं

है मुझे कोई भी मतलब अपने स्किल्स के साथ

या फिर अपने अ कंफर्ट के साथ कंप्रोमाइज

नहीं करना पड़ेगा आई कैन कंटिन्यू माय

नॉलेज ऑफ रिएक्ट यूजिंग इन द नेक्स्ट

ईयर्स तो यह था हमारा पेजेस राउटर ओके

पेजेस राउटर नाउ डू यू सी एनी प्रॉब्लम

हियर आल्सो तो यहां पर अगर हम देखें दैट

नेक्स्ट यर्स ने बहुत ही अच्छे तरीके से

प्रॉब्लम को सॉल्व किया राइट बट यहां पर

एक प्रॉब्लम था तो आई विल टेल यू द

प्रॉब्लम ओके इसको इसको बहुत आराम से

समझना लेट अस से दैट ये जो हमारा पेज बना

राइट सो लेट अस से दैट ये जो हमारा पेज

आया इस पेज के अंदर ना यू हैव टोटल 200

कंपोनेंट्स ओके यू हैव टोटल 200

कंपोनेंट्स

कंपोनेंट्स एंड अज्यू करते हैं दैट एक

कंपोनेंट इज़ ऑफ़ 1 एब सो आई कैन से दैट 1

एब ईच तो यानी कि हमारा टोटल

जावास्क्रिप्ट का साइज क्या हुआ 200mb

व्हिच इज़ ओके तो यानी कि इस पर्टिकुलर

पॉइंट ऑफ़ टाइम पे हम 200 एब जेएस बंडल

डाउनलोड कर रहे हैं ओके अगर मैं यहां पर

बोलूं दैट इसमें से ना 150 कंपोनेंट्स ऐसे

हैं जो लाइक सिंपल डाटा को डिस्प्ले करते

हैं मतलब कि उसके अंदर कोई भी इंटरेक्ट

बिलिटी है ही नहीं लेकिन 50 कंपोनेंट्स

ऐसे हैं 50 कंपोनेंट्स ऐसे हैं जिसके अंदर

यू हैव इंटरेक्टेबल व्हिच आर इंटरेक्टेबल

ओके तो इंटरेक्टेबल जैसे फॉर एग्जांपल कोई

बटन हो सकता है कोई लिंक हो सकता है तो इस

तरह के कुछ कंपोनेंट्स है सो माय पॉइंट इज

दैट क्या हमें इस पर्टिकुलर कंपोनेंट्स की

दैट इज 50mb क्या हमें इसकी जावास्क्रिप्ट

डाउनलोड करने की जरूरत है बिकॉज़ अगर मैं

यहां पे वापस जाता हूं फॉर एग्जांपल अगर

मैं अपनी वेबसाइट की एग्जांपल लेता हूं

यहां पर आई कैन सी दैट ये जो सब्सक्राइबर

काउंट है ये जो वीडियोस है ये इंटरेक्टेबल

नहीं है राइट ये सिर्फ एक डिस्प्ले है

क्या मुझे इस पर्टिकुलर कंपोनेंट की या

फिर या फिर फॉर एग्जांपल अगर हम इस

कंपोनेंट की बात करते हैं जिसमें सिर्फ

टेक्स्ट डाटा है क्या मुझे इसकी

जावास्क्रिप्ट डाउनलोड करने की जरूरत है

अगर मैं नीचे भी जाता हूं यू कैन सी दैट

ये सिंपल इमेजेस है राइट तो क्या मुझे

इनकी जावास्क्रिप्ट डाउनलोड करने की जरूरत

है नहीं बिकॉज उसमें कोई इंटरेक्ट बिलिटी

नहीं है तो हम क्या करते हैं तो नेक्स्ट

आइट में हम क्या करेंगे हम कहीं ना कहीं

इस पर्टिकुलर जावास्क्रिप्ट को एलिमिनेट

करने का ट्राई करेंगे सो दैट ये जो हमारा

जीएस का बंडल साइज है इसको हम रिड्यूस कर

पाएं ओके बिकॉज़ इस टाइम पे क्या हो रहा

है जो कंपोनेंट्स इंटरेक्टेबल भी नहीं है

हम उसकी भी जेएस को डाउनलोड कर रहे हैं तो

इससे क्या हो रहा है मेरा हाइड्रेशन

प्रोसेस लेट हो रहा है एंड उससे और क्या

हो रहा है एक तो मेरा जेएस का बंडल साइज

इंक्रीज हो रहा है हाइड्रेशन प्रोसेस लेट

हो रहा है एंड मेरा जो पेज है जो उसका

फर्स्ट इंटरेक्टेबल पॉइंट है वो लेट हो

जाता है ठीक है तो हाउ टू डू दिस इज ठीक

है तो हाउ टू डू दिस इज तो इस केस में

व्हाट यू कैन डू इज इस केस में वी हैव

सर्वर कंपोनेंट्स ठीक है इस पर्टिकुलर

प्रॉब्लम को सॉल्व करने के लिए वी हैव

सर्वर कंपोनेंट्स तो रिएक्ट

18.4 रिएक्ट 13.4 ऑनवर्ड व्हाट हैपेंड नॉट

रिएक्ट सॉरी नेक्स्ट ए 13.4 तो यहां पे हम

लिखते हैं नेक्स्ट एस 13.4 ऑनवर्ड एक न्यू

कांसेप्ट आया था दैट वाज इन प डायरेक्टरी

जिसके अंदर वी हैड एन ऑप्शन फॉर सर्वर

कंपोनेंट्स ओके तो तो सर्वर कंपोनेंट्स

कांसेप्ट बड़ा सिंपल है वो क्या कहते हैं

दैट व्हेन एवर यू आर मेकिंग अ कंपोनेंट ना

आप ना एक्सप्लीसिटली मेंशन करो दैट ये ना

सर्वर कंपोनेंट है ठीक है वी हैव टू मेंशन

दैट ये सर्वर कंपोनेंट है एंड वी हैव टू

टेल दैट ये क्या है क्लाइंट कंपोनेंट तो

व्हाट रिएक्ट विल डू इज अगर कोई सर्वर

कंपोनेंट है ना अगर कोई सर्वर कंपोनेंट है

तो उसकी रेंडरिंग बैक एंड पे ही होगी एंड

उसका जो जेएस है ना उसकी जो जावास्क्रिप्ट

है वो फ्रंट एंड के ऊपर कभी भी शिप नहीं

होगी दोबारा बताता हूं इस इस पॉइंट पे

रिएक्ट क्या कहती है दैट एक काम करो यू

हैव टू टेल मी दैट कौन सा कंपोनेंट सर्वर

कंपोनेंट है कौन सा कंपोनेंट क्लाइंट

कंपोनेंट है एंड बेस्ड ऑन दैट व्हाट आई

विल डू इज कि अगर वो सर्वर कंपोनेंट है ना

तो उसकी जो जावास्क्रिप्ट है ना वो फ्रंट

एंड पे हम शिप ही नहीं करेंगे डू यू नो

व्हाई बिकॉज उसको हम बैक एंड पे ही रेंडर

कर लेंगे हम सर्वर पर ही उसको रेंडर कर

लेंगे एंड उसका जो भी डाटा बनेगा जो भी

उसका एटीएमएल सीएसएस बनेगा उसको हम फ्रंट

एंड पे कर देंगे स्ट्रीम तो जिससे क्या

होगा जिससे हमारा जेएस का बंडल साइज हो

जाएगा डिक्रीज तो इस पर्टिकुलर पॉइंट पे

हमारे पास सर्वर कंपोनेंट्स 150 थे अगर

क्लाइंट कंपोनेंट सिर्फ 50 हैं तो यानी कि

50mb ऑफ़ जावास्क्रिप्ट ही होगी यहां पे

तो यहां पर वी हैव रिड्यूस दिस बंडल साइज़

जिससे क्या हुआ ये जो पर्टिकुलर बंडल

साइज़ था ये हमारा हो गया बहुत ज्यादा

डिक्रीज ओके तो ये हमारा डिक्रीज हो गया

एंड ऑफकोर्स इससे क्या होगा हमारा

हाइड्रेशन प्रोसेस भी थोड़ा सा फास्ट होगा

बिकॉज़ स्मॉलर जावास्क्रिप्ट एंड बहुत

जल्दी होगा राइट तो हमारा हाइड्रेशन

प्रोसेस भी हो गया छोटा जिससे हमारा जो

पेज का इंटरेक्टेबल टाइम था ओके टाइम टू

इंटरेक्ट वो भी हो गया डिक्रीज एंड ओवरऑल

मेरे वेबसाइट की जो स्पीड है यू कैन

एज्यूम दैट बहुत ज्यादा इंक्रीज हो जाएगी

बिकॉज हमने अननेसेसरीली जावास्क्रिप्ट को

रिमूव कर दिया तो यह कंसेप्ट है सर्वर

कंपोनेंट्स का ओके तो सर्वर कंपोनेंट्स तो

अगर हम एक बेसिक डिफरेंस देखते हैं ना

सर्वर साइड रेंडरिंग में तो सर्वर साइड

रेंडरिंग्स का मतलब होता है बोथ ओके बोथ

ऑन क्लाइंट एंड सर्वर बट जब हम सर्वर

कंपोनेंट्स की बात करते हैं ना सर्वर

कंपोनेंट्स की तो इसका मतलब होता है सर्वर

ओनली तो यानी कि हम उसको एकस इलिसिटली बता

रहे हैं दैट यार ये ना एक सर्वर कंपोनेंट

है इसकी जावास्क्रिप्ट को डाउनलोड मत करना

ओके एंड अगर वो एक सर्वर कंपोनेंट है ना

यू कैन नॉट ऐड इंटरेक्टेबल ठीक है तो

उसमें इंटरेक्टेबल हम ऐड कर ही नहीं सकते

तो इसको एक बार प्रैक्टिकली देखते हैं तो

आई होप दैट हमें आर्किटेक्चर तो समझ आ गया

तो एक बार मैं रीकैप भी कर देता हूं तो

नॉर्मल रिएक्ट के अंदर क्या होता था दैट

यू हैव जेएस बंडल तो पहले जेएस बंडल

डाउनलोड होता था व्हिच इज लाइक वेरी ह्यूज

उसके बाद हमारा रेंडर होता था जिसमें

हमारे पास लोडिंग स्टेट्स आती थी एंड इस

पर्टिकुलर पॉइंट ऑफ़ टाइम पे यूजर के पास

बस एक ब्लैंक स्क्रीन है फिर हमारा पेज

इंटरेक्ट भी हो जाता था एंड फर्स्ट पेंट

भी होता था फिर जितने भी हमारे यूज इफेक्ट

हुक्स होते हैं क्लाइंट पे वो डेटाबेस

क्वेरीज करेंगे मतलब कि वो सर्वर के ऊपर

एपीआई कॉल्स करेंगे एंड उसके बाद जब हमारे

पास डेटा वापस आएगा उसके बाद री रेंडर एंड

इस पर्टिकुलर पॉइंट ऑफ टाइम पे हमारा जो

कंटेंट है वो रेडी होगा नेक्स्ट इस ने

उसको सॉल्व किया यूजिंग सर्वर साइड

रेंडरिंग जिसमें हम क्या कर सकते हैं हम

डेटाबेस क्वेरी को पहले कर सकते हैं प्लस

हम रेंडर शेल को भी हम थोड़ा सा पहले कर

सकते हैं मतलब कि हम पेजेस को रिएक्ट को

सर्वर के ऊपर रेंडर कर सकते हैं एंड उसके

बाद हम क्या कर सकते हैं

html4 पे सेंड कर देंगे उससे क्या होगा

हमारे पास कुछ डाटा पहले ही होगा एंड

हमारा जो फर्स्ट पेंट है वो थोड़ा सा

जल्दी हो जाएगा सो यू कैन सी दैट फर्स्ट

पेंट को हमने इधर मूव कर दिया व्हिच इज

ग्रेट लेकिन इस पर्टिकुलर पॉइंट ऑफ टाइम

पे जो हमारा पेज है वो इंटरेक्टेबल नहीं

होगा बिकॉज़ हमारे पास अभी जावास्क्रिप्ट

नहीं है तो जावास्क्रिप्ट लोड होगी फिर एक

प्रोसेस होता है हाइड्रेशन का जिसके अंदर

रिएक्ट पूरे डॉम को ट्रैवर्स करके पेज को

इंटरेक्टेबल बनाती है बिकॉज़ अब हमारे पास

जावास्क्रिप्ट डाउ ड हो चुकी है एंड उसके

बाद हमारा पेज यहां पर इंटरेक्ट हो जाएगा

तो ये पहले वाली अप्रोच से अच्छा है पहले

वाली अप्रोच से फास्ट है थर्ड आइट केशन

में व्हाट वी हैव डन इज़ हमने ट्राई किया

कि अगर हम किसी तरह से इस जेएस बंडल को

डिक्रीज कर सकें इस जेएस बंडल को हम कैसे

डिक्रीज कर रहे हैं हम एक्सप्लीसिटली

मेंशन करेंगे दैट कौन सा हमारा सर्वर

कंपोनेंट है कौन सा हमारा क्लाइंट

कंपोनेंट है एंड सर्वर कंपोनेंट्स की जो

जेएस है उसको हम फ्रंट एंड पे शिफ्ट नहीं

करेंगे जिससे मेरा जेएस बंडल साइज बहुत

ज्यादा हो जाएगा छोटा जिससे हाइड्रेशन

प्रोसेस भी मेरा बहुत जल्दी होगा एंड मेरा

पेज जल्दी लोड एंड इंटरेक्टेबल हो जाएगा

इंप्रूविंग ओवरऑल य यूज एक्सपीरियंस एंड द

एसओ तो ये है पूरा सर्वर कंपोनेंट्स का

कंसेप्ट अब इसको हम थोड़ा सा प्रैक्टिकली

देखते हैं ओके तो अगर मैं यहां पर एक कोड

को ओपन करता हूं तो यहां पर हम एक कोड को

ओपन कर लेते हैं तो ये है मेरा वीएस कोड

जिसके अंदर एक नॉर्मल एक प्लेन अ नेक्सस

एप्लीकेशन है विद प राउटर तो यहां पर हम

एक काम करते हैं यहां पर लेट्स डू अ यान

डेव ओके तो पहले हम इसको यार्न डेव कर

लेते हैं तो ऑन द डेवलपमेंट सर्वर तो यहां

पर व्हाट यू विल नोटिस इ दैट जो भी हम पप

राउटर के अंदर बनाते हैं कंपोनेंट्स वो

बाय डिफॉल्ट सर्वर कंपोनेंट्स होते हैं

ओके वो बाय डिफॉल्ट क्या होता है सर्वर

कंपोनेंट्स फॉर एग्जांपल एक रूट बनाते हैं

यूजर का इसके अंदर लेट्स डू वन थिंग इसके

अंदर हम एक पेज टीए एक बनाते हैं ओके पेज

डॉट t ए एक ओके एंड यहां पर व्हाट आई कैन

डू आई कैन से एक्सपोर्ट डिफॉल्ट

डिफॉल्ट फंक्शन एंड इसको हम बोलते हैं

यूजर पेज एंड इसके अंदर हम रिटर्न करेंगे

एक डेव डेव के अंदर वी कैन से दैट h1 दैट

दिस इज ए यूजर पेज तो ये क्या है ये बाय

डिफॉल्ट क्या है ये एक सर्वर कंपोनेंट है

राइट बिकॉज़ प पप डायरेक्टरी के अंदर है प

राउटर के अंदर है पप राउटर के अंदर सभी

कंपोनेंट्स बाय डिफॉल्ट क्या होते हैं

सर्वर कंपोनेंट्स तो मतलब कि अगर मैं यहां

पर स्ल यूजर के ऊपर हिट करूंगा ओके एंड

इसको हम थोड़ा सा ज़ूम आउट कर लेते हैं अ

स्ल यूजर नॉट यूजर्स तो जैसे मैं इसको

स्लैश यूजर के ऊपर हिट करूंगा व्हाट यू

विल नोटिस इज अगर मैं अपनी सोर्सेस टैब

में जाता हूं एंड मैं यहां पर वेब पैक के

ऊपर क्लिक करता हूं तो व्हाट ड यू नोटिस

इज दैट यहां पर हमारे पास कोई भी कोड नहीं

है राइट यहां पर हमारे पास कोई भी कोड

नहीं है एंड ये पर्टिकुलर जो पेज है ये

पर्टिकुलर जो कंपोनेंट है वो सर्वर साइड

ेंड है ठीक है थोड़ा सा इसको और आगे

प्रोसीड करते हैं ठीक है सो व्हाट आई विल

डू इज अ जस्ट अ सेकंड या सो व्हाट आई विल

डू इज़ अगर मैं यहां पर एक बटन ऐड करने का

ट्राई करता हूं व्हिच इज लाइक क्लिक मी

एंड इसके ऊपर आई कैन से ऑन क्लिक एंड आई

कैन से कसोल डलॉग हे देयर व्हाट यू विल

नोटिस दैट हमारे पास एक एरर आएगा ठीक है

तो ये एरर क्या है ये एरर बोलता है दैट इफ

यू नीड इंटरएक्टिविटी कंसीडर कन्वर्ट

पार्ट ऑफ दिस एज अ क्लाइंट कंपोनेंट तो

मतलब कि इवेंट हैंडलर्स हम अटैच नहीं कर

सकते सर्वर कंपोनेंट्स के ऊपर ठीक है तो

इसका क्या सॉल्यूशन हम क्या कर सकते हैं

हम सिर्फ इस पर्टिकुलर बटन को एक क्लाइंट

कंपोनेंट बनाएंगे ठीक है तो उसके लिए आई

कैन से दैट एक कंपोनेंट बना लेते हैं बटन

ड ts6 एंड यहां पर आई कैन से एक्सपोर्ट अ

डिफॉल्ट ओके एक्सपोर्ट डिफॉल्ट एंड इसको

हम बोलेंगे फंक्शन एंड इसको हम एक बटन बना

लेते हैं सो बटन तो यह हमारा एक फंक्शनल

कंपोनेंट है जिसके अंदर हम एक सिम सल बटन

को रिटर्न कर रहे हैं इसके ऊपर वी कैन से

लाइक क्लिक मी ओके क्लिक मी एंड यहां पर

हम क्या कर सकते हैं यहां पर हम बोल सकते

हैं ऑन क्लिक तो हम क्या करना चाहते हैं

हम यहां पर कुछ कंसोल डट लॉक करना चाहते

हैं तो कंसोल डलॉग हे देयर ओके सो हे देयर

एंड

दैट्ची बटन यूज़ कर लेता हूं नाउ इफ आई गो

बैक यू विल सी एरर इज गॉन ठीक है एरर चला

गया एंड कंसोल के अंदर अगर मैं क्लिक मी

पे क्लिक करता हूं तो व्हाट डू यू नोटिस

दैट मेरा बटन सही से काम कर रहा है अब

यहां पर एक इंटरेस्टिंग चीज को देखते हैं

सोर्सेस टैब डू अ रिफ्रेश तो यहां पर अगर

मैं जाता हूं वेब पैक इंटरनल प / यूजर

क्या हमें यहां पर बटन . ts6 फाइल दिख रही

है एंड उसकी जितनी भी जावास्क्रिप्ट है इस

पर्टिकुलर चीज की वो भी हमें यहां पर

दिखाई दे रही है तो यानी कि क्या हुआ जो

ये पेरेंट कंपोनेंट है ना जो ये एक सर्वर

कंपोट नेंट है इसकी जावास्क्रिप्ट हमें

नहीं दिखाई दे रही यहां पर राइट यू कैन सी

दैट इसकी जावास्क्रिप्ट नहीं है लेकिन

बिकॉज़ ये बटन एक क्लाइंट कंपोनेंट है

इसकी जावास्क्रिप्ट हमारे पास फ्रंट एंड

पे आ रही है एंड यू विल सी दैट इसके अंदर

सारे वो इवेंट लिसन हैं राइट सो दिस इज

व्हाट इज हैपनिंग एक और चीज करके हम ट्राई

कर सकते हैं तो यहां पर हम एक और कंपोनेंट

बना लेते हैं इसको हम बोल देते हैं बटन

सर्वर तो ये एक सर्वर बटन है ठीक है तो

लाइक यू कैन अजूम दैट कुछ भी एक सर्वर

कंपोनेंट है तो इसी पर्टिकुलर चीज को हम

यहां पे कॉपी कर लेते हैं यूज़ क्लाइंट को

हटा देते हैं एंड ऑन क्लिक को भी हटा देते

हैं बिकॉज ये एक सर्वर कंपोनेंट है एंड

इसको मैं बोलूंगा क्लिक मी सर्वर ओके एंड

फिर हम क्या कर सकते हैं यहां पर हम एक

काम करते हैं यहां पर हम एक बर टैग का यूज

कर लेते हैं फिर हम यहां पर करेंगे दोबारा

से बटन ठीक है दोबारा से हम यहां पर बोल

सकते हैं सर्वर बटन सो पहले इंपोर्ट कर

लेते हैं तो आई विल से इंपोर्ट ए बटन मतलब

सर्वर बटन फ्रॉम डॉट

स्ल बटन सर्वर तो इस ए बटन को भी हम यहां

पे करेंगे रेंडर तो नाउ व्हाट यू विल

नोटिस दैट हमारे पास एक क्लिक मी ऑन द

सर्वर है क्लिक मी है राइट एंड अगर हम

अपने जेएस बंडल को देखते हैं तो व्हाट यू

विल नोटिस दैट हमारे पास सिर्फ और सिर्फ

हमारे पास सिर्फ और सिर्फ कौन सी फाइल आ

रही है यहां पर पप यूजर के अंदर सिर्फ बटन

. t आ रही है बिकॉज़ वो एक क्लाइंट

कंपोनेंट है ओके अगर मैं सर्वर बटन को भी

यूज क्लाइंट करता हूं तो यू विल नोटिस दैट

इसकी पर्टिकुलर जेएस भी हमारे पास फ्रंट

एंड पे शिफ्ट होनी स्टार्ट हो जाएगी सो

नाउ यू कैन सी दैट इसकी जो जेएस है वो भी

हमारे पास फ्रंट एंड के ऊपर शिफ्ट हो रही

है ओके तो इससे हम क्या कर सकते हैं हम

बहुत कॉशस किस कंपोनेंट को सर्वर के ऊपर

रखना है किस कंपोनेंट के ऊपर क्लाइंट के

ऊपर रखना है उससे हम अपने जेएस बंडल को

बहुत ज्यादा ऑप्टिमाइज कर सकते हैं तो ये

पूरा कांसेप्ट है सर्वर कंपोनेंट्स का तो

सर्वर कंपोनेंट्स का मतलब होता है सर्वर

ओनली तो जब हम तो यहां पर एक एक एग्जांपल

देता हूं फॉर एग्जांपल लेट अस से दैट वी

आर मेकिंग सम अ ई-कॉमर्स ठीक है तो

ई-कॉमर्स में इफ यू नोटिस दैट हमारे पास

एक प्रोडक्ट कार्ड होता है राइट तो लेट अस

से दैट यहां पर हमारे पास कोई इमेज है ठीक

है यहां पर हमारे पास कोई इमेज है उसके

बाद यहां पर हमारे पास प्राइसिंग मेंशन है

अगर यह कार्ड है तो यहां पर हो सकता है

लाइक आई एंड आ r लेट अस से आ आ 999 ओके

एंड उसके बाद हमारे पास यहां पर एक बटन है

राइट यहां पर हमारे पास एक बटन है जिसके

ऊपर लिखा हुआ हो सकता है मे बी बाय नाउ तो

यहां पर इफ यू हैव द कंपोनेंट वन सॉल्यूशन

इज दैट हम क्या कर सकते हैं हम इस पूरे

कंपोनेंट को यूज़ क्लाइंट कर सकते हैं हम

इस पूरे कंपोनेंट को यूज़ क्लाइंट कर सकते

हैं जिससे क्या होगा मेरा ये पूरा का पूरा

कार्ड एक क्लाइंट कंपोनेंट बन जाएगा राइट

दिस इज वन वे तो हो सकता है इसके जो

जावास्क्रिप्ट बनेगी मे बी दैट इज ऑफ 1mb

लेकिन मैं एक और चीज भी क्या कर सकता हूं

मैं एक और चीज कर सकता हूं मैं सिर्फ इस

बटन को यूज़ क्लाइंट कर सकता हूं मैं

सिर्फ इस पूरे पूरे कंपोनेंट को क्लाइंट

नहीं सिर्फ इस पर्टिकुलर बटन को क्लाइंट

कर सकते हैं इसको सर्वर कर सकते हैं

बिकॉज़ ये पर्टिकुलर चीज के अंदर कोई भी

इंटरेक्टेबल नहीं है ये तो सिर्फ डेटा को

डिस्प्ले कर र है जो एक्चुअल एक्शन है वो

तो ये बटन कर रहा है ना तो इस पर्टिकुलर

बटन को सिर्फ क्लाइंट करो एंड उससे क्या

होगा हमारा जो 1mb का जेएस बंडल साइज है

वो हो सकता है सिर्फ 0.2 m का रह जाए तो

जिससे क्या होगा हमारा जो पेज लोड है वो

और ज्यादा फ होता जाएगा ओके लोडिंग स्पीड

हमारी बहुत ज्यादा फास्ट होती जाएगी स वी

हैव टू बी वेरी कॉशस दैट हम किस पर्टिकुलर

चीज को यूज़ क्लाइंट कर रहे हैं बिकॉज़

अगर हम किसी भी कंपोनेंट को यूज़ क्लाइंट

करते हैं आंड वो क्लाइंट बहुत हैवी है तो

पूरा का पूरा जेएस बंडल साइज हमारा

इंक्रीज हो जाएगा एंड ओवरऑल हमारी वेबसाइट

स्लो हो सकती है तो ये पूरा कंसेप्ट है

सर्वर कंपोनेंट्स का सो दैट ऑल फॉर दिस

वीडियो तो इस वीडियो में हमने बात किया

व्हाट आर सर्वर कंपोनेंट्स व्हाट आर सर्व

साइड रेंडरिंग सो आई होप दैट वीडियो अच्छा

लगा होगा सो वीडियो अच्छा लगा तो लाइक एंड

सब्सक्राइब जरूर करना मिलते हैं हम आपको

नेक्स्ट वीडियो के अंदर

अंट्या टेक केयर