SEO với React.js: Next.js vs Gatsby.js

SEO (Search Engine Optimization) là 1 điều không thể thiếu đối với những trang web hiện nay, đặc biệt là với các start-up. Nói 1 cách đơn giản, người dùng sẽ dễ dàng tìm thấy trang web của anh em nếu nó được SEO tốt. Trong khi đó, những trang web SPA (Single-Page Application) code bằng những lib hoặc framework nổi tiếng gần đây như React, Vue, Angular.... thì SEO lại rất tệ. Do những trang SPA chạy theo cơ chế CSR (Client-Side Rendering) nên khi anh em disable js trên browser thì trang web sẽ không hiển thị gì cả (browser không execute React code).

Tất nhiên sau 1 thời gian sẽ có những giải pháp cho vấn đề nhức nhối này. Và từ đó Next.js và Gatsby.js nổi lên như 1 vị thần cứu vớt React thoát khỏi thảm cảnh "daed library".

Next.js

A free and open source web application framework based on React.js, Node.js, webpack and Babel.js for building server-side rendered and/or static web applications using React.

Ý tưởng ban đầu của Next.js rất đơn giản: để 1 trang web có thể SEO tốt thì content của trang web đó nên được render từ phía server (cơ chế Server-side Rendering => SSR), ví dụ điển hình là những website PHP. Khi đó dù anh em disable js của browser thì trang web vẫn sẽ hiển thị content (những con bot crawler của google có thể đọc được content đó => SEO ngon).

Những version sau này, Next.js còn hỗ trợ thêm tính năng phụ giúp build static page cho những trang ko cần dynamic content. Ngoài ra, Next.js support sẵn những tính năng mạnh mẽ như: Hot Code Reloading, Automatic Routing, Automatic Code Splitting, Prefetching....

Gatsby.js

A free and open source framework based on React that helps developers build blazing fast websites and apps

Ngắn gọn Gatsby là 1 bộ the static site generator. Nghĩa là sau khi anh em chạy lệnh yarn build hoặc npm run build thì Gatsby sẽ build ra static web dựa trên code của anh em (giống như Hugo hay Jekyll). Sau đó anh em có thể host trang web trên bất kì static hosting service nào (ví dụ AWS S3, Netlify, Surge....)

Cơ chế của Gastby dựa trên JAMStack, 1 kiến trúc mới dùng JavaScript, APIs, Markup và không cần dùng bất kì database hoặc ngôn ngữ lập trình server-side nào cả.

Gatsby vs Next.js

Cả 2 framework đều support đầy đủ các hot features như hot reloading, code splitting.... nhưng sự khác biệt quan trọng nhất nằm ở cơ chế của chúng: Server-side Rendering vs Static Site Generator.

• Static Site Generator sẽ tạo ra HTML/CSS/JS thuần sau khi build xong (at build time). Với static pages thì vô đối về performance và pricing cho các static hosting thì rất rẻ nhưng mỗi lần update content thì anh em phải run lại build của trang web, cũng như upload lên lại hosting. Khá là phiền phức nếu như anh em không có 1 bộ CI/CD.
• Server-side Rendering sẽ tạo ra HTML/CSS/JS mỗi khi có request mới từ server (at run time). Như vậy content của anh em sẽ luôn được update mới 1 cách nhanh chóng. Tuy nhiên, cũng có nghĩa là anh em sẽ phải tốn thêm 1 con server để render content, kéo thêm 1 cơ số vấn đề như phải handle resources, lượng concurrent request.... của server đó.

Ngoài ra thì còn 1 điểm khác biệt nữa là Gatsby dùng GraphQL để handle data. Trong khi đó Next.js lại không support sẵn bộ mỳ để handle data giùm anh em, cho phép anh em tùy biến dùng bất kì thứ gì anh em muốn.

Túm váy lại

Để SEO tốt hơn, anh em có thể chọn bất kì framework nào trong 2 bộ này. Tuy nhiên, để tối ưu thì anh em nên cân nhắc tùy thuộc vào trang web của anh em:

• Next.js phù hợp với những trang web lớn đòi hỏi thường xuyên update dynamic content và có số lượng dynamic page rất nhiều. Hoặc đơn giản là anh em không thích GraphQL; muốn tự handle data, tỏa sáng theo phong cách của mình (với Redux, Mobx.... hoặc tự custom).
• Còn lại với những trường hợp khác thì mình nghĩ Gatsby.js có thể cân hết, từ landing page cho đến những trang blog, những trang e-commerce với số lượng sản phẩm không quá lớn....

Next.js và Gatsby.js đều là những React frameworks anh em nên thử qua (bên cạnh bộ CRA). Chúng có rất nhiều thứ hay ho và tiện cho anh em khi làm 1 trang web SEO-friendly bằng React. Anh em nên tự mình trải nghiệm cả 2 framework này và cảm nhận vẻ đẹp của chúng nhé.