Sau một khoảng thời gian làm việc với NextJS và Serverless, mình nhận ra NextJS có khả năng giúp mình dễ dàng cải thiện tốc độ load page mà không cần phải config gì nhiều thông qua cơ chế static page và dynamic/server page của NextJS.
Static page là một page mà NextJS chỉ build một lần duy nhất khi deploy app. Đối với Serverless, ví dụ là Vercel thì Vercel sẽ build ra static page này xong và sẽ gửi page này đi toàn bộ các server của Vercel trên khắp thế giới, nếu như có request nào gọi page này thì server gần nhất sẽ trả về ngay lập tức page này mà không cần phải build lại page. Ví dụ như trang này: https://khanhduy.com/, gần như ngay lập tức bạn nhận được page trả về. Static page phù hợp với những page nào không có sự thay đổi về data hoặc có thay đồi nhưng thỉnh thoảng mới thay đổi, không thay đổi thường xuyên. Ví dụ các trang nên làm static như là landing page, blog, ….
Dynamic/Server page là page mà NextJS sẽ config cho server sẽ render lại khi có request. Đối với loại này thì build serverless hay server thì đều giống nhau. Loại này dùng để tạo một page mà chúng ta cần phải load data từ server lên để hiển thị, các data hiển thị có thay đổi liên tục.
Đối với ranking của google thì page nào có tóc độ phản hồi nhanh thì điểm sẽ khá cao, vì thế nên static page đóng vai trò rất quan trọng để chúng ta có thể cân nhắc update page sao cho nó có dạng static để deploy lên serverless.
NextJS cũng cung cấp một cơ chế nữa để có thể thay đổi data của static page đó chính là “revalidatePath”. Khi chúng ta gọi hàm này cho một page thì NextJS sẽ tiến hành build lại page. Và các serverless env như Vercel sẽ đi phân tán lại page này trên các server của mình. Ví dụ như khi bạn sử dụng CSM tool để viết blog thì bạn có thể để hàm revalidatePath trong webhook của CRM tool và blog page của bạn sẽ luôn được update nếu như có blog mới.
