Page và Rendering trong NextJS

Nguyễn Văn Mạnh -

Page là gì?

Page là một React Component được exported ra từ file js, jsx, ts, tsx trong thư mục pages. Tên file là thể hiện route đến file đó. ví dụ:

Tạo một trang about cho trang web chúng ta sẽ tạo như sau:

Pre-rendering trong NextJS

Mặc định NextJs sẽ pre-render trước tất cả các page. Nó có nghĩa là NextJs sẽ tạo ra các trang HTML có sẵn để trả về client mà không cần xử lý bất cứ mã nào ở browser, Điều này giúp các bot SEO có thể đọc hiểu được nội dung trang thay vì không đọc được gì theo các render trên client.

Mỗi trang sẽ được liên kết với một vài mã Javascript. Khi brower load xong thì sẽ thực thi các mã JS để tạo nên một trang web động.

Có hai loại Pre-rendering trong NextJS:

Static Generation và Server-side Rendering, sự khác nhau của hai loại render này là thời điểm chúng tạo ra HTML:

  • Static Generation: sẽ tạo ra HTML tĩnh khi mà chương trình được build và HTML sẽ được sử dụng lại cho các request
  • Server-side rendering: HTML sẽ được tạo khi có request gọi đến

Trong NextJS bạn có thể chọn loại render cho từng page, bạn có thể chọn cả hai loại trong một NextJS app (hybird NextJS app)

Hiệu năng Static Generation tốt hơn hiệu năng của Server-side Rendering. Static Generation có thể được cached trên CDN tự động bới NextJS.

NextJS cũng cho phép bạn kết hợp Client-side Rendering với Static Generation và Server-side Rendering,

Static Generation

Các page sử dụng Static Generation sẽ được trong quá trình build (nó sẽ được tạo sẵn khi chung ta chạy lênh next build trong command line). Nó sẽ được sử dụng lại cho nhiều request và có thể được cache CDN.

Trong NextJS, sẽ được chia ra làm 2 loại là generation có data và không có data:

  • Static generation without data trang sẽ được tạo mà không cần fetch data từ bên ngoài hay database, chúng ta sẽ chỉ cần HTML, CSS và JS, nó giống như ví tạo trang about ở bên trên.
  • Static generation with data:

Có một vài trang sẽ yêu cầu fetch một vài data trước khi render. Nó cũng được chia làm hai loại phụ thuộc vào nguồn data trang cần lấy ở bên ngoài hoặc trên đường dẫn

Ví dụ chúng ta cần lấy thông tin danh sách bài viết trước khi sử dụng pre-render. NextJS cung cấp phương thức getStaticProps, trong TS nó sẽ được triển khai như sau:

Khi mà chúng ta cần pre-render trang dạng post/[id].tsx (dạng dynamic route chúng ta sẽ tìm hiểu ở những bài sau). Bản chất của việc dùng getStaticPaths là việc sử dụng getStaticProps với dynamic route.

Trong TS chúng ta sẽ triển khai getStaticPaths như sau:

Cả hai loại Static Generation nên được sử dụng nếu có thể bời vì page sẽ chỉ mất duy nhất một lần render và nó sẽ được cache trên CDN vì vậy nó sẽ đem lại hiệu năng tốt hơn cho NextJS app.

Nhưng trường hợp trang thường hay được áp dụng:

  • Marketing page
  • Blog post hoặc portfolious
  • Help và document
  • Trang giới thiệu và contact
  • E-commerce product lists

Nếu trang có thể pre-render trước khi có request chúng ta sẽ sử dụng Static Generation. Nếu trang được cập nhật liện tục hoặc nội dung sẽ thay đổi cho mỗi lần request tới  trang chúng ta sẽ sử dujgn Client-side Rendering or Server-side Rendering.

Server-side rendering

Nếu trang sử dụng Server-side rendering HTML sẽ được tạo khi có request. Sau mỗi request NextJS sẽ tự động gọi hàm getServerSideProps trong page. Nó sẽ được sử dụng tương tự như hàm getStaticProps ở bên trên. Nó chi khác nhau tại thời gian nó thực thi.

Việc sử dụng server-side rendering sẽ tạo ra độ trễ cho mỗi lần chuyển trang so với Client-side Rendering nhưng load lần đầu sẽ nhanh hơn và tốt hơn cho SEO

Việc hiểu rõ cách thức render của page sẽ giúp tối ưu NextJS App hơn!

Cảm ơn các bạn đã đọc bài viết!