<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Nancy Kataria</title>
    <description>The latest articles on DEV Community by Nancy Kataria (@nancy_kataria).</description>
    <link>https://dev.to/nancy_kataria</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2559302%2F30b11345-cbed-4702-8125-d7292ce828af.png</url>
      <title>DEV Community: Nancy Kataria</title>
      <link>https://dev.to/nancy_kataria</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/nancy_kataria"/>
    <language>en</language>
    <item>
      <title>Why don't more people know about this? 🤷‍♀️</title>
      <dc:creator>Nancy Kataria</dc:creator>
      <pubDate>Wed, 25 Feb 2026 21:59:49 +0000</pubDate>
      <link>https://dev.to/nancy_kataria/why-dont-more-people-know-about-this-3l4i</link>
      <guid>https://dev.to/nancy_kataria/why-dont-more-people-know-about-this-3l4i</guid>
      <description>&lt;p&gt;I’ve been using "Warp - best terminal for building with agents" - for a year now, and I just can't go back to a traditional CLI. &lt;/p&gt;

&lt;p&gt;It’s not just a terminal; it’s a terminal-based agent that understands my workflow. Here are the three things I love about it:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Context Awareness: While other AI copilots often get stuck in a "reasoning and solution" loop, Warp acts with precision. It knows exactly which directory you're in and can even make global system modifications.&lt;/li&gt;
&lt;li&gt;Command vs. Agent Logic: It’s incredibly smart at distinguishing between "typing a shell command" and "asking the agent a question". No awkward context-switching or copy-pasting into a browser.&lt;/li&gt;
&lt;li&gt;Debug Speed: It autodetects errors in real-time and fixes the issue immediately.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;If you’re still using a "dumb" terminal, you’re playing on hard mode.&lt;/p&gt;

&lt;p&gt;Check it out: &lt;a href="https://www.warp.dev/" rel="noopener noreferrer"&gt;https://www.warp.dev/&lt;/a&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Codebase Intelligence</title>
      <dc:creator>Nancy Kataria</dc:creator>
      <pubDate>Wed, 18 Feb 2026 08:00:11 +0000</pubDate>
      <link>https://dev.to/nancy_kataria/codebase-intelligence-c7m</link>
      <guid>https://dev.to/nancy_kataria/codebase-intelligence-c7m</guid>
      <description>&lt;p&gt;Navigating a new repository can be overwhelming. I built "Codebase Intelligence" tool to turn static code into an interactive knowledge base using Retrieval-Augmented Generation. Instead of the AI guessing what your code does, it reads the relevant files before answering.&lt;/p&gt;

&lt;p&gt;By using semantic search and vector embeddings, you can ask questions like:&lt;br&gt;
"How is the authentication flow handled?"&lt;br&gt;
"Where are the API routes defined?"&lt;br&gt;
Get a context-aware answer backed by your actual code.&lt;/p&gt;

&lt;p&gt;I reached some key milestones while building this tool: automated an ingestion pipeline using LangChain and OpenAI embedding model to fetch, chunk, and embed GitHub repos. Leveraged Pinecone vector database for high-performance semantic search and metadata filtering. Integrated GPT 4.0 and Vercel AI SDK to manage the conversation flow. Implemented GitHub Actions to handle automated daily maintenance and cleanup of the database.&lt;/p&gt;

&lt;p&gt;Check it out here: &lt;a href="https://codebase-intelligence-nu.vercel.app/" rel="noopener noreferrer"&gt;https://codebase-intelligence-nu.vercel.app/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Open Source and Contributions 🌟&lt;br&gt;
I've made this tool open source! Whether you want to use it for your own repos or help improve the ingestion logic, feel free to check out the code or create an Issue.&lt;/p&gt;

&lt;p&gt;Github Repository Link: &lt;a href="https://github.com/nancy-kataria/codebase-intelligence" rel="noopener noreferrer"&gt;https://github.com/nancy-kataria/codebase-intelligence&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhihx1ygv003p2zyeh9lk.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhihx1ygv003p2zyeh9lk.png" alt=" " width="800" height="927"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkht2cw56wzx43lgs37u4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkht2cw56wzx43lgs37u4.png" alt=" " width="800" height="655"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>ai</category>
      <category>rag</category>
      <category>vectordatabase</category>
    </item>
    <item>
      <title>GPU Glossary</title>
      <dc:creator>Nancy Kataria</dc:creator>
      <pubDate>Mon, 07 Jul 2025 06:48:18 +0000</pubDate>
      <link>https://dev.to/nancy_kataria/gpu-glossary-9a2</link>
      <guid>https://dev.to/nancy_kataria/gpu-glossary-9a2</guid>
      <description>&lt;p&gt;Today, I came across a &lt;a href="https://modal.com/gpu-glossary" rel="noopener noreferrer"&gt;GPU Glossary&lt;/a&gt; by &lt;a href="https://modal.com/" rel="noopener noreferrer"&gt;Modal&lt;/a&gt; while learning more about GPU architecture, and honestly, I haven’t found anything that explains GPU concepts this clearly and systematically before.&lt;br&gt;
The best part? The Terminal-inspired UI. It’s so visually appealing that even someone not particularly interested in GPUs might be tempted to explore just because of how cool it looks.&lt;/p&gt;

&lt;p&gt;What stood out to me is how interactive the site is. You can jump between sections effortlessly using the keyboard, explore nested topics like Streaming Multiprocessors or Warp Schedulers, and it all feels like navigating a live coding terminal. Every detail feels purposeful — it’s not just informative, it’s fun to use.&lt;br&gt;
I have always been a fan of how creative Modal is with their interfaces, and this glossary is yet another example of their thoughtful design and developer-first thinking.&lt;/p&gt;

&lt;p&gt;If you’re into GPUs or just want to see how documentation should be done, check this out! &lt;a href="https://modal.com/gpu-glossary" rel="noopener noreferrer"&gt;https://modal.com/gpu-glossary&lt;/a&gt;&lt;/p&gt;

</description>
      <category>gpu</category>
      <category>learning</category>
      <category>cli</category>
      <category>machinelearning</category>
    </item>
    <item>
      <title>Technical Interview Etiquette</title>
      <dc:creator>Nancy Kataria</dc:creator>
      <pubDate>Mon, 31 Mar 2025 16:42:53 +0000</pubDate>
      <link>https://dev.to/nancy_kataria/technical-interview-manners-678</link>
      <guid>https://dev.to/nancy_kataria/technical-interview-manners-678</guid>
      <description>&lt;p&gt;Technical Interviews are a key part of the hiring process. They’re designed to assess our problem-solving ability, technical knowledge, and coding skills. It involves two-way communication. It's important that the interviewer is able to understand us.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Read the problem&lt;/strong&gt; carefully. Highlight the keywords in the problem. Look at the examples carefully. It might be a special case or might not be big enough.&lt;/li&gt;
&lt;li&gt;To &lt;strong&gt;communicate understanding&lt;/strong&gt;, repeat the question back in your own words and get clarification on any misunderstandings. Ask for as much information as the interviewer is willing to give you (e.g. &lt;strong&gt;input/output constraints&lt;/strong&gt;) because it shows your problem-solving abilities to independently think of every possible detail. Ask if you can use a pen and paper to draw out your approach.&lt;/li&gt;
&lt;li&gt;Come up with a very basic &lt;strong&gt;brute-force approach&lt;/strong&gt;. Explain how it will work and what could be its runtime. Ask the interviewer what they think about your approach. Don't code until you are asked to.&lt;/li&gt;
&lt;li&gt;If they ask you to go for a more &lt;strong&gt;optimized approach&lt;/strong&gt;. Take a moment to think and explain your thought process. (Don't forget to communicate with the interviewer that you need a moment to process.)&lt;/li&gt;
&lt;li&gt;Once the interviewer and you are on the same page and they ask you to code, &lt;strong&gt;write a beautiful code&lt;/strong&gt;. Keep explaining what you are writing and for what purpose.&lt;/li&gt;
&lt;li&gt;Focus on keeping your code intuitive and understandable. Demonstrate familiarity of clean coding best practices.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Run test cases&lt;/strong&gt; when you are asked to. The interviewer might suggest some changes in your code before running the test cases.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;It's always good to communicate with yourself for more practice while leet coding.&lt;/p&gt;

</description>
      <category>interview</category>
      <category>coding</category>
      <category>leetcode</category>
      <category>programming</category>
    </item>
    <item>
      <title>Limitations of React v19 `use` API in Full Stack Frameworks</title>
      <dc:creator>Nancy Kataria</dc:creator>
      <pubDate>Fri, 31 Jan 2025 04:46:34 +0000</pubDate>
      <link>https://dev.to/nancy_kataria/limitations-of-react-v19-use-api-in-full-stack-frameworks-5fop</link>
      <guid>https://dev.to/nancy_kataria/limitations-of-react-v19-use-api-in-full-stack-frameworks-5fop</guid>
      <description>&lt;p&gt;The &lt;code&gt;use&lt;/code&gt; API significantly reduces the need for &lt;code&gt;useState&lt;/code&gt; and &lt;code&gt;useEffect&lt;/code&gt; in certain scenarios, particularly for handling asynchronous data fetching. Learn more: &lt;a href="https://react.dev/reference/react/use#streaming-data-from-server-to-client" rel="noopener noreferrer"&gt;React v19 documentation&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;How it Works:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;use(promise)&lt;/code&gt; suspends rendering until the promise resolves.&lt;/li&gt;
&lt;li&gt;You no longer need to manually handle loading states (&lt;code&gt;useState&lt;/code&gt;).&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;useEffect&lt;/code&gt; is not required to trigger data fetching.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  The Problem
&lt;/h2&gt;

&lt;p&gt;While working with React v19 and Next.js for a full-stack application, a critical limitation arises when trying to fetch API data using the new &lt;code&gt;use&lt;/code&gt; API. Let’s analyze an issue with a scenario where the goal is to stream data from the server component to the client component:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Fetching API Data in a Server Component:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Initially, an API call is made in a server component using:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Suspense&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;Feedbacks&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;../../Components/Feedbacks&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;Feedback&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;../../Models/Feedback&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;fetchFeedBacks&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;():&lt;/span&gt; &lt;span class="nb"&gt;Promise&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;FeedbackResponse&lt;/span&gt;&lt;span class="p"&gt;[]&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;try&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;fetch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`http://localhost:3000/api/getFeedbacks`&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;ok&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="k"&gt;throw&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Failed to fetch data&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;catch &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;[]&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;Home&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;feedbackPromise&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;Promise&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;FeedbackResponse&lt;/span&gt;&lt;span class="p"&gt;[]&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;fetchFeedBacks&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

  &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Suspense&lt;/span&gt; &lt;span class="nx"&gt;fallback&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;p&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;waiting&lt;/span&gt; &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="nx"&gt;message&lt;/span&gt;&lt;span class="p"&gt;...&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/p&amp;gt;}&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Feedbacks&lt;/span&gt; &lt;span class="nx"&gt;feedbackPromise&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;feedbackPromise&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/Suspense&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;  &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Client Component reading the promise values:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;use client&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;use&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;Feedbacks&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;feedbackPromise&lt;/span&gt; &lt;span class="p"&gt;}:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nl"&gt;feedbackPromise&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;Promise&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;FeedbackResponse&lt;/span&gt;&lt;span class="p"&gt;[]&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="na"&gt;feedbackList&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;FeedbackResponse&lt;/span&gt;&lt;span class="p"&gt;[]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;use&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;feedbackPromise&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;feedbackList&lt;/span&gt;&lt;span class="p"&gt;?.&lt;/span&gt;&lt;span class="nf"&gt;map&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="na"&gt;record&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;FeedbackResponse&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;
        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt; &lt;span class="nx"&gt;key&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;record&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;_id&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
          &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;h5&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;record&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/h5&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;          &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;p&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;record&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;feedback&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/p&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;      &lt;span class="p"&gt;))}&lt;/span&gt;
    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;  &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="nx"&gt;Feedbacks&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;This works well in development but fails in production when building the app using &lt;code&gt;next build &amp;amp;&amp;amp; next start&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;The error occurs because the fetch call inside the server component attempts to access the Next.js API route using &lt;code&gt;http://localhost:3000&lt;/code&gt;, leading to a connection refusal. The server tries to connect to itself while processing a request, which is not feasible in the production execution context. &lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Attempted Solutions and Their Problems
&lt;/h2&gt;

&lt;h3&gt;
  
  
  1. Switching to a Client Component:
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;use client&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;fetchFeedBacks&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;():&lt;/span&gt; &lt;span class="nb"&gt;Promise&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;FeedbackResponse&lt;/span&gt;&lt;span class="p"&gt;[]&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;try&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;fetch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`/api/getFeedbacks`&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;ok&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="k"&gt;throw&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Failed to fetch data&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;catch &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;[]&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Making the Home component as a client component and using a relative URL (&lt;code&gt;/api/getFeedbacks&lt;/code&gt;) to call the API results in hydration issues.&lt;/li&gt;
&lt;li&gt;The client and server reconciliation process does not align, leading to Next.js throwing hydration errors.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  2. Fetching Data Where It's Needed:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Normally, you might think of moving the fetch logic to the client component where it's actually used.&lt;/li&gt;
&lt;li&gt;However, with the &lt;code&gt;use&lt;/code&gt; API, a promise must be passed to the component as a prop, making it harder to manage updates dynamically.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  3. Fetching data directly in the Server Component
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;fetchFeedBacks&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;():&lt;/span&gt; &lt;span class="nb"&gt;Promise&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;FeedbackResponse&lt;/span&gt;&lt;span class="p"&gt;[]&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;try&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;connectDB&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="na"&gt;feedbackList&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;FeedbackResponse&lt;/span&gt;&lt;span class="p"&gt;[]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;Feedback&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;find&lt;/span&gt;&lt;span class="p"&gt;({});&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;feedbackList&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;catch &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;[];&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;Home&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;feedbackPromise&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;Promise&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;FeedbackResponse&lt;/span&gt;&lt;span class="p"&gt;[]&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;fetchFeedBacks&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

  &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Suspense&lt;/span&gt; &lt;span class="nx"&gt;fallback&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;p&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;waiting&lt;/span&gt; &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="nx"&gt;message&lt;/span&gt;&lt;span class="p"&gt;...&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/p&amp;gt;}&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Feedbacks&lt;/span&gt; &lt;span class="nx"&gt;feedbackPromise&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;feedbackPromise&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/Suspense&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;  &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;A potential workaround is to fetch data directly from the database inside the &lt;code&gt;Home&lt;/code&gt; server component instead of calling the API route. While this initially works, it introduces another issue:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The &lt;code&gt;fetchFeedbacks&lt;/code&gt; function works correctly in &lt;code&gt;localhost&lt;/code&gt;, but the data becomes stale after building and deploying the app.&lt;/li&gt;
&lt;li&gt;Even when submitting new responses through the form, the page displays old data, even after refreshing.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  The Only Viable Solution
&lt;/h3&gt;

&lt;p&gt;Given these limitations, the only working solution is to &lt;strong&gt;decouple the backend from Next.js entirely&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Keep the backend running on a different URL (e.g., a separate Node.js/Express server).&lt;/li&gt;
&lt;li&gt;Serve the frontend separately using Next.js.&lt;/li&gt;
&lt;li&gt;Ensure API calls are directed to an external backend rather than relying on Next.js API routes.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This separation avoids the self-referential API request issue and ensures fresh data is always fetched from the backend without running into hydration problems or infinite loops.&lt;/p&gt;

&lt;h3&gt;
  
  
  Conclusion
&lt;/h3&gt;

&lt;p&gt;The &lt;code&gt;use&lt;/code&gt; API in React 19 introduces powerful capabilities but has significant limitations in full-stack frameworks like Next.js. While it simplifies data fetching, it struggles in scenarios where:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;API routes are hosted within Next.js itself.&lt;/li&gt;
&lt;li&gt;Server components try to fetch from local API endpoints.&lt;/li&gt;
&lt;li&gt;Data freshness is a concern in production.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For full-stack applications, separating the backend and frontend into distinct services seems to be the most reliable approach.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/nancy-kataria/fart-feedbacks" rel="noopener noreferrer"&gt;Github Repo&lt;/a&gt; for the code.&lt;/p&gt;

&lt;p&gt;I would like to know about any possible solutions I might not have tried or comments on anything I might be doing wrong until now. If you have encountered similar issues or found alternative approaches, please feel free to share your insights!&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Self-Reminder&lt;/strong&gt;: "You must be imaginative and strong-hearted. You must try things that may not work. Don’t let anyone define your limits because of where you come from. Anyone can code but only the fearless can be great." - Auguste Gusteau, Ratatouille&lt;/p&gt;

</description>
      <category>react</category>
      <category>nextjs</category>
      <category>webdev</category>
      <category>learning</category>
    </item>
    <item>
      <title>A Beginner Story</title>
      <dc:creator>Nancy Kataria</dc:creator>
      <pubDate>Tue, 14 Jan 2025 00:17:30 +0000</pubDate>
      <link>https://dev.to/nancy_kataria/a-beginner-story-351j</link>
      <guid>https://dev.to/nancy_kataria/a-beginner-story-351j</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fddpv7twzc7t6xc4tjm7e.JPG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fddpv7twzc7t6xc4tjm7e.JPG" alt="Related-motivation-image" width="800" height="819"&gt;&lt;/a&gt;&lt;br&gt;
Learning something new can feel overwhelming. Every time I try to explore a new technology, I tend to quit at least once or twice. Sometimes, the documentation is unclear; other times, the technology feels too complex to grasp. &lt;/p&gt;

&lt;p&gt;As a beginner, you may find yourself in a pool of bugs when you start coding with a new technology and the app might even crash. But over the years, I’ve realized one thing: you are just 4–5 Google searches away from finding a solution. The key is simple—don’t give up.&lt;/p&gt;

&lt;p&gt;When you’re at a beginner level, it’s easy to judge yourself harshly. This feeling intensifies when you’re working in a team or joining a new one during an internship or a job. It’s like being a new character introduced in season 7 of a web series. You’re unfamiliar with the story of the product so far, the tools being used, and the workflows that are already in place.&lt;/p&gt;

&lt;p&gt;The people around you seem more experienced, and it’s natural to feel like you’ll never measure up. But here’s the truth: it’s okay to feel like a beginner. Learning is a process, and even the most experienced ones started from 0.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Remember&lt;/strong&gt;: Never compete or compare yourself with a pro-coder. Always learn from them.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Self-Reminder&lt;/strong&gt;: "If only we started younger, we would have been so much better. If we knew back then what we do now, things would change. Here's the thing: Today is the youngest you ever will be again, and you still have enough time to become all you want to be in life. The best time to plant a tree may have been 20 years ago but the second best time is right now." - unknown&lt;/p&gt;

</description>
      <category>programming</category>
      <category>learning</category>
      <category>coding</category>
    </item>
  </channel>
</rss>
