NodeSource’s Post

State of Node.js Performance 2024 https://lnkd.in/gaHxKkf7 #nodejs #node #javascript #performance

What’s new in React 19 New hooks: ✅ useActionState ✅ useFormStatus ✅ useOptimistic New API: ✅ use Preloading resources: ✅ prefetchDNS ✅ preconnect ✅ preload ✅ preloadModule ✅ preinit ✅ preinitModule Other improvements: ✅ref as a prop (There’s no need for forwardRef anymore) ✅ ref callbacks ✅ Context as a provider ( There’s no need for <Context.Provider> anymore ) ✅ useDeferredValue initial value ❇ Document metadata support ❇ Stylesheet support ❇ Async scripts support ❇ Custom Elements support ❇ Better error reporting https://lnkd.in/dpeKdWCa #react #javascript #typescript #frontend

Promises vs. Observables In web applications, when we need data from a server, we usually request a list of data. The server then fetches this data from a database or an API. For large datasets, this process can take time. Here's where Promises come into play. A Promise in JavaScript represents a value that will be available in the future. It allows us to handle asynchronous operations by providing data once it's ready, regardless of whether it’s the requested data or an error. On the other hand, Observables (from RxJS, not native JavaScript or Angular) handle asynchronous data differently. Instead of waiting for all data to be collected and then sending it at once, Observables stream data in chunks or packets as soon as it's available. This approach allows for continuous data updates and more efficient handling of large or dynamic datasets. While Promises are a built-in feature of JavaScript, Observables are a powerful feature provided by the RxJS library. Understanding the difference between them can help you choose the right tool for your data handling needs.

Today I am going to work on performance and optimization, since I have added more to my sideproject H. I will look into the topics as: Backend: Optimize controllers and database. Frontend: Efficient data fetching and rendering. (Use React Query for Data Fetching and Memoize for my components) Global Component: Implement notification system correctly for best performance. Of course there are couple of steps for each topic, but dont want to make this post too long, and I need to switch over to my VS window soon. #React #JavaScript #Fullstack #Optimization #Performance #Rendering #Cache #Frontend #Backend #API

If you want to pass Primitive or Object data from a server component to a client component as props In NEXT.js 14+ you can do it easily but there is an important point you need to consider before doing so. In NEXT.js 14+ although you are writing your client-side and server-side codes beside each other, their execution and runtime context have a gigantic difference and they are living in two separated worlds, your server code runs on the server and your client code is hydrated from server to the client and is going to be parsed and executed on the client side on people's devices so that's a huge distance from where server and client code runs! For NEXT.js to be able to hydrate JavaScript code or send data from a server component to a client component, the data must be serializable which means they need to be able to be transformed to string and back without losing context or data, having this in mind functions are non-serializable objects and can not be converted as we said so you can't pass them from a server component to a client component. What is the solution then? well, NEXT.js 14+ has something new for us to tackle this bottleneck very easily and it is server actions, you can declare server actions in server components and pass them as props to client components without any problems! For example below is my NEXT.js page which has a list of movie cards and it has an infinite scrolling feature as well, I pass the fetch more server action responsible for fetching more pages of data to the client component without any problems. #frontend #frontenddeveloper #frontenddevelopment #frontendengineer #javascript #javascriptdeveloper #typescript #react #reactjs #reactdeveloper #react19 #reacthooks #nextjs #nextjs14 #ssr #ssg #isr #servercomponents #clientside #serverside #serveractions #webdevelopment

Over the past few days, I have been working on bench-node, which is a benchmarking library for Node.js. It was originally developed to be part of the Node.js core. I have just released a new beta version and I would greatly appreciate any feedback. You can install it using `npm install bench-node` By default, it calls %NeverOptimizeFunction from V8 to prevent dead-code elimination. While this doesn't create a "realistic" benchmark, it is still comparable. Microbenchmarks and JavaScript aren't realistic either, so I will write a section about it! You can check it out at https://lnkd.in/d9WprmXy.

Understanding the Key Differences Between getServerSideProps and getStaticProps in Next.js Next.js is a powerhouse for building React applications, offering robust server-side rendering (SSR) and static site generation (SSG) capabilities. Two essential methods that developers often choose between are `getServerSideProps` and `getStaticProps`. While both are used to fetch data, they serve vastly different purposes. Here's a quick breakdown: getServerSideProps (For SSR) - When to use:Dynamic, per-request data fetching. - How it works: Executes on every request. The server fetches data, renders the HTML, and sends it to the client. - Use case: Personalized dashboards, user-specific content, or real-time updates. - Pros: Always up-to-date data tailored to the request. - Cons: Increased latency as data is fetched for every request. getStaticProps(For SSG) - When to use: Pre-rendering at build time for static content. - How it works: Data is fetched once during the build process, and HTML is generated for reuse across requests. - Use case: Blogs, marketing pages, or content that changes infrequently. - Pros: Super-fast loading with cached content served via CDN. - Cons: Data becomes stale unless revalidated. Hybrid Capabilities: Combine static and dynamic by using Incremental Static Regeneration (ISR) with getStaticProps. You can define a revalidate period to fetch and rebuild static pages after a certain time, giving you the best of both worlds. Which Should You Choose? - Choose getServerSideProps for real-time or user-specific data. - Opt for getStaticProps when speed and scalability are a priority, with less frequent data changes. By leveraging these methods thoughtfully, you can optimize performance while delivering the right experience to your users. #NextJS #WebDevelopment #JavaScript #FrontendDevelopment #SSR #SSG #DevTips

𝗟𝗲𝘁’𝘀 𝗘𝘅𝗽𝗹𝗼𝗿𝗲 𝟰 𝗠𝗮𝗶𝗻 𝗔𝗿𝗲𝗮𝘀 𝗢𝗳 𝗔𝗴𝗴𝗿𝗲𝘀𝘀𝗶𝘃𝗲 𝗖𝗮𝗰𝗵𝗶𝗻𝗴 𝗶𝗻 𝗡𝗲𝘅𝘁.𝗷𝘀 𝟭) 𝗥𝗲𝗾𝘂𝗲𝘀𝘁 𝗠𝗲𝗺𝗼𝗶𝘇𝗮𝘁𝗶𝗼𝗻: It extends the 𝙛𝙚𝙩𝙘𝙝 𝘼𝙋𝙄 by automatically memoizing requests that have the same URL and options. This means you can call a fetch function for the same data in multiple places in a React components 𝘄𝗵𝗶𝗹𝗲 𝗼𝗻𝗹𝘆 𝗲𝘅𝗲𝗰𝘂𝘁𝗶𝗻𝗴 𝗶𝘁 𝗼𝗻𝗰𝗲. 😍 It helps us 𝗮𝘃𝗼𝗶𝗱 𝗱𝘂𝗽𝗹𝗶𝗰𝗮𝘁𝗶𝗼𝗻 𝗼𝗳 𝗿𝗲𝗾𝘂𝗲𝘀𝘁𝘀 as well as props drilling. Thanks to Next.js for this caching. 🙏 𝟮) 𝗗𝗮𝘁𝗮 𝗖𝗮𝗰𝗵𝗲: It 𝘀𝘁𝗼𝗿𝗲𝘀 𝘁𝗵𝗲 𝗿𝗲𝘀𝗽𝗼𝗻𝘀𝗲 𝗱𝗮𝘁𝗮 𝗮𝗳𝘁𝗲𝗿 𝗳𝗲𝘁𝗰𝗵𝗶𝗻𝗴 in some internally managed caching mechanism. Whenever you request data, it will immediately serve the response from the cache. (𝗬𝗼𝘂 𝗡𝗘𝗩𝗘𝗥 𝗴𝗲𝘁 𝗳𝗿𝗲𝘀𝗵 𝗱𝗮𝘁𝗮 𝘂𝗻𝘁𝗶𝗹 𝘆𝗼𝘂 𝘁𝗲𝗹𝗹 𝗡𝗲𝘅𝘁.𝗷𝘀). 𝟯) 𝗙𝘂𝗹𝗹 𝗥𝗼𝘂𝘁𝗲 𝗖𝗮𝗰𝗵𝗲: After a production build, HTML and RSC (React Server Components) are also served from the cache. Always wonder why data sometimes isn't getting updated, even after refreshing the page, and then when you build again, it’s there? 𝗝𝘂𝘀𝘁 𝗯𝗲𝗰𝗮𝘂𝘀𝗲 𝗼𝗳 𝗙𝘂𝗹𝗹 𝗥𝗼𝘂𝘁𝗲 𝗖𝗮𝗰𝗵𝗲, 𝗻𝗼 𝗿𝗲𝗾𝘂𝗲𝘀𝘁𝘀 𝗮𝗿𝗲 𝘀𝗲𝗻𝘁.😐 𝟰) 𝗥𝗼𝘂𝘁𝗲𝗿 𝗖𝗮𝗰𝗵𝗲: All caching mechanisms happen on the server side, so why does the router cache work on the client side? 𝗕𝗲𝗰𝗮𝘂𝘀𝗲 𝗡𝗲𝘅𝘁.𝗷𝘀 𝘀𝘁𝗼𝗿𝗲𝘀 𝗥𝗦𝗖 𝗽𝗮𝘆𝗹𝗼𝗮𝗱𝘀 𝗶𝗻𝘀𝗶𝗱𝗲 𝘁𝗵𝗲 𝗯𝗿𝗼𝘄𝘀𝗲𝗿 𝗺𝗲𝗺𝗼𝗿𝘆. This ensures extremely fast page transitions. 𝖳𝗁𝖺𝗇𝗄𝗌 𝖿𝗈𝗋 𝗋𝖾𝖺𝖽𝗂𝗇𝗀. 𝖨 𝗁𝗈𝗉𝖾 𝗒𝗈𝗎 𝗅𝖾𝖺𝗋𝗇𝖾𝖽 𝖺𝖻𝗈𝗎𝗍 𝗍𝗁𝖾 𝖻𝖾𝗁𝗂𝗇𝖽-𝗍𝗁𝖾-𝗌𝖼𝖾𝗇𝖾𝗌 𝖼𝖺𝖼𝗁𝗂𝗇𝗀 𝗆𝖾𝖼𝗁𝖺𝗇𝗂𝗌𝗆𝗌 𝖨 𝗌𝗁𝖺𝗋𝖾𝖽.  𝖨 𝗉𝗈𝗌𝗍 𝗋𝖾𝗅𝖺𝗍𝖾𝖽 𝗍𝖾𝖼𝗁 𝖼𝗈𝗇𝗍𝖾𝗇𝗍 𝖺𝗇𝖽 𝗌𝗁𝖺𝗋𝖾 𝗆𝗒 𝗂𝗇𝗌𝗂𝗀𝗁𝗍𝗌. 𝖥𝖾𝖾𝗅 𝖿𝗋𝖾𝖾 𝗍𝗈 𝗌𝖾𝗇𝖽 𝗆𝖾 𝖺 𝖼𝗈𝗇𝗇𝖾𝖼𝗍𝗂𝗈𝗇 𝗋𝖾𝗊𝗎𝖾𝗌𝗍 𝗈𝗋 F𝗈𝗅𝗅𝗈𝗐 𝗆𝖾. 𝖫𝖾𝗍’𝗌 𝗀𝗋𝗈𝗐 𝗍𝗈𝗀𝖾𝗍𝗁𝖾𝗋. 🚀 #NextJS #WebDevelopment #ReactJS #Caching #WebPerformance #JavaScript #FrontendDevelopment #Programming #TechInsights #CodeOptimization #WebDev #TechTips #SoftwareEngineering #DevCommunity

In Part 1, we looked at the features of the Fastify Node.js Web framework compared to Express.js. In Part 2, we'll work through migrating an example Express.js application to Fastify.

Check out my latest article, where I dive into how the synchronous code can go wrong, how a makeshift solution for fetching data led to API timeouts and what does javascript has to offer to solve this. Read the full article here: https://lnkd.in/gEVq7Uz2 #javascript #eventloop #frontend