How To Dev

Introduction In the previous article, I guided you on how to use D3 and Canvas to Visualize Data. Now we will continue to dive deeper to understand some solutions that help optimize performance, aiming for a State-of-the-art" approach for building Real-time Data Visualization on the Web today. Some techniques I will apply to optimize performance are as follows: Data Buffering (Data Layer Throttling): utilizing requestAnimationFrame to ensure smooth processing and rendering according to the screen refresh rate, such as 60Hz or 120Hz. Utilizing Context Alpha Optimization: getContext('2d', { alpha: false }). When you turn off the alpha channel (transparency), the GPU will not have to calculate color blending with elements behind the canvas, significantly reducing the load on the graphics chip. Offscreen Canvas: Using an implicit Canvas to calculate beforehand before pushing to the main screen. The issue with drawing directly on the Canvas is that if you have to draw too much,...

Introduction In previous articles, we explored various render types in NextJS and how to use the App Router. Now, I will provide a more detailed guide focusing on Incremental Static Regeneration (ISR) and Static Site Generation (SSG), specifically looking at two types of revalidation: Time-based Revalidation: This method uses revalidate: {time}, automatically calling the api server to fetch new data after the specified time expires. On-demand Revalidation: This approach allows you to self-define tags. To revalidate using this method, a webhook api is required. When called, it will automatically trigger the revalidation for the specified tag. Prerequisites This article continues the content from previous articles. If anything is unclear, please review the previous articles first. Detail Update the file app/products/page.tsx. The content below doesn't contain anything extraordinary. You just need to pay attention to the tags section, which demonstrates the use of On-demand revalidati...