How To Dev

Introduction React Fiber is the core reconciliation engine of React supported since version 16, helping to change the rendering mechanism from synchronous to asynchronous. Advantages: Ability to pause and resume work: Allows React to break the rendering process into small units of work (fibers) so as not to block the main thread. Task prioritization: Prioritizes direct user interactions (keystrokes, clicks) over background data processing tasks. UX Improvement: Minimizes lag (jank) when the application has to handle complex UI components or large data lists. Detailed Workflow React Rendering Pipeline Trigger Phase When you call setState() or dispatchAction, React marks the changed nodes as dirty and uses the lane mechanism to mark upwards to the corresponding parent Fiber Nodes. Fiber: Acts as a "unit of work." Each component is a Fiber node containing information about state, props and links to parent/child/sibling nodes. Render Phase - Calculation This is where Reconciliati...

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...