Sử dụng NextJS để xây dựng trang Web Ecommerce.

Khó khăn trong xây dựng trang web thương mại điện tử.

Trong một buổi báo cáo của mình, Google đã công bố rằng trải nghiệm trên trang web sẽ ảnh hướng đến kết quả tìm kiếm của trang đó.

Qua đó, ông lớn thương mại điện tử Amazone đã nhận ra rằng - cứ 100 Mili giây trong thời gian tải trang web sẽ khiến họ mất đi 1% doanh thu. Điều đó đặt ra áp lực rất lớn cho những trang web thương mại điện tử phải nâng cao chất lượng trang web hoặc chấp nhận bị mất doanh thu trên môi trường online.

Tuy nhiên, dựa vào thông tin từ Web Almanac, các trang thương mại điện tử vẫn có một hiệu năng khá tốt.

Ta có thể thẩy điểm số performance khá thấp, liệu các trang web này phải đảm nhiệm những gì mà khiến hiệu năng lại thấp như vậy ?

• Đầu tiên: Các trang web thương mại điện tử phải gọi rất nhiều Request, chúng có khoảng 100 req bao gồm các thông tin sản phẩm, thông tin khuyến mãi, …

• Thứ hai: Các tệp tài nguyên rất nặng. Video và hình ảnh là yếu tố cực kỳ quan trọng trọng trang thương mại điện tử, chúng là điểm thu hút người dùng mua hàng. Đổi lại, việc load quá nhiều như vậy khiến hiệu năng của trang web tệ đi rất nhiều.

• Thứ ba: Phải tập trung vào cá nhân hoá người dùng, để tăng doanh thu và tỷ lệ chuyển đổi, các sản phẩm sẽ phải đưa ra các đề xuất sản phẩm dựa vào thông tin cá nhân của khách hàng.

Các sàn thương mại lớn thường có các quy trình riêng để người bán có thể nhanh chóng bán hàng, tuy nhiên chúng thường thiếu tính chặt chẽ và hoạt động ở mức trừu tượng cao.

Ví dụ trang web TMĐT nổi tiếng Shopify có điểm số trung bình là 60.

Cách khắc phục

NextJS V1

NextJS đưa các tính năng như next/image để tối ưu hình ảnh, thực hiện lựa chọn render tĩnh hay động theo từng trang. Điều này giúp những trang không cần cập nhật nhiều có thể được lưu tĩnh, nhờ đó cải thiện hiệu suất trang web. Ngoài ra còn nhiều tính năng khác như SEO optimization, ISR, link prefetching, …

NextJS V2

Nối tiếp các thành công từ NextJS V1, lần này Version 2 mang đến các tính năng vượt trội, nối bật đó là Lưu trữ các thành phần dynamic với tốc độ như static

Có nhiều thành phần động trong một trang web thương mại điện tử như Giỏ hàng, Kết quả tìm kiếm, Sản phẩm đã mua, …Dù đã có các tính năng như SSR, SSG, ISR việc tối ưu trang web vẫn là bài toán khó.

Để đạt đến hiệu suất cao hơn, chúng ta cần đền một thứ có thể quản lý được các thành phần tĩnh và động của ứng dụng.

Vì lẽ đó, NextJS đã cho ra mặt App routes

Hiệu suất của các thành phần động đã nhanh bằng với thành phần tĩnh, nhờ vào kiến trúc cache mới và Vercel Cache data.

Có thể nói sử dụng NextJS là một lựa chọn rất tốt cho việc xây dựng một trang web bán hàng hoặc một trang web thương mại điện tử.