How To Dev

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

Introduction NextJS Server Actions is a powerful feature that allows you to perform data mutations directly on the server without having to create API Routes manually. Distinguishing between Routes Handle and Server Actions Similarities: Both are code defined on the Server Both can be used in Server components and Client components Differences: Use Routes Handle if you need to call APIs from outside such as from partners or mobile Use Server Actions for internal CRUD processing operations The outstanding advantages of Server Actions compared to Routes Handle include: Tight integration with Form: Works smoothly with the action attribute of HTML forms. Progressive Enhancement: The application can still function basically even when JavaScript has not finished loading or is disabled. Security: Automatically protects against CSRF attacks and keeps sensitive processing logic on the server side. Code simplification: Reduces boilerplate code when connecting between Client and Server. When...