How To Dev

Introduction NextJS provides multiple flexible rendering methods, helping optimize performance and SEO for web applications. Below is an introduction to these methods along with their main advantages: Server-Side Rendering (SSR): Data is fetched and rendered into complete HTML on the server for each request. This HTML is then sent to the client. Better for SEO, faster First Contentful Paint (FCP) on the client, suitable for frequently changing data. Client-Side Rendering (CSR): The browser downloads a blank HTML file and a JavaScript file. JavaScript then runs on the client to fetch data and render the content. Smooth user experience after the first load, reduces server load, suitable for pages requiring high interactivity and data that does not need SEO. Static Site Generation (SSG): HTML is pre-rendered at build time (when running the next build command). These static HTML files are served for every request. Extremely high performance, fastest response time, excellent SEO, low server...

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