Nếu bạn đã từng làm việc với font-end sử dụng các thư viện hoặc framework như là Angular, Reactjs, Vuejs thì chắc hẳn các bạn không còn xa lạ với khái niệm Server Side Render (SSR) đúng không. Như ở bài viết trước thì mình cũng có hướng dẫn mọi người cách để tích hợp Reactjs vào Laravel, cũng như là tìm hiểu một số thứ hay ho khi sử dụng Reactjs cho dự án. Trong bài viết lần này mình sẽ giới thiệu cho bạn về một framework phổ biến hỗ trợ tối đa và tối ưu hóa cho bạn trong qúa trình phát triển ứng dụng SSR, đó là Nextjs.

Khái niệm về Nextjs.

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.

Ngoài ra, sử dụng SSR cũng mang lại cho bạn lợi thế về SEO, giúp trang web của bạn hiển thị cao hơn trên các trang kết quả của công cụ tìm kiếm. SSR làm cho các trang web xếp hạng tốt hơn cho SEO vì chúng tải nhanh hơn và nhiều nội dung trang web có thể được quét bởi các SEO trackers. Thẻ <head> trong Next.js cũng cho phép bạn chỉnh sửa thẻ <head> của một trang web, điều mà bạn không thể thực hiện trong React. Thẻ <head> là một phần cốt lõi trong metadata của trang web và góp phần vào xếp hạng SEO của trang web.

Tại sao nên sử dụng Nextjs.

Ư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ài đặt.

Next.js hỗ trợ đa nền tảng nên bạn có thể dễ dàng cài đặt nó thông qua npm:

npm install --save next react react-dom

Hoặc với Yarn :

yarn add next react react-dom

Bắt đầu

Tạo tệp package.json với nội dung sau:

{ "scripts": { "dev": "next" }}

Nếu như bạn chạy câu lệnh dưới đây :

npm run dev

thì hệ thống sẽ xuất hiện lỗi về việc không tìm thấy pagesfolder. Đây là thứ duy nhất mà Next.js yêu cầu để chạy. Bạn sẽ phải tạo một thư mục các trang trống và chạy lại lệnh. Sau đó Next.js sẽ khởi động một máy chủ trên localhost: 3000. Nếu như bạn truy cập URL đó ngay bây giờ, bạn sẽ được chào đón bởi một trang 404 thân thiện, với thiết kế sạch đẹp.

Next.js cũng xử lý các loại lỗi khác, chẳng hạn như lỗi 500.

Tạo trang trong Next.js

Trong pages folder tạo một file index.js đơn giản như sau:

export default () => ( <div> <p>Hello World!</p> </div>)

Nếu như bạn truy cập vào locallhost:3000 một lần nữa, component sẽ tự động được render lại.

Tại sao việc này lại đơn giản như vậy ?

Đó là bởi vì Next.js sử dụng cấu trúc pagesdựa trên cấu trúc filesystem. Nói một cách đơn giản và dễ hiểu thì các trang nằm trong một pages folder và URL của các trang sẽ dựa vào tên của các trang đó. Filesystem chính là các trang API.

Tạo thêm một trang khác

Chúng ta sẽ tạo thêm một trang nữa với tên là contact.js và trang contact sẽ nằm trong pages folder:

export default () => ( 
	<div>
    	<p><a href="dong.vu@pirago.work">Contact us!</a> </p>
    </div>
)

Nếu bạn truy cập vào đường dẫn localhost:3000/contact thì trang contact sẽ được hiển thị trên trình duyệt và trang nãy cũng là server-rendered. Với Hot Reloading bạn sẽ không cần phải restart lại npm process để có thể tải trang contact. Next.js sẽ thực hiện điều này cho bạn.

Client Rendering
Server-rendering rất thuận tiện trong việc tải trang đầu tiên. Tuy nhiên một khi nhắc đến việc điều hướng trong trang web thì client-rendering lại chính là chìa khóa quan trọng trong việc tăng tốc tải trang và tăng trải nghiệm người dùng. Thật may là Next.js cũng quan tâm đến vấn đề này, Next.js cung cấp cho người dùng một Link component, bạn có thể sử dụng Link component để xây dựng liên kết. Chúng ta hãy thử liên kết 2 trang mà chúng ta đã tạo ở trên : Đầu tiên chúng ta sẽ thay đổi trong file index.js :

import Link from "next/link";
export default () => ( 
  <div> 
	<p>Hello World!</p> 
	<Link href="/contact"> <a>Contact me!</a> </Link>
  </div>
)

Bây giờ hãy thử quay lại trình duyệt và thử truy cập đến trang Contact. Bạn có thể thấy rằng trang Contact sẽ được tải ngay lập tức mà không cần phải reload lại trình duyệt. Bạn có thể quay lại trang trước một cách bình thường như những trang web khác sử dụng SSR.

Dynamic pages
Một ví dụ điển hình về việc sử dụng Next.js là xây dựng một trang Blog. Đây là một ví dụ tốt vì các Developers đều biết cách thức nó hoạt động và nó rất phù hợp để làm ví dụ đơn giản về cách xử lý Dynamic pages. Dynamic pages là trang không có nội dung cố định mà thay vào đó hiển thị một số dữ liệu dựa trên một số tham số.

Thay đổi trang index.js như sau :

Khi bạn thực hiện thao tác này thì sẽ tạo ra một loạt các bài đăng và sẽ điền thông số truy vấn tiêu đề vào tiêu đề bài đăng:

Css-in-JS

Mặc định thì Next.js hỗ trợ styles-jsx, là một giải pháp cho những ai thích việc style css in Js. Tuy nhiên nếu như bạn thích thì vẫn có thể sử dụng các thư viện bên ngoài hỗ trợ cho việc này, chẳng hạn thư viện Styled Components

Exporting a static site

Các ứng dụng Next.js có thể dễ dàng được xuất dưới dạng một trang web tĩnh. Sau đó, trang web tĩnh này có thể được triển khai trên một trong những máy chủ lưu trữ trang web tĩnh như Netlify hoặc Firebase Hosting, mà không cần thiết lập môi trường Node.

Quy trình này yêu cầu bạn khai báo các URL tạo nên trang web, nhưng đừng lo lắng vì đây chỉ là một quy trình rất đơn giản mà bất kỳ Developer nào cũng có thể dễ dàng thực hiện.

Deploying

Thật dễ dàng để tạo một production-ready mà không cần đến soure maps hoặc các công cụ phát triển khác không cần thiết cho sản phẩm cuối cùng. Ở phần trên chúng ta đã tạo một file package.json

{ "scripts": { "dev": "next" }}

Đây là đoạn script dùng để start ứng dụng next.js bằng cách sử dụng câu lệnh npm run dev Và bây giờ chúng ta cần thêm đoạn script dưới đây vào trong file package.json

{ "scripts": { "dev": "next", "build": "next build", "start": "next start"
}

và chuẩn bị ứng dụng của bạn bằng cách chạy npm run build và npm run start.

KẾT LUẬN

Đến đây thì bài viết của mình cũng khá là dài rồi, không thể trong một bài viết có thể nói hết được những tính năng tuyệt vời của Next.js , nên mình sẽ dừng tại đây. Các bạn có thể tìm hiểu thêm về Next.js tại trang chủ của Next.js