Pavan crafts applications with the MERN Stack, while also venturing into Cloud and Blockchain technologies.

Senior FullStack developer at Bosch

Check out my Opensource work

My Skill Set

List of tech/tools I've worked with

NodeJS

ReactJS

NestJS

TypeScript

GraphQL

NextJS

AWS

Solidity

HardHat

ether.js

MongoDB

Postgress

Prisma

Docker

DevOps

Ethereum

Polygon

Serverless

My Writings

Exploring the world of technology through engaging and insightful writings.

The Power of Mindset in Lifelong Learning and Growth

Context Why am I writing this blog with a fancy title like this? well here's the thing. For a few months, or let's consider it a year, I struggled with so many things that negatively impacted my personal and professional growth. It took me a lot of time to realize the problem was not my work environment or the people I hang out with, it was me and my mindset. After a few incidents, I sat down trying to remember my initial days, how keen I was about learning anything, trying to grab any opportunity, and spending hours experimenting without abandoning because I was bored. But everything changed gradually. This thought made me realize what was wrong and for the first time, I decided to change my way of thinking and how I approach things. And thankfully this is what changed me, in just a few months, I made good progress in terms of my mental health, thought process, finding my purpose, and more. Throughout this blog, I've explained everything. If you can relate, then I hope you find what you're looking for, if you want to connect with me, you can find me here Embracing Growth: The Path to Transformation 1. What is This Growth Mindset? A growth mindset is the belief that abilities and intelligence can be developed through dedication, effort, and perseverance. This mindset encourages professionals to step beyond their comfort zones, innovate, and continuously upgrade their skills in alignment with the fast-paced changes of the world. 2. What is the Problem with the Current Mindset? Many individuals live with a fixed mindset, believing that talent alone leads to success, without the need for further development or effort. This way of thinking causes a fear of failing, makes people avoid feedback, and stops them from taking on challenges. The fixed mindset creates a culture where mistakes are seen as setbacks rather than learning opportunities, which slows down progress. Remember where you see people complaining about their Job, culture, their future, and every time they do, they blame everything except themselves, like the Govt, their boss, their landlord, etc, and then spend 50% of the day scrolling Instagram. 3. Overcoming the Fears & Failures Transitioning to a growth mindset involves considering failures as essential milestones in the learning journey. This helps build resilience and shows that real skills come from facing challenges. Be open to making mistakes and learn from them in private, which helps you grow emotionally. Make your life a safe place to try new things, where failure is celebrated as part of progress. Don't worry about what others think or say. Take useful feedback but ignore those who try to bring you down. Stay positive and focus on your growth. What if that new skill is hard to learn? What if it's not worth after a few years? What if? What if? What if? You never know until you actually try. It could be challenging or easy, worthwhile or not, but without overthinking about failure, at least you won't burden your mind with regret. It's better to live with a failure rather than with regret of "I could've done this" 4. You make good friends A growth mindset fosters an environment where collaboration and knowledge sharing are the norms. By valuing diverse perspectives and experiences, encouraging open communication and mutual learning cultivates a community of learners who support each others growth. Imagine surrounding yourself with people who discuss challenges, share their passions, encourage you to try new things, and offer valuable advice on your current progress and path. For me, it was a couple of friends who pulled me into joining them on a Bike ride, It was an insane experience. 5. Compounding Improvements Small, continuous improvements can lead to significant advancements over timea concept known as the compounding effect. The compounding effect can work in both directions, either positively or negatively. However, adopting a growth mindset means prioritizing consistent learning, experimenting with new ways of living, constantly evaluating your lifestyle, and adopting systems in your life that can compound into substantial growth and breakthroughs. One such thing I did was experimenting with habit trackers and Journaling. In my opinion, you need trackers until they become part of your life, I don't use the trackers anymore but I still follow the system, I don't journal every day, but only when I'm overwhelmed with thoughts, I ask myself deep questions to find answers and I find them by journaling my thoughts. This has helped me with many questions about my life and helped me with finding a direction, of course, it's not final, directions change every time, but when I'm stuck I know how to handle it now. 6. Delayed Gratification & Adapt to New Changes A growth mindset is closely linked to the principle of delayed gratificationthe ability to resist the temptation of an immediate reward in anticipation of a greater future reward. In personal life, this means investing time and effort into self-improvement and development, even when the benefits are not immediately visible. For instance, if you're on a diet to lose or gain weight, it's common to be tempted by a cheat meal. Delayed gratification involves resisting this temptation for a greater future reward. This principle applies to all areas of life improvement. Similarly embracing new habits, skills, and experiences requires patience and persistence, which ultimately leads to greater adaptability and success in the ever-changing landscape of life. 7. Action Plan -> Foster a Growth Mindset To cultivate a growth mindset, here's a simple action plan: Set learning goals: Concentrate on acquiring new skills and knowledge instead of focusing only on results. Embrace challenges: View challenges as opportunities to grow rather than obstacles to avoid. Connect with people: Communicate and network, meet new people, online or in person, and expand your network. Learn from criticism: Use feedback as a tool for improvement, not as a personal affront. Celebrate effort: Recognize and reward perseverance and effort, not just success. Promote reflection: Encourage regular reflection on experiences, focusing on what was learned rather than on success or failure. 8. Conclusion The shift from a fixed to a growth mindset is not just beneficial but essential for personal success. By embracing challenges, learning from failures, and prioritizing continuous improvement, individuals can unlock their full potential and drive personal growth. The journey towards adopting a growth mindset requires persistence, resilience, and a commitment to self-improvement. As people embrace this transformative approach, they pave the way for a future of unlimited growth and possibilities in their personal lives. Self-Improvement is hard, requires sacrificing instant gratification such as scrolling Instagram for hours to asking yourself uncomfortable questions, if you pick up this journey my advice is to keep it private, don't start uploading stories on social media showing that you're under self-improvement, try to live a private life. You can probably post it or help other once you figure out what kind of self-improvement works for you.

Transitioning from Web Development to Blockchain

As the digital landscape evolves, transitioning from web development to blockchain offers an exciting journey into a revolutionary field. This guide illuminates the path for developers looking to make this seamless shift toward blockchain development. Similar to web development, blockchain development is a distinct domain with its own tools, rules, and standards. For web developers, the experience of working with third-party tools, following guidelines and troubleshooting issues aligns seamlessly with the blockchain development workflow. 💡 I've also addressed common myths I've come across throughout my career in Blockchain, so, stick around till the end. Understanding the Basics Blockchain basics are simple. First, grasp the theory of what Blockchain is and why it works. We'll set aside terms like privacy for now. Next, dive into tokens and cryptocurrencies, managing them with a crypto wallet. Finally, explore smart contracts, empowering the development of applications on the Blockchain. What is a Blockchain? A blockchain is a network of computers running similar software, such as an Ethereum Client, enabling communication and exchange of data. But why do we need a blockchain system? In the cloud, companies manage data availability, maintenance, and security. However, blockchain operates differently. It can run on any system, managed by a trusted public community where participants share ownership and responsibility. This decentralized model builds trust, as the network is self-managed. Blockchain ensures data security through cryptography and tamper-proof records. Smart contracts enable automated actions within the network, enhancing its functionality. Does this mean Blockchain is better than cloud or existing systems? Absolutely not! Unlike traditional systems, blockchain comes with its own set of pros and cons, operating by a unique set of rules. Incorporating blockchain into a system should be a strategic decision based on specific requirements. To determine if blockchain is the right fit, consider the following tradeoffs: Convenience: Assess the level of convenience you are willing to sacrifice when integrating blockchain into your system. Problem-solving Capability: Identify specific problems that blockchain can address in your context. Example if you're building a social media platform, then consider Blockchain as an add-on feature, similar to twitter, which allows NFTs as a profile picture. Impact on Existing Solutions: Evaluate how integrating blockchain might affect your established solution and whether re-architecting aligns with your goals. For instance, consider the implications of gas fees for each transaction in blockchain. Assess whether your current community or solution is compatible with such considerations. Cost Considerations: Evaluate initial implementation and ongoing maintenance costs, Blockchain application usually tend to cost less at the initial stage, but would require a proper Tokenomics document setup and shared among the community. Scalability and Performance: Analyze how well blockchain can scale to accommodate your system's potential growth. While scalability is a challenge in blockchain systems, ongoing innovations address this issue. It's advisable to architect your application with careful consideration of this specific challenge. Remember, there is no one-size-fits-all answer, and the decision to incorporate blockchain should be driven by a careful consideration of these factors, aligning with your unique requirements and objectives. Smart contracts Smart contracts are self-executing code with the application flow directly written into code. They are self-executing because, they work on certain conditions passed over the request, without relying on external systems like databases or APIs, they are independent, and can only communicate with other smart contracts, ensuring security without constant supervision. Source: DocMySol Blog Smart contracts in Blockchain act like backends in web development, managing logic, security, and data storage. When integrating Blockchain into your app, a deployed smart contract, serving as the core logic, interacts with your applicationwhether it's the frontend, backend, or the user directly. Note: If you're already familiar with Tokens, Cryptocurrencies & Wallets, consider jumping directly into Web dev to Blockchain dev transition or else continue reading. Tokens and Cryptocurrencies In the world of blockchain, think of tokens as digital keys representing ownership or access to something valuable. These tokens are created and tracked on a blockchain, ensuring secure and transparent transactions. Now, cryptocurrencies are like digital money, such as Bitcoin (BTC) and Ethereum (ETH), operating independently of banks and ensuring privacy without middlemen. For blockchain developers, grasping the workings of tokens and cryptocurrencies is vital, laying the groundwork for building innovative decentralized applications and facilitating smooth value exchange in the blockchain world. Token Standards in Blockchain Blockchain systems, being community-managed, benefit from standardized tokens. These standards set rules for how assets operate on the Blockchain, promoting trust and innovation. For instance, if your token follows a specific standard (let's call it "standard A"), any application supporting that standard can seamlessly access and trade your token. This standardization also enables the transfer of tokens between different Blockchains, as long as they adhere to the same standard. Some of the Popular Token Standard on the Ethereum Blockchain are ERC-20, ERC-721, ERC-1155, ERC-777, ERC-1400. The ERC in this context stands for Ethereum Request for Comment Crypto Wallets A crypto wallet is a digital tool that empowers users to send, receive, and monitor their cryptocurrencies. It operates by storing the private keys necessary for authorizing transactions on the blockchain. Think of it as a combination of a traditional wallet (for storing currency) and a secure key vault. Understand the following terms about Crypto wallets Role of Private Keys: Private keys are the secret codes granting access to one's digital assets within the wallet. Transaction Authorization: When a user initiates a transaction, the wallet utilizes its private key to sign the transaction. This digital signature serves as proof of ownership and authorizes the movement of funds on the blockchain. Security Measures: Wallets implement encryption, two-factor authentication (2FA), and biometric features to safeguard private keys and prevent unauthorized access. The transition: Become a Blockchain developer from a Web developer After understanding the standards and basics mentioned above, you'll come to the realization that developing on Blockchain demands adherence to standards, adherence to guidelines, and maintaining transparency within the community. For those who are more into operating in stealth mode, it's worth reconsidering your choice when opting for Blockchain. Step 1: Start with understanding the workings of Blockchain Before diving into the development, its necessary to understand how Blockchain works, I didnt cover this in the previous section as it is out of the scope of this blog. Youll have to learn about the following concepts Gas and Its structure Consensus Transaction structure Hashing EVM Blocks and their structure Ethereums state Bytecode and Opcode in brief Step 2: Get your hands on Solidity Solidity is the language we use to write smart contracts, although there are many other languages used by different Blockchain, Solidity is widely adopted, giving you access to much bigger opportunities. Free resources to learn Solidity CryptoZombies: The OG resource for learning Solidity Speedrun Ethereum LearnWed3 [Alchemy University](https://www..com/university/courses/solidity) Step 3: Build Projects A common way to learn and master things in tech is to build projects, so by developing smart contracts you can learn and get a good practical experience with it, if you need inspiration on what kind of contracts you can develop and also different resources check out the below links. Solidity By Example https://github.com/bekatom/awesome-ethereum Step 4: Learn about security and vulnerabilities Smart contracts can face different types of attacks, resulting in substantial losses of token value. It's crucial to understand these common attacks and learn how to protect your smart contracts from them. For practical insights into vulnerabilities and their solutions, refer to this repository. https://github.com/crytic/not-so-smart-contracts Step 5: Stop focusing on NFTs and Improve your portfolio One common mistake beginners often make is filling their entire portfolio with only NFT projects. While NFTs are good, it's essential to approach them strategically. There are already numerous successful NFT marketplaces with advanced architectures. If you create a basic UI for minting NFTs, you won't stand out. Instead, consider focusing on projects related to DeFi, lending, borrowing, liquidity pools, and more. Working on such projects can enhance your portfolio and help you stand out from the crowd. Step 6: Dont forget to document your contract Documenting your smart contracts is essential. It helps other developers integrate it into applications or clients requiring a report. Using a tool like DocMySol enables one-click documentation generationsimply copy and paste your contract. Share the document with fellow developers and export it as a PDF for client sharing. Step 7: Switch to blockchain development roles Since youre familiar with Blockchain development, its about time for you to start switching got a Blockchain development role. Many use cases in the market are no longer relevant, but some, actively explored by major industries like J.P. Morgan and BlackRock, hold significant promise. Focus on impactful use cases such as carbon credits for climate and environmental issues, zero-knowledge proofs for authenticity, tokenizing real-world assets, and Blockchain in agriculture. These areas have tangible effects on society, people, the economy, and businesses, unlike certain trends like the bizarre art of bored apes. Step 8: Upskill with new innovations in the Ecosystem The blockchain ecosystem has evolved rapidly in recent years, witnessing constant innovations in infrastructure, user experience, security, consensus, and more. For a blockchain developer, staying updated on these innovations is crucial. Connect with professionals at conferences or local meetups in your city to stay in sync with the latest developments. A few list of innovations are Account Abstraction Decentralized Identity MPC - Multi Party Computation Web5 - Yes it's already web5 😅 Conclusion Transitioning from web development to blockchain opens new possibilities. Embrace the learning journey, build diverse projects, and contribute to impactful use cases. Stay informed about innovations to remain a valuable asset in the dynamic blockchain ecosystem.

Stop setting goals, create milestones instead

The goals, dreams, missions, and whatnot, we've been in this cycle since childhood. Recently, I had an eye-opening realization that many of the goals we set are often naive and lack the necessary depth to guide us on our journey. It's not uncommon to find ourselves feeling lost or uncertain along the way, trying different directions in hopes of reaching our goals. If you can relate to this struggle, then you've come to the right place. It's time to break free from this pattern and rethink the way we approach goal-setting to ensure success. So, how can we transform our goal-setting process and create a well-defined path toward achieving our dreams? Here's how I was able to change my way of achieving goals. Of course, this was possible due to some guidance, which I've linked at the end of this blog. Note: While this blog focuses on a developer's perspective, the principles discussed can be applied to any goals or dreams in general. So you have a goal, now what? Imagine this: you're lost in a sea of thoughts, brimming with exciting ideas. Now comes the tricky partdo you turn every single one into a goal, or do you wisely pick a few to focus on? Well, in my case, here's what I set my sights on: Get back to writing blogs, and sharing my thoughts and experiences. Build awesome SaSS products that solve real problems. Contribute to open-source projects and give back to the community. Dive into the world of Rust development and master the language. Dive deeper into the vast wonders of the React ecosystem. Sounds pretty good, right? But here's the catch: if you take a closer look at my goals, you'll realize that they're just scratching the surface. The real issue lies in the lack of a clear path to achieve them. For instance, the goal of building awesome SaSS products that solve real problems. The problem is, I don't have a clue what specific products to build. It's like being stranded in the middle of the ocean, unsure of which direction to swim in. Now, let's take a moment to reflect on all the goals you've set for yourself. Ask yourself these questions: Does this goal provide clear guidance on how to get started? Does this goal outline a way to measure your progress along the way? Does this goal indicate what the end result or achievement looks like? If any of your goals fail to address these questions, my friend, you're just like mestranded in the middle of the ocean without a clear direction. Try creating milestones instead The common issue among the above goals is not just the lack of a clear path, but also the absence of deep thoughts and desires Consider "Get back to writing blogs, and sharing my thoughts and experiences". This is a very simple and naive thought, but what is my desire here? Just to write some blogs? off course no. My thought here should be about creating value within a specific community by writing blogs. For example, I wanna contribute to the Web development community, by writing blogs on React advanced concepts. Just imagine the tremendous impact a simple shift in our thoughts can make. Get back to writing blogs, and sharing my thoughts and experiencesI wanna contribute to the Web development community, by writing blogs on React's advanced concepts 🤔 What do I write? I would write on React and it's adv concepts 🤔 How do I consider my progress? just views? I would measure my progress based on page views, my followers, and community feedback 🤔 who is my target audience? My target audience would be the web development community Let's consider a common example, Job Search. Finding a job is a common goal for many, whether you're a developer, marketing analyst, or non-tech professional. At some point, we all face this challenge and strive to achieve it. If your goal was just "I wanna find a Job in X field" Now, validate this goal of yours. Did you find a path? No, right? All it did was create another question, How to find that Job you're looking for? Convert to milestones Step 1: Reach out to people Find your community: Connect with like-minded individuals in your field by joining industry-specific circles. For tech, Twitter can be a valuable platform, while LinkedIn is often preferred for marketing and other professions. Research and explore different platforms to find where professionals in your domain actively engage. Spy on orgs: Once you've identified your community, dive deeper into the companies they work for. Investigate the company's purpose, culture, clients, and products/services. Check their reputation on platforms like Glassdoor. If you're interested, visit their career portal for job openings. If not, reach out to employees directly on LinkedIn through cold DMs, understanding that response rates may vary. Master the 5-second rule: Grab the recruiter's attention by ensuring your resume is concise and impactful. Include essential details within the first 5 seconds of reading. Focus on personal details, relevant experience/projects, and notable achievements. Keep unnecessary information, such as hobbies and TV preferences, to a minimum. Tailor your resume: Utilize tools like ChatGPT to analyze job descriptions and extract keywords. Incorporate these keywords strategically into your resume, especially when applying to larger corporations that employ software for initial screening. This optimization can increase your chances of standing out to recruiters. Step 2: Follow up once or twice not more than that If you haven't received a response from an employer or the person you DM'd, don't hesitate to follow up more than once. It's possible that your message got overlooked or they were busy at the time. Step 3: Dealing with failure Sometimes, despite applying to numerous companies, you may not receive positive responses from all of them. In such cases, it's important not to simply reapply without considering the underlying issue. Take the time to seek feedback on why you weren't selected, and if feedback isn't available, reflect on possible reasons yourself. In today's competitive landscape, it's crucial to diversify your skills. Relying solely on one skill may not be sufficient, especially with advancing technologies like AI. Explore related roles based on your interests. For example, if you're in business, consider marketing, sales, or communication positions. Avoid accepting low-wage jobs just for the sake of experience. Research market salaries and hold out for better opportunities, I know it sucks, but stay optimistic and keep searching, as a better opportunity awaits you. Step 4: Prepare for interviews Prepare for interviews by dressing professionally, ensuring a quiet environment, and having good audio and video quality. Remember, politeness matters more than your background or education. Stay confident and approach the interview as someone actively seeking a job opportunity. Personal Opinion In this blog, I share my personal experience with this approach, which has helped me increase productivity and maintain focus without feeling overwhelmed. This is the video from Theo that helped me. I encourage you to give it a try and share your feedback in the comments. Implementing this approach can bring about positive changes in your life. Good luck.

The Ultimate Deep Dive into React Server Components (Revised)

React Server Components have been something that's been bugging me for a while now. There's been a lot of debate online, and a lot of comparisons have made it really hard to understand what exactly it is and how it works. But now, after doing some research, I think I have a good understanding of it. Lets dive deeper into Server Components and understand them better. TLDR; React Server Components are components that run on the server, not in the browser. They are different from SSR from NextJS, as in SSR, the entire HTML is generated and rendered, while in Server Components, only the React tree structure is defined and sent to the browser. Some components need to be rendered on the server, while others on the browser, and React server components allow for rendering required components on the server and the rest on the browser. This makes it easy for the server to fetch data from databases and process huge datasets to create React components, resulting in faster application performance. Additionally, server components run only on the server and are not sent to browsers, reducing the JavaScript bundle size and leading to faster loading times. The mental model Image source: NextJS Docs In the image, imagine many static UI components on the screen, with only a few interactive elements like buttons or search bars. Now, consider rendering only the interactive elements in the user's browser while handling the rest on the server. This improves efficiency, reduces browser workload, and enhances performance. React Components React Components are reusable pieces of UI that can be composed together to create complex user interfaces. They are typically written in JSX/TSX and can range from simple components like buttons, inputs, layouts, and more. React Server Components Server Components are a new addition to the React ecosystem that allows for components to be rendered on the server and streamed to the client as they are ready. This enables faster load times and a better user experience, especially on slower networks. NextJS SSR and Server Components Although SSR and Server Components are different, they are used together to provide efficient performance. RSC enables selective server rendering of components, while SSR ensures that the entire page is rendered on the server. This combination allows for efficient and dynamic web applications that are fast, interactive, and SEO-friendly. Benefits of the Server Components Since Server components run in the server, there are numerous benefits that we can get By running components on the server, it is possible to fetch data from databases and process huge datasets to create React components, resulting in faster application performance. Server components run only on the server and are not sent to browsers, reducing the JavaScript bundle size and leading to faster loading times. Server components enable the processing of heavy NPM packages on the server, which avoids the need for the server to download these dependencies, unlike the browser, which must download all those codes as javascript bundles. How Do We Create A Server Components By default, every component in meta-frameworks like NextJS v13 is a server component. To specify a client component, simply add 'use client' at the top of your JSX/TSX file. Note: A client component cannot import a server component because the server components cannot run in the browser. Furthermore, this dependency would cause the server to send extra JavaScript bundles that aren't necessary. However, a server component can import a client component. We will discuss the details later, but be sure to remember this. Heres a sample of the React tree that has both Server and Client Components. If you're wondering how it's possible to have both server and client components in the same React tree, keep reading. We'll explain how it works and dive into the technical details of the implementation. How are the Server and Client Components rendered on the same tree? If you remember server-side rendering (SSR), which involves rendering the entire HTML on the server and then passing it to the client (browser), which enables stateful interactivity. In contrast, server components render server components over the server. If any client components are encountered in the process, the server adds a placeholder in the React tree where the client component was supposed to appear and moves on to the next component. This process repeats until all the components are processed. Later, when this tree is sent to the browser, the browser fills in the placeholders with the client components. Its similar to filling the forms, you fill in all the required fields, which are Server components and you skip the optional fields, which are Client components. Here ends the high-level picture, lets dive into technical details now. There are a lot of terms that need clarity here. How does a server know the details of a client component while adding a placeholder? How can the client (browser) identify whether a particular element is a placeholder or a server component? How can a client (browser) determine which component to add instead of a placeholder? What does the actual tree look like? Everything starts with a server receiving a request to render The React Server Components typically begin with server rendering upon receiving a request. It's important to note that the root component is always a server component, which renders both client and server components. The root component needs to be a server component, as it follows the rule that server components can import client components, but not vice versa. The server initiates the rendering process by collecting all necessary details, such as props and dependencies, etc. Generating the tree from the root component Let us consider a simple code snippet. // ClientComponent.client.jsxexport default function ClientComponent({ children }) { return ( <h1>This is client comp</h1> {children} </div> )}// ServerComponent.server.jsxexport default function ServerComponent() { return <span>This is server comp</span>}// AnotherServerComp.server.jsximport ClientComponent from './ClientComponent.client'import ServerComponent from './ServerComponent.server'export default function AnotherServerComp() { return ( <ClientComponent> <ServerComponent /> </ClientComponent> )} Here, The ClientComponent is a client component that renders an <h1> element with the text "This is client comp", and it also renders any children components passed to it. The ServerComponent is a server component that renders a <span> element with the text "This is server comp". The AnotherServerComp is also a server component that wraps bother a Client Comp with a Server Comp. As we already know that the React tree is rendered with server components and placeholders for the client components. Once rendered, the tree is serialized to JSON and sent back to the client (browser). Finally, the client deserializes the JSON to fill the client components and render the final result. Lets consider the above code, to see the entire results we have to render <AnotherServerComp /> Which also renders the <ServerComponent /> and <ClientComponent />, and then we have to serialize it to JSON. What does the serialized JSON look like after we render them? Recall what a React Element would look like, an object right? Once the components are rendered they are converted to an object with type property. The type property can either be a string for base HTML tags such as div p h1 or functions of a custom React component such as ServerComponent Heres an example of a React Element // React element for base HTML such as <span>This is a comp</span>{ $$typeof: Symbol(react.element), type: "span", props: { title: "This is a comp" }, ...}// React element for a component such as <MyComponent>example</MyComponent>> function MyComponent({children}) { return <div>{children}</div>; }{ $$typeof: Symbol(react.element), type: MyComponent // "reference" to the MyComponent function props: { children: "example" }, ...} Here to generate this object react uses a function called createElement learn more about createElement here. If you take a closer look, you'll notice that if the React Element is a user-defined Component, then the type property will be a function reference that points to that Component. However, functions cannot be serialized easily. To address this, React passes a special replacer function to JSON.stringify(). You can learn more about the replacer function here. This is achieved using the resolveModelToJSON() function developed by the React core team. You can find the source code for this function here. In a nutshell If the code encounters a base HTML tag, there is no need to worry as it can easily be serialized. If the code encounters a function, it must pass a replacer function to serialize it. That was a lot. Here are some answers to potential questions you might have by now. Is serializing necessary? Yes, because it is sent back to the client over the network as a response, so JSON is a standard way of passing data. What about placeholders? How are the placeholders in the client component serialized? The placeholders can be serialized easily as well because they store something called a module reference object. The Module Reference Object This is a new type of property introduced by React Server Components. It ensures that the client component's placeholders can be easily serialized. This would like something like this for our <ClientComponent/> { $$typeof: Symbol(react.element), type: { $$typeof: Symbol(react.module.reference), // Component Reference // ClientComponent is the default export... name: "default", // from this file! filename: "./component/ClientComponent.client.js" }, props: { children: "This is a client comp" },} This is what a placeholder would look like when Server Components are being rendered over the server. But how is the client component converted to this type of placeholder? This conversion is possible thanks to an update pushed to the react-server-dom-webpack bundler by the React team. When a server component imports something from a .client.jsx file, it only receives a module reference object containing the file name and exported name of the component, rather than the component itself. The client component function will never be part of the React tree constructed on the server. Later, when the browser encounters the placeholder, it can use the module reference object to locate the appropriate client component and replace the placeholder with it. Whats next? There's more. While this process is straightforward, what about suspense? Are these production-ready? What are the use cases for them? Many questions arise when considering the different ways NextJS provides for rendering, including Server components. However, we will be discussing RSC further, so stay tuned. It is also worth noting that RSC is now stable to use in production starting from NextJS v13.4. References https://www.plasmic.app/blog/how-react-server-components-work#what-are-react-server-components https://nextjs.org/blog/next-13-4

My Works

Showcasing my diverse range of projects and creations in the world of technology.

EVMIndex

Streamline EVM chain data retrieval with EVMindex - the simple and powerful indexer with real-time Webhooks.

GoAA

An Account Abstraction (ERC-4337) package written in go.

DocMySol

Docmysol is a user-friendly solution for creating Solidity documents with just one click.

SicaPay

Fight Climate Change And Earn Rewards With SICA. A Digital Currency Backed By Real Carbon Assets.

What Am I Learning?

List of things I’m learning, thought I’d share this.

Golang

On Going

Account Abstraction

On Going

AMPQ

Queued

MPC

Queued

Books I Recommend

List of books I’ve read and recommend

ReWork

ReWork

Change the Way You Work Forever

View on Amazon
The Minimalist Entrepreneur

The Minimalist Entrepreneur

How great founders do more with less

View on Amazon
14 Habits of Highly Productive Developers

14 Habits of Highly Productive Developers

By Zeno Rocha

View on Amazon
The Compound Effect

The Compound Effect

By Darren Hardy

View on Amazon
The PARA Method

The PARA Method

Simplify, Organise and Master Your Digital Life

View on Amazon
The 5 AM Club

The 5 AM Club

Own your morning, Elevate your life

View on Amazon

My Writings

Exploring the world of technology through engaging and insightful writings.

The Power of Mindset in Lifelong Learning and Growth

Context Why am I writing this blog with a fancy title like this? well here's the thing. For a few months, or let's consider it a year, I struggled with so many things that negatively impacted my personal and professional growth. It took me a lot of time to realize the problem was not my work environment or the people I hang out with, it was me and my mindset. After a few incidents, I sat down trying to remember my initial days, how keen I was about learning anything, trying to grab any opportunity, and spending hours experimenting without abandoning because I was bored. But everything changed gradually. This thought made me realize what was wrong and for the first time, I decided to change my way of thinking and how I approach things. And thankfully this is what changed me, in just a few months, I made good progress in terms of my mental health, thought process, finding my purpose, and more. Throughout this blog, I've explained everything. If you can relate, then I hope you find what you're looking for, if you want to connect with me, you can find me here Embracing Growth: The Path to Transformation 1. What is This Growth Mindset? A growth mindset is the belief that abilities and intelligence can be developed through dedication, effort, and perseverance. This mindset encourages professionals to step beyond their comfort zones, innovate, and continuously upgrade their skills in alignment with the fast-paced changes of the world. 2. What is the Problem with the Current Mindset? Many individuals live with a fixed mindset, believing that talent alone leads to success, without the need for further development or effort. This way of thinking causes a fear of failing, makes people avoid feedback, and stops them from taking on challenges. The fixed mindset creates a culture where mistakes are seen as setbacks rather than learning opportunities, which slows down progress. Remember where you see people complaining about their Job, culture, their future, and every time they do, they blame everything except themselves, like the Govt, their boss, their landlord, etc, and then spend 50% of the day scrolling Instagram. 3. Overcoming the Fears & Failures Transitioning to a growth mindset involves considering failures as essential milestones in the learning journey. This helps build resilience and shows that real skills come from facing challenges. Be open to making mistakes and learn from them in private, which helps you grow emotionally. Make your life a safe place to try new things, where failure is celebrated as part of progress. Don't worry about what others think or say. Take useful feedback but ignore those who try to bring you down. Stay positive and focus on your growth. What if that new skill is hard to learn? What if it's not worth after a few years? What if? What if? What if? You never know until you actually try. It could be challenging or easy, worthwhile or not, but without overthinking about failure, at least you won't burden your mind with regret. It's better to live with a failure rather than with regret of "I could've done this" 4. You make good friends A growth mindset fosters an environment where collaboration and knowledge sharing are the norms. By valuing diverse perspectives and experiences, encouraging open communication and mutual learning cultivates a community of learners who support each others growth. Imagine surrounding yourself with people who discuss challenges, share their passions, encourage you to try new things, and offer valuable advice on your current progress and path. For me, it was a couple of friends who pulled me into joining them on a Bike ride, It was an insane experience. 5. Compounding Improvements Small, continuous improvements can lead to significant advancements over timea concept known as the compounding effect. The compounding effect can work in both directions, either positively or negatively. However, adopting a growth mindset means prioritizing consistent learning, experimenting with new ways of living, constantly evaluating your lifestyle, and adopting systems in your life that can compound into substantial growth and breakthroughs. One such thing I did was experimenting with habit trackers and Journaling. In my opinion, you need trackers until they become part of your life, I don't use the trackers anymore but I still follow the system, I don't journal every day, but only when I'm overwhelmed with thoughts, I ask myself deep questions to find answers and I find them by journaling my thoughts. This has helped me with many questions about my life and helped me with finding a direction, of course, it's not final, directions change every time, but when I'm stuck I know how to handle it now. 6. Delayed Gratification & Adapt to New Changes A growth mindset is closely linked to the principle of delayed gratificationthe ability to resist the temptation of an immediate reward in anticipation of a greater future reward. In personal life, this means investing time and effort into self-improvement and development, even when the benefits are not immediately visible. For instance, if you're on a diet to lose or gain weight, it's common to be tempted by a cheat meal. Delayed gratification involves resisting this temptation for a greater future reward. This principle applies to all areas of life improvement. Similarly embracing new habits, skills, and experiences requires patience and persistence, which ultimately leads to greater adaptability and success in the ever-changing landscape of life. 7. Action Plan -> Foster a Growth Mindset To cultivate a growth mindset, here's a simple action plan: Set learning goals: Concentrate on acquiring new skills and knowledge instead of focusing only on results. Embrace challenges: View challenges as opportunities to grow rather than obstacles to avoid. Connect with people: Communicate and network, meet new people, online or in person, and expand your network. Learn from criticism: Use feedback as a tool for improvement, not as a personal affront. Celebrate effort: Recognize and reward perseverance and effort, not just success. Promote reflection: Encourage regular reflection on experiences, focusing on what was learned rather than on success or failure. 8. Conclusion The shift from a fixed to a growth mindset is not just beneficial but essential for personal success. By embracing challenges, learning from failures, and prioritizing continuous improvement, individuals can unlock their full potential and drive personal growth. The journey towards adopting a growth mindset requires persistence, resilience, and a commitment to self-improvement. As people embrace this transformative approach, they pave the way for a future of unlimited growth and possibilities in their personal lives. Self-Improvement is hard, requires sacrificing instant gratification such as scrolling Instagram for hours to asking yourself uncomfortable questions, if you pick up this journey my advice is to keep it private, don't start uploading stories on social media showing that you're under self-improvement, try to live a private life. You can probably post it or help other once you figure out what kind of self-improvement works for you.

Transitioning from Web Development to Blockchain

As the digital landscape evolves, transitioning from web development to blockchain offers an exciting journey into a revolutionary field. This guide illuminates the path for developers looking to make this seamless shift toward blockchain development. Similar to web development, blockchain development is a distinct domain with its own tools, rules, and standards. For web developers, the experience of working with third-party tools, following guidelines and troubleshooting issues aligns seamlessly with the blockchain development workflow. 💡 I've also addressed common myths I've come across throughout my career in Blockchain, so, stick around till the end. Understanding the Basics Blockchain basics are simple. First, grasp the theory of what Blockchain is and why it works. We'll set aside terms like privacy for now. Next, dive into tokens and cryptocurrencies, managing them with a crypto wallet. Finally, explore smart contracts, empowering the development of applications on the Blockchain. What is a Blockchain? A blockchain is a network of computers running similar software, such as an Ethereum Client, enabling communication and exchange of data. But why do we need a blockchain system? In the cloud, companies manage data availability, maintenance, and security. However, blockchain operates differently. It can run on any system, managed by a trusted public community where participants share ownership and responsibility. This decentralized model builds trust, as the network is self-managed. Blockchain ensures data security through cryptography and tamper-proof records. Smart contracts enable automated actions within the network, enhancing its functionality. Does this mean Blockchain is better than cloud or existing systems? Absolutely not! Unlike traditional systems, blockchain comes with its own set of pros and cons, operating by a unique set of rules. Incorporating blockchain into a system should be a strategic decision based on specific requirements. To determine if blockchain is the right fit, consider the following tradeoffs: Convenience: Assess the level of convenience you are willing to sacrifice when integrating blockchain into your system. Problem-solving Capability: Identify specific problems that blockchain can address in your context. Example if you're building a social media platform, then consider Blockchain as an add-on feature, similar to twitter, which allows NFTs as a profile picture. Impact on Existing Solutions: Evaluate how integrating blockchain might affect your established solution and whether re-architecting aligns with your goals. For instance, consider the implications of gas fees for each transaction in blockchain. Assess whether your current community or solution is compatible with such considerations. Cost Considerations: Evaluate initial implementation and ongoing maintenance costs, Blockchain application usually tend to cost less at the initial stage, but would require a proper Tokenomics document setup and shared among the community. Scalability and Performance: Analyze how well blockchain can scale to accommodate your system's potential growth. While scalability is a challenge in blockchain systems, ongoing innovations address this issue. It's advisable to architect your application with careful consideration of this specific challenge. Remember, there is no one-size-fits-all answer, and the decision to incorporate blockchain should be driven by a careful consideration of these factors, aligning with your unique requirements and objectives. Smart contracts Smart contracts are self-executing code with the application flow directly written into code. They are self-executing because, they work on certain conditions passed over the request, without relying on external systems like databases or APIs, they are independent, and can only communicate with other smart contracts, ensuring security without constant supervision. Source: DocMySol Blog Smart contracts in Blockchain act like backends in web development, managing logic, security, and data storage. When integrating Blockchain into your app, a deployed smart contract, serving as the core logic, interacts with your applicationwhether it's the frontend, backend, or the user directly. Note: If you're already familiar with Tokens, Cryptocurrencies & Wallets, consider jumping directly into Web dev to Blockchain dev transition or else continue reading. Tokens and Cryptocurrencies In the world of blockchain, think of tokens as digital keys representing ownership or access to something valuable. These tokens are created and tracked on a blockchain, ensuring secure and transparent transactions. Now, cryptocurrencies are like digital money, such as Bitcoin (BTC) and Ethereum (ETH), operating independently of banks and ensuring privacy without middlemen. For blockchain developers, grasping the workings of tokens and cryptocurrencies is vital, laying the groundwork for building innovative decentralized applications and facilitating smooth value exchange in the blockchain world. Token Standards in Blockchain Blockchain systems, being community-managed, benefit from standardized tokens. These standards set rules for how assets operate on the Blockchain, promoting trust and innovation. For instance, if your token follows a specific standard (let's call it "standard A"), any application supporting that standard can seamlessly access and trade your token. This standardization also enables the transfer of tokens between different Blockchains, as long as they adhere to the same standard. Some of the Popular Token Standard on the Ethereum Blockchain are ERC-20, ERC-721, ERC-1155, ERC-777, ERC-1400. The ERC in this context stands for Ethereum Request for Comment Crypto Wallets A crypto wallet is a digital tool that empowers users to send, receive, and monitor their cryptocurrencies. It operates by storing the private keys necessary for authorizing transactions on the blockchain. Think of it as a combination of a traditional wallet (for storing currency) and a secure key vault. Understand the following terms about Crypto wallets Role of Private Keys: Private keys are the secret codes granting access to one's digital assets within the wallet. Transaction Authorization: When a user initiates a transaction, the wallet utilizes its private key to sign the transaction. This digital signature serves as proof of ownership and authorizes the movement of funds on the blockchain. Security Measures: Wallets implement encryption, two-factor authentication (2FA), and biometric features to safeguard private keys and prevent unauthorized access. The transition: Become a Blockchain developer from a Web developer After understanding the standards and basics mentioned above, you'll come to the realization that developing on Blockchain demands adherence to standards, adherence to guidelines, and maintaining transparency within the community. For those who are more into operating in stealth mode, it's worth reconsidering your choice when opting for Blockchain. Step 1: Start with understanding the workings of Blockchain Before diving into the development, its necessary to understand how Blockchain works, I didnt cover this in the previous section as it is out of the scope of this blog. Youll have to learn about the following concepts Gas and Its structure Consensus Transaction structure Hashing EVM Blocks and their structure Ethereums state Bytecode and Opcode in brief Step 2: Get your hands on Solidity Solidity is the language we use to write smart contracts, although there are many other languages used by different Blockchain, Solidity is widely adopted, giving you access to much bigger opportunities. Free resources to learn Solidity CryptoZombies: The OG resource for learning Solidity Speedrun Ethereum LearnWed3 [Alchemy University](https://www..com/university/courses/solidity) Step 3: Build Projects A common way to learn and master things in tech is to build projects, so by developing smart contracts you can learn and get a good practical experience with it, if you need inspiration on what kind of contracts you can develop and also different resources check out the below links. Solidity By Example https://github.com/bekatom/awesome-ethereum Step 4: Learn about security and vulnerabilities Smart contracts can face different types of attacks, resulting in substantial losses of token value. It's crucial to understand these common attacks and learn how to protect your smart contracts from them. For practical insights into vulnerabilities and their solutions, refer to this repository. https://github.com/crytic/not-so-smart-contracts Step 5: Stop focusing on NFTs and Improve your portfolio One common mistake beginners often make is filling their entire portfolio with only NFT projects. While NFTs are good, it's essential to approach them strategically. There are already numerous successful NFT marketplaces with advanced architectures. If you create a basic UI for minting NFTs, you won't stand out. Instead, consider focusing on projects related to DeFi, lending, borrowing, liquidity pools, and more. Working on such projects can enhance your portfolio and help you stand out from the crowd. Step 6: Dont forget to document your contract Documenting your smart contracts is essential. It helps other developers integrate it into applications or clients requiring a report. Using a tool like DocMySol enables one-click documentation generationsimply copy and paste your contract. Share the document with fellow developers and export it as a PDF for client sharing. Step 7: Switch to blockchain development roles Since youre familiar with Blockchain development, its about time for you to start switching got a Blockchain development role. Many use cases in the market are no longer relevant, but some, actively explored by major industries like J.P. Morgan and BlackRock, hold significant promise. Focus on impactful use cases such as carbon credits for climate and environmental issues, zero-knowledge proofs for authenticity, tokenizing real-world assets, and Blockchain in agriculture. These areas have tangible effects on society, people, the economy, and businesses, unlike certain trends like the bizarre art of bored apes. Step 8: Upskill with new innovations in the Ecosystem The blockchain ecosystem has evolved rapidly in recent years, witnessing constant innovations in infrastructure, user experience, security, consensus, and more. For a blockchain developer, staying updated on these innovations is crucial. Connect with professionals at conferences or local meetups in your city to stay in sync with the latest developments. A few list of innovations are Account Abstraction Decentralized Identity MPC - Multi Party Computation Web5 - Yes it's already web5 😅 Conclusion Transitioning from web development to blockchain opens new possibilities. Embrace the learning journey, build diverse projects, and contribute to impactful use cases. Stay informed about innovations to remain a valuable asset in the dynamic blockchain ecosystem.

Stop setting goals, create milestones instead

The goals, dreams, missions, and whatnot, we've been in this cycle since childhood. Recently, I had an eye-opening realization that many of the goals we set are often naive and lack the necessary depth to guide us on our journey. It's not uncommon to find ourselves feeling lost or uncertain along the way, trying different directions in hopes of reaching our goals. If you can relate to this struggle, then you've come to the right place. It's time to break free from this pattern and rethink the way we approach goal-setting to ensure success. So, how can we transform our goal-setting process and create a well-defined path toward achieving our dreams? Here's how I was able to change my way of achieving goals. Of course, this was possible due to some guidance, which I've linked at the end of this blog. Note: While this blog focuses on a developer's perspective, the principles discussed can be applied to any goals or dreams in general. So you have a goal, now what? Imagine this: you're lost in a sea of thoughts, brimming with exciting ideas. Now comes the tricky partdo you turn every single one into a goal, or do you wisely pick a few to focus on? Well, in my case, here's what I set my sights on: Get back to writing blogs, and sharing my thoughts and experiences. Build awesome SaSS products that solve real problems. Contribute to open-source projects and give back to the community. Dive into the world of Rust development and master the language. Dive deeper into the vast wonders of the React ecosystem. Sounds pretty good, right? But here's the catch: if you take a closer look at my goals, you'll realize that they're just scratching the surface. The real issue lies in the lack of a clear path to achieve them. For instance, the goal of building awesome SaSS products that solve real problems. The problem is, I don't have a clue what specific products to build. It's like being stranded in the middle of the ocean, unsure of which direction to swim in. Now, let's take a moment to reflect on all the goals you've set for yourself. Ask yourself these questions: Does this goal provide clear guidance on how to get started? Does this goal outline a way to measure your progress along the way? Does this goal indicate what the end result or achievement looks like? If any of your goals fail to address these questions, my friend, you're just like mestranded in the middle of the ocean without a clear direction. Try creating milestones instead The common issue among the above goals is not just the lack of a clear path, but also the absence of deep thoughts and desires Consider "Get back to writing blogs, and sharing my thoughts and experiences". This is a very simple and naive thought, but what is my desire here? Just to write some blogs? off course no. My thought here should be about creating value within a specific community by writing blogs. For example, I wanna contribute to the Web development community, by writing blogs on React advanced concepts. Just imagine the tremendous impact a simple shift in our thoughts can make. Get back to writing blogs, and sharing my thoughts and experiencesI wanna contribute to the Web development community, by writing blogs on React's advanced concepts 🤔 What do I write? I would write on React and it's adv concepts 🤔 How do I consider my progress? just views? I would measure my progress based on page views, my followers, and community feedback 🤔 who is my target audience? My target audience would be the web development community Let's consider a common example, Job Search. Finding a job is a common goal for many, whether you're a developer, marketing analyst, or non-tech professional. At some point, we all face this challenge and strive to achieve it. If your goal was just "I wanna find a Job in X field" Now, validate this goal of yours. Did you find a path? No, right? All it did was create another question, How to find that Job you're looking for? Convert to milestones Step 1: Reach out to people Find your community: Connect with like-minded individuals in your field by joining industry-specific circles. For tech, Twitter can be a valuable platform, while LinkedIn is often preferred for marketing and other professions. Research and explore different platforms to find where professionals in your domain actively engage. Spy on orgs: Once you've identified your community, dive deeper into the companies they work for. Investigate the company's purpose, culture, clients, and products/services. Check their reputation on platforms like Glassdoor. If you're interested, visit their career portal for job openings. If not, reach out to employees directly on LinkedIn through cold DMs, understanding that response rates may vary. Master the 5-second rule: Grab the recruiter's attention by ensuring your resume is concise and impactful. Include essential details within the first 5 seconds of reading. Focus on personal details, relevant experience/projects, and notable achievements. Keep unnecessary information, such as hobbies and TV preferences, to a minimum. Tailor your resume: Utilize tools like ChatGPT to analyze job descriptions and extract keywords. Incorporate these keywords strategically into your resume, especially when applying to larger corporations that employ software for initial screening. This optimization can increase your chances of standing out to recruiters. Step 2: Follow up once or twice not more than that If you haven't received a response from an employer or the person you DM'd, don't hesitate to follow up more than once. It's possible that your message got overlooked or they were busy at the time. Step 3: Dealing with failure Sometimes, despite applying to numerous companies, you may not receive positive responses from all of them. In such cases, it's important not to simply reapply without considering the underlying issue. Take the time to seek feedback on why you weren't selected, and if feedback isn't available, reflect on possible reasons yourself. In today's competitive landscape, it's crucial to diversify your skills. Relying solely on one skill may not be sufficient, especially with advancing technologies like AI. Explore related roles based on your interests. For example, if you're in business, consider marketing, sales, or communication positions. Avoid accepting low-wage jobs just for the sake of experience. Research market salaries and hold out for better opportunities, I know it sucks, but stay optimistic and keep searching, as a better opportunity awaits you. Step 4: Prepare for interviews Prepare for interviews by dressing professionally, ensuring a quiet environment, and having good audio and video quality. Remember, politeness matters more than your background or education. Stay confident and approach the interview as someone actively seeking a job opportunity. Personal Opinion In this blog, I share my personal experience with this approach, which has helped me increase productivity and maintain focus without feeling overwhelmed. This is the video from Theo that helped me. I encourage you to give it a try and share your feedback in the comments. Implementing this approach can bring about positive changes in your life. Good luck.

The Ultimate Deep Dive into React Server Components (Revised)

React Server Components have been something that's been bugging me for a while now. There's been a lot of debate online, and a lot of comparisons have made it really hard to understand what exactly it is and how it works. But now, after doing some research, I think I have a good understanding of it. Lets dive deeper into Server Components and understand them better. TLDR; React Server Components are components that run on the server, not in the browser. They are different from SSR from NextJS, as in SSR, the entire HTML is generated and rendered, while in Server Components, only the React tree structure is defined and sent to the browser. Some components need to be rendered on the server, while others on the browser, and React server components allow for rendering required components on the server and the rest on the browser. This makes it easy for the server to fetch data from databases and process huge datasets to create React components, resulting in faster application performance. Additionally, server components run only on the server and are not sent to browsers, reducing the JavaScript bundle size and leading to faster loading times. The mental model Image source: NextJS Docs In the image, imagine many static UI components on the screen, with only a few interactive elements like buttons or search bars. Now, consider rendering only the interactive elements in the user's browser while handling the rest on the server. This improves efficiency, reduces browser workload, and enhances performance. React Components React Components are reusable pieces of UI that can be composed together to create complex user interfaces. They are typically written in JSX/TSX and can range from simple components like buttons, inputs, layouts, and more. React Server Components Server Components are a new addition to the React ecosystem that allows for components to be rendered on the server and streamed to the client as they are ready. This enables faster load times and a better user experience, especially on slower networks. NextJS SSR and Server Components Although SSR and Server Components are different, they are used together to provide efficient performance. RSC enables selective server rendering of components, while SSR ensures that the entire page is rendered on the server. This combination allows for efficient and dynamic web applications that are fast, interactive, and SEO-friendly. Benefits of the Server Components Since Server components run in the server, there are numerous benefits that we can get By running components on the server, it is possible to fetch data from databases and process huge datasets to create React components, resulting in faster application performance. Server components run only on the server and are not sent to browsers, reducing the JavaScript bundle size and leading to faster loading times. Server components enable the processing of heavy NPM packages on the server, which avoids the need for the server to download these dependencies, unlike the browser, which must download all those codes as javascript bundles. How Do We Create A Server Components By default, every component in meta-frameworks like NextJS v13 is a server component. To specify a client component, simply add 'use client' at the top of your JSX/TSX file. Note: A client component cannot import a server component because the server components cannot run in the browser. Furthermore, this dependency would cause the server to send extra JavaScript bundles that aren't necessary. However, a server component can import a client component. We will discuss the details later, but be sure to remember this. Heres a sample of the React tree that has both Server and Client Components. If you're wondering how it's possible to have both server and client components in the same React tree, keep reading. We'll explain how it works and dive into the technical details of the implementation. How are the Server and Client Components rendered on the same tree? If you remember server-side rendering (SSR), which involves rendering the entire HTML on the server and then passing it to the client (browser), which enables stateful interactivity. In contrast, server components render server components over the server. If any client components are encountered in the process, the server adds a placeholder in the React tree where the client component was supposed to appear and moves on to the next component. This process repeats until all the components are processed. Later, when this tree is sent to the browser, the browser fills in the placeholders with the client components. Its similar to filling the forms, you fill in all the required fields, which are Server components and you skip the optional fields, which are Client components. Here ends the high-level picture, lets dive into technical details now. There are a lot of terms that need clarity here. How does a server know the details of a client component while adding a placeholder? How can the client (browser) identify whether a particular element is a placeholder or a server component? How can a client (browser) determine which component to add instead of a placeholder? What does the actual tree look like? Everything starts with a server receiving a request to render The React Server Components typically begin with server rendering upon receiving a request. It's important to note that the root component is always a server component, which renders both client and server components. The root component needs to be a server component, as it follows the rule that server components can import client components, but not vice versa. The server initiates the rendering process by collecting all necessary details, such as props and dependencies, etc. Generating the tree from the root component Let us consider a simple code snippet. // ClientComponent.client.jsxexport default function ClientComponent({ children }) { return ( <h1>This is client comp</h1> {children} </div> )}// ServerComponent.server.jsxexport default function ServerComponent() { return <span>This is server comp</span>}// AnotherServerComp.server.jsximport ClientComponent from './ClientComponent.client'import ServerComponent from './ServerComponent.server'export default function AnotherServerComp() { return ( <ClientComponent> <ServerComponent /> </ClientComponent> )} Here, The ClientComponent is a client component that renders an <h1> element with the text "This is client comp", and it also renders any children components passed to it. The ServerComponent is a server component that renders a <span> element with the text "This is server comp". The AnotherServerComp is also a server component that wraps bother a Client Comp with a Server Comp. As we already know that the React tree is rendered with server components and placeholders for the client components. Once rendered, the tree is serialized to JSON and sent back to the client (browser). Finally, the client deserializes the JSON to fill the client components and render the final result. Lets consider the above code, to see the entire results we have to render <AnotherServerComp /> Which also renders the <ServerComponent /> and <ClientComponent />, and then we have to serialize it to JSON. What does the serialized JSON look like after we render them? Recall what a React Element would look like, an object right? Once the components are rendered they are converted to an object with type property. The type property can either be a string for base HTML tags such as div p h1 or functions of a custom React component such as ServerComponent Heres an example of a React Element // React element for base HTML such as <span>This is a comp</span>{ $$typeof: Symbol(react.element), type: "span", props: { title: "This is a comp" }, ...}// React element for a component such as <MyComponent>example</MyComponent>> function MyComponent({children}) { return <div>{children}</div>; }{ $$typeof: Symbol(react.element), type: MyComponent // "reference" to the MyComponent function props: { children: "example" }, ...} Here to generate this object react uses a function called createElement learn more about createElement here. If you take a closer look, you'll notice that if the React Element is a user-defined Component, then the type property will be a function reference that points to that Component. However, functions cannot be serialized easily. To address this, React passes a special replacer function to JSON.stringify(). You can learn more about the replacer function here. This is achieved using the resolveModelToJSON() function developed by the React core team. You can find the source code for this function here. In a nutshell If the code encounters a base HTML tag, there is no need to worry as it can easily be serialized. If the code encounters a function, it must pass a replacer function to serialize it. That was a lot. Here are some answers to potential questions you might have by now. Is serializing necessary? Yes, because it is sent back to the client over the network as a response, so JSON is a standard way of passing data. What about placeholders? How are the placeholders in the client component serialized? The placeholders can be serialized easily as well because they store something called a module reference object. The Module Reference Object This is a new type of property introduced by React Server Components. It ensures that the client component's placeholders can be easily serialized. This would like something like this for our <ClientComponent/> { $$typeof: Symbol(react.element), type: { $$typeof: Symbol(react.module.reference), // Component Reference // ClientComponent is the default export... name: "default", // from this file! filename: "./component/ClientComponent.client.js" }, props: { children: "This is a client comp" },} This is what a placeholder would look like when Server Components are being rendered over the server. But how is the client component converted to this type of placeholder? This conversion is possible thanks to an update pushed to the react-server-dom-webpack bundler by the React team. When a server component imports something from a .client.jsx file, it only receives a module reference object containing the file name and exported name of the component, rather than the component itself. The client component function will never be part of the React tree constructed on the server. Later, when the browser encounters the placeholder, it can use the module reference object to locate the appropriate client component and replace the placeholder with it. Whats next? There's more. While this process is straightforward, what about suspense? Are these production-ready? What are the use cases for them? Many questions arise when considering the different ways NextJS provides for rendering, including Server components. However, we will be discussing RSC further, so stay tuned. It is also worth noting that RSC is now stable to use in production starting from NextJS v13.4. References https://www.plasmic.app/blog/how-react-server-components-work#what-are-react-server-components https://nextjs.org/blog/next-13-4

My Works

Showcasing my diverse range of projects and creations in the world of technology.

EVMIndex

Streamline EVM chain data retrieval with EVMindex - the simple and powerful indexer with real-time Webhooks.

GoAA

An Account Abstraction (ERC-4337) package written in go.

DocMySol

Docmysol is a user-friendly solution for creating Solidity documents with just one click.

SicaPay

Fight Climate Change And Earn Rewards With SICA. A Digital Currency Backed By Real Carbon Assets.

My Skill Set

List of tech/tools I've worked with

NodeJS

ReactJS

NestJS

TypeScript

GraphQL

NextJS

AWS

Solidity

HardHat

ether.js

MongoDB

Postgress

Prisma

Docker

DevOps

Ethereum

Polygon

Serverless

What Am I Learning?

List of things I’m learning, thought I’d share this.

Golang

On Going

Account Abstraction

On Going

AMPQ

Queued

MPC

Queued

Books I Recommend

List of books I’ve read and recommend

ReWork

ReWork

Change the Way You Work Forever

View on Amazon
The Minimalist Entrepreneur

The Minimalist Entrepreneur

How great founders do more with less

View on Amazon
14 Habits of Highly Productive Developers

14 Habits of Highly Productive Developers

By Zeno Rocha

View on Amazon
The Compound Effect

The Compound Effect

By Darren Hardy

View on Amazon
The PARA Method

The PARA Method

Simplify, Organise and Master Your Digital Life

View on Amazon
The 5 AM Club

The 5 AM Club

Own your morning, Elevate your life

View on Amazon