How To Dev

Introduction The NextJS Image component is a powerful solution that helps automatically optimize images in web applications. The Image component has been implemented by NextJS with many superior functions that support displaying images more effectively than a standard HTML image tag, such as Automatically resizing images to fit the device Supporting modern image formats (like WebP and AVIF) Preventing Cumulative Layout Shift (CLS) by holding space for images Integrating a built-in lazy loading mechanism to speed up initial page load speeds. Detail In this article, I will provide an example of loading a product list in ecommerce pages so you can see the advantages of NextJS Image in automatic image optimization. Create file app/image/types.ts export interface Product { id : number title : string description : string price : number thumbnail : string category : string } export interface ProductResponse { products : Product [] total : number skip : number ...

Introduction Partial Prerendering (PPR) is the optimal combination of Static Site Generation (SSG) and Dynamic Rendering (SSR) within a single route. Previously, a website usually had to choose one of two: either fully static (fast but not personalized) or fully dynamic (slower because of waiting for server processing). With PPR: Static Shell: Parts like Header, Sidebar or the frame (Skeleton) are pre-rendered into static HTML files and sent immediately to the user. Dynamic Islands: Parts that need actual data (like shopping carts or user info) are pre-rendered on the UI using React Suspense. The server will stream these parts down once the data is ready. Outstanding Advantages Instant response speed: Users see page content almost immediately (static shell) instead of looking at a white screen waiting for the server. Optimize user experience: Minimize Layout Shift (jumping content) by pre-defining fallbacks (like Skeleton) in Suspense. Detail In this article, I will guide you through a...