Next.js là một framework web cho React, được phát triển bởi Vercel (trước đây là Zeit). Next.js giúp cho việc xây dựng các ứng dụng web React đơn giản hơn và nhanh hơn, đồng thời cung cấp nhiều tính năng tiên tiến như Server-Side Rendering (SSR), Static Site Generation (SSG), code splitting và hot reloading.
Và next.js cung cấp một cấu trúc dự án đơn giản và dễ hiểu, giúp cho các nhà phát triển có thể tập trung vào việc xây dựng các tính năng chính của ứng dụng mà không phải lo lắng về việc cấu hình và triển khai. Ngoài ra, Next.js cũng hỗ trợ nhiều thư viện và công nghệ phổ biến trong cộng đồng React, như Redux, TypeScript, styled-components và nhiều hơn nữa.
Với các tính năng và lợi ích mà nó mang lại, Next.js đã trở thành một lựa chọn phổ biến cho các ứng dụng web React của các công ty lớn và nhỏ trên toàn thế giới.
Giới thiệu về server side rendering trong Next Js
Và Next.js là một framework ReactJS được xây dựng trên nền tảng Node.js, cung cấp cho các nhà phát triển một cách tiếp cận đơn giản để phát triển ứng dụng web và đi kèm với đó là Server-Side Rendering (SSR) – một tính năng quan trọng cho trải nghiệm người dùng trên trang web.
Server-Side Rendering là quá trình tạo ra HTML từ phía máy chủ, sau đó trả về cho trình duyệt của người dùng. SSR có thể giúp tăng tốc độ tải trang web và cải thiện SEO vì các công cụ tìm kiếm có thể hiểu và đánh giá nội dung của trang web dựa trên HTML được render ở phía máy chủ.
Với Next.js, SSR được tích hợp sẵn và dễ dàng sử dụng. Bằng cách sử dụng SSR trong Next.js, trang web của bạn sẽ được tải nhanh hơn và cải thiện trải nghiệm người dùng. Ngoài ra, SSR cũng giúp cho việc phát triển ứng dụng web trở nên dễ dàng hơn bằng cách loại bỏ việc phải quản lý các trạng thái trên máy khách.
Ví dụ server side rendering trong Next Js
Giả sử bạn đang phát triển một trang web tĩnh với ReactJS và Next.js, và có một số dữ liệu cần được lấy từ cơ sở dữ liệu của bạn để render trang web. Nếu bạn chỉ sử dụng phương pháp Client-Side Rendering (CSR), các yêu cầu AJAX sẽ được gửi từ trình duyệt của người dùng đến máy chủ của bạn để lấy dữ liệu và render trang web.
Dưới đây là một ví dụ đơn giản về cách sử dụng Server-Side Rendering trong Next.js để lấy dữ liệu từ cơ sở dữ liệu và render trang web:
// pages/index.js
import React from 'react';
import fetch from 'isomorphic-unfetch';
const Index = ({ data }) => (
<div>
<h1><span class="ez-toc-section" id="Hello_SSR"></span>Hello, SSR!<span class="ez-toc-section-end"></span></h1>
<p>{data.text}</p>
</div>
);
Index.getInitialProps = <a href="https://nodemy.vn/di-sau-vao-async-await-trong-javascript-huong-dan-tu-co-ban-den-nang-cao-don-gian-de-hieu-danh-cho-nguoi-moi-bat-dau-important/">async</a> () => {
const res = await fetch('https://example.com/api/data');
const <a href="https://nodemy.vn/thao-tac-voi-json-trong-javascript-don-gian-de-hieu-cho-nguoi-moi-bat-dau-biet-den-va-tim-hieu-json-trong-javascript-important/">json</a> = await res.json();
return { data: json };
};
export default Index;
Trong đoạn mã trên, hàm getInitialProps sẽ được gọi trước khi trang web được render. Hàm này sẽ lấy dữ liệu từ API (https://example.com/api/data) bằng cách sử dụng isomorphic-unfetch và trả về kết quả là một đối tượng JSON.
Trong đoạn mã trên, hàm getInitialProps sẽ được gọi trước khi trang web được render. Hàm này sẽ lấy dữ liệu từ API (https://example.com/api/data) bằng cách sử dụng isomorphic-unfetch và trả về kết quả là một đối tượng JSON.
Kết luận và bài viết có liên quan
Bài viết có liên quan: Hướng dẫn sử dụng Router trong Next.js cho các ứng dụng web tốt nhất Next Js là gì? và Next Js có phải React Js? ( cái nào quan trọng hơn ) Nên chọn JavaScript hay TypeScript khi phát triển ứng dụng React JS
