Tác giả : Cao Tiến Đạt
Email : tiendat772001@gmail.com
Số điện thoại : 0975804410

Nếu đã từng làm việc với front-end chắc hẳn bạn không còn xa lạ gì với khái niệm Server Side Render đúng không. Trong bài viết lần này mình sẽ giới thiệu về một framework phổ biến hỗ trợ tối đa và tối ưu hoá cho bạn trong quá trình phát triển một ứng dụng Server Side Render, đó là NextJS.

Next.Js là gì ?

Next.js là một framework front-end React được phát triển dưới dạng open-source bổ sung các khả năng tối ưu hóa như render phía máy chủ (SSR) và tạo trang web static. Next.js xây dựng dựa trên thư viện React, có nghĩa là các ứng dụng Next.js sử dụng core của React và chỉ thêm các tính năng bổ sung. Việc triển khai ứng dụng SSR cho phép máy chủ truy cập tất cả dữ liệu được yêu cầu và xử lý JavaScript cùng nhau để hiển thị trang. Sau đó, trang được gửi lại toàn bộ cho trình duyệt và ngay lập tức được hiển thị. SSR cho phép các trang web load trong thời gian nhỏ nhất và tăng trải nghiệm người dùng với khả năng phản hồi nhanh hơn.

Tại sao phải sử dụng Next.Js

Ưu điểm chính của Next.js là hỗ trợ SSR tích hợp để tăng hiệu suất và SEO. Với tất cả thông tin trên server, nó sẽ xử lý để generate ra thông tin HTML của trang/ Sau đó Client có thể gửi một yêu cầu đến Server và nhận toàn bộ trang HTML thay vì yêu cầu từng thành phần riêng lẻ với Client Render.

Điểm mạnh:

  • Ứng dụng Next.js tải nhanh hơn đáng kể so với ứng dụng React do được render phía Server.
  • Hỗ trợ các tính năng cho static web.
  • Đối với những ai đã có kinh nghiệm làm việc với React thì việc tiếp tập NextJS sẽ là một việc dễ dàng.
  • Tự động code splitting cho các page nhằm tối ưu hoá performance khi load trang.
  • Dễ dàng xây dựng các API internal thông qua các API routes tích hợp sẵn và tạo các endpoit API.
  • Hỗ trợ tích hợp cho route cho page, CSS, JSX và TypeScript.
  • Nhanh chóng thêm các plugin để tùy chỉnh Next.js theo nhu cầu của trang cụ thể của bạn.

Điểm yếu:

Nhược điểm thực sự duy nhất của Next.js là nó là một framework được cố định, có nghĩa là nó có một phương pháp và bộ công cụ cụ thể mà nó muốn bạn sử dụng để xây dựng các ứng dụng của mình. Tuy nhiên, các tùy chọn của Next.js sẽ phù hợp với phạm vi của hầu hết các dự án.

Khi nào nên sử dụng Next.Js

Next.js phù hợp nhất để tạo trang chủ hoặc trang đích được tối ưu hóa cũng như bất kỳ trang nào khác dựa trên lưu lượng truy cập tìm kiếm không phải trả tiền. Các trang này sẽ được hưởng lợi nhiều nhất từ các cải tiến SEO của Next.js.

Next.js cũng tốt hơn cho các trang web so với các ứng dụng web khác vì SSR cho phép nó có cùng hiệu suất bất kể thiết bị mà khách hàng đang sử dụng.

Next.js ít lý tưởng hơn để tạo các ứng dụng web hoặc các ứng dụng bảo mật yêu cầu xác thực vì những điều này không có lợi cho render phía máy chủ.

Cách khởi tạo ứng dụng Next.JS

Tương tự với create-react-app của ReactJS thì với NextJS ta cũng có công cụ tương tự là create-next-app. Bạn có thể cài đăt và xem hướng dẫn cài đặt chi tiết ở đây. Sau khi cài việc cài đặt thành công ta có thể khởi tạo một ứng dụng NextJS mới với lệnh:

pic-1

Sau khi tạo ta sẽ có được cây thư mục như sau:

pic-2

Với cây thư mục này thì ta cần quan tầm đến một số thứ như:

-components: như cái tên thì nó sẽ là nơi chức các component cho ứng dụng của chúng ta.
-pages: đây là nơi chứa các trang mà chúng ta truy cập từ url vào, cụ thể mình sẽ nói đến ở dưới.
-static: là thư mục chứa các file static của chúng ta như ảnh, css, …
-next.config.js: cũng như cái tên thì nó là fie chứa config cho ứng dụng của chúng ta.

Sử dụng các file static

Một điều quan trọng nữa đối với UI là ta sẽ cần phải chèn ảnh vào trang của chúng ta. Như ở trên mình đã nói là chúng ta có một folder là /statics. Đối với ảnh thì bên trong ta nên tạo thêm một folder là /images và lưu ảnh vào đó. Lúc này ở trong bất cứ component nào ta có thể sử dụng ảnh đó bằng cách như sau:

pic-3

Sử dụng next/head

Để hỗ trợ cho việc SEO cũng như chia sẻ thì NextJS cung cấp cho chúng ta một component là next/head. Cách sử dụng như sau:

pic-4

Về cơ bản nội dung mà chúng ta khai báo trong phần này sẽ được thêm vào phần trang html mà chúng ta trả về cho user. Điều này đồng nghĩa với tùy trang ta có thể truyền thêm các thông tin như title, meta, og:image, og:title, … để có thể share lên các trang khác như facebook.

Routing

Nextjs sẽ tự động tạo thành các router đối với các file mà bạn tạo trong folder pages/, ví dụ:

  -pages/index.js sẽ ứng với url gốc là /
  -pages/post/index.js sẽ ứng với url là: /post
  -pages/post/create.js sẽ ứng vớ url là: /post/create

Tuy nhiên với trường hợp bạn muốn url của bạn có dạng /post/:postId thì lúc này ta sẽ cần dùng đến 1 file đóng vai trò là server như sau:

pic-5

Về cơ bản đây là file server.js có vai trò hỗ trợ việc SSR. Vì phần postId kia là tham số động và ta không có cách nào để tạo ra url động dưới dạng đó theo quy tắc sinh url theo page của Nextjs. Với cách viết trên thì cái url có dạng /post/:postId sẽ được bên client hiểu là /post?postId=? nhưng với cơ chế rewrite url nên nó sẽ là /post/:postId và trong component của chúng ta có thể lấy được postId này như một query param như sau:

pic-6

Với đoạn code trên khi lần đầu ta truy cập vào trang với url /post/1 thì trong component của chúng ta sẽ lấy được số 1 giống ứng với postId và sử dụng nó để gọi API và lấy về post có id là 1 sau đó render ra giao diện tương ứng trên server và trả về file nội dung html đầy đủ cho chúng ta. Tuy nhiên đó là cách mà ta khai báo router với SSR còn với Client thì chúng ta sẽ sử dụng thẻ next/link để thực hiện việc điều hướng.

Link

Nextjs cung cấp sẵn cho chúng ta một component là next/link giống như component trong react-route. Tuy nhiên khi sử dụng cú pháp sẽ như sau:

pic-7

Kết bài

Bài viết của mình đến đây đã khá là dài nên mình sẽ dừng lại ở đây. Trong phần tiếp theo mình sẽ tiếp tục chia sẻ thêm những điều khác mà mình tìm được.