Posts

Showing posts with the label typescript

Guide to integrating NextJS with gRPC and NestJS via HTTP/2

Image
Introduction gRPC is a high-performance RPC (Remote Procedure Call) framework developed by Google, using Protocol Buffers (protobuf) as the interface definition language and data serialization format. Unlike traditional REST which uses text (JSON), gRPC transmits data in binary format to optimize payload size and processing speed. In particular, gRPC operates based on HTTP/2, providing outstanding advantages such as: Multi-plexing (sending multiple concurrent requests over a single connection), Header Compression, and Server Push, helping to reduce latency and increase bandwidth for microservices systems. In this article, I will use NextJS for the frontend and act as a BFF (Backend For Frontend) as a proxy server to aggregate information and communicate via HTTP/2 gRPC with the NestJS server. Our connection will be as follows: Frontend connects to NextJS proxy server using restful api HTTP/1.1, NextJS connects to NestJS using gRPC via HTTP/2, we need a NextJS middleware to handle it, n...

Deploying Webhook Revalidate for NextJS

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