Cách lấy dữ liệu động trong ứng dụng Next.js với các tuyến API

Hướng dẫn này cho biết cách sử dụng API bộ định tuyến của Next.js để lấy dữ liệu động trong các ứng dụng của bạn. Nhận dữ liệu trong ứng dụng yêu cầu xác thực hoặc ủy quyền với Next.js.

Dữ liệu là một trong những thứ quan trọng nhất tạo nên một ứng dụng web hoặc một ứng dụng gốc thông thường. Chúng ta cần dữ liệu để có thể nhìn thấy và có lẽ hiểu được mục đích của một ứng dụng. Trong bài viết này, chúng ta sẽ xem xét một cách tiếp cận khác để lấy dữ liệu trong một ứng dụng yêu cầu xác thực hoặc ủy quyền bằng Next.js.

Next.js có năm loại mẫu tìm nạp dữ liệu để xác định cách bạn muốn nội dung được nhìn thấy trong ứng dụng của mình: tạo trang web tĩnh (SSG), hiển thị phía máy chủ (SSR), hiển thị phía máy khách (CSR), tĩnh gia tăng tái tạo (ISR) và định tuyến động.

Bạn có thể chọn bất kỳ mẫu nào trong số các mẫu này phù hợp với cấu trúc ứng dụng của mình. Để tìm hiểu thêm về các mẫu này, hãy đọc về chúng trong tài liệu chính thức .

Bài viết này tập trung vào việc tạo trang web tĩnh và định tuyến động. Việc sử dụng các mẫu này yêu cầu sử dụng các phương pháp tìm nạp dữ liệu getStaticPropsvà . getStaticPathsCác phương pháp này đóng vai trò duy nhất trong việc thu thập dữ liệu.

Chúng ta đã nói về dữ liệu động trong một thời gian. Hãy hiểu điều đó thực sự có nghĩa là gì.

Giả sử chúng tôi có danh sách người dùng trong một ứng dụng đang được hiển thị trên trang web và chúng tôi muốn nhận thông tin duy nhất cho người dùng khi chúng tôi nhấp vào tên của họ - thông tin chúng tôi nhận được sẽ thay đổi theo hành động chúng tôi thực hiện (nhấp vào tên người dùng).

Chúng tôi muốn một cách hiển thị dữ liệu đó trên một trang (hoặc màn hình) duy nhất trong ứng dụng và getStaticPathsphương pháp tìm nạp dữ liệu cho phép chúng tôi lấy dữ liệu duy nhất cho người dùng. Điều này thường phổ biến trong một mảng các đối tượng người dùng với một khóa ( idhoặc _id) duy nhất, tùy thuộc vào cách đối tượng phản hồi được cấu trúc.

export async function getStaticPaths() {
  return {
    paths: {
      [{
        params: {
          uniqueId: id.toString()
        }
      }],
      fallback: false
    }
  }
}

Khóa duy nhất thu được từ getStaticPathsphương thức (thường được gọi là tham số, viết tắt là params) được truyền dưới dạng đối số thông qua contexttham số trong getStaticProps.

Điều này đưa chúng ta trở lại thực tế là getStaticPathskhông thể làm việc mà không có getStaticProps. Cả hai đều hoạt động cùng nhau, bởi vì bạn sẽ cần chuyển giá trị duy nhất idtừ đường dẫn được tạo tĩnh làm đối số cho contexttham số trong getStaticProps. Đoạn mã dưới đây minh họa điều này:

export async function getStaticProps(context) {
  return {
    props: {
      userData: data,
    },
  }
}

Nhược điểm của việc sử dụng các phương pháp tìm nạp dữ liệu gốc của Next.Js

Bây giờ chúng ta đã hiểu một chút về tìm nạp dữ liệu động trong Next.js, hãy xem xét nhược điểm của việc sử dụng hai phương pháp tìm nạp dữ liệu nói trên.

Lấy dữ liệu từ một API công khai không yêu cầu ủy quyền với một số loại khóa API trong quá trình tìm nạp dữ liệu có thể được thực hiện với getStaticPropsvà getStaticPaths.

Hãy xem cả hai trong số chúng dưới đây:

// getStaticPaths
export async function getStaticPaths() {
  const response = fetch("https://jsonplaceholder.typicode.com/users")
  const userData = await response.json()

 // Getting the unique key of the user from the response
 // with the map method of JavaScript.
  const uniqueId = userData.map((data) => {
    return data.id
  })

  return {
    paths: {
      [{
        params: {
          uniqueId: uniqueId.toString()
        }
      }],
      fallback: false
    }
  }
}

Bạn sẽ nhận thấy rằng giá trị duy nhất idnhận được từ mapphương thức JavaScript và chúng tôi sẽ gán nó dưới dạng giá trị thông qua contexttham số của getStaticProps.

export async function getStaticProps(context) {
  // Obtain the user’s unique ID.
  const userId = context.params.uniqueId

  // Append the ID as a parameter to the API endpoint.
  const response = fetch(`https://jsonplaceholder.typicode.com/users/${userId}`)
  const userData = await response.json()
  return {
    props: {
      userData,
    },
  }
}

Trong đoạn mã trên, bạn sẽ thấy rằng một biến có tên userIdđã được khởi tạo và giá trị của nó được nhận từ contexttham số.

Giá trị đó sau đó được thêm vào làm tham số cho URL cơ sở của API.

Lưu ý: Chỉ có thể xuất các phương thức getStaticPropsvà phương thức tìm nạp dữ liệu từ một tệp trong thư mục Next.js.getStaticPathspages

Điều đó làm được khá nhiều điều đó đối với một API công khai. Nhưng khi bạn đang xây dựng một ứng dụng yêu cầu người dùng đăng nhập, đăng xuất và có thể thực hiện một số tìm nạp dữ liệu trong ứng dụng khi họ đăng nhập bằng tài khoản của mình, luồng ứng dụng sẽ khác.

Tìm nạp dữ liệu trong hệ thống đã xác thực.

Quy trình lấy dữ liệu trong một hệ thống đã xác thực hoàn toàn khác với cách thông thường mà chúng tôi lấy dữ liệu từ API công khai.

Hình dung tình huống này: Một người dùng đăng nhập vào một ứng dụng web và sau đó truy cập hồ sơ của họ. Trên trang hồ sơ của họ (khi nó được hiển thị), họ có thể xem và thay đổi thông tin mà họ đã cung cấp khi đăng ký.

Để điều này xảy ra, phải có một số loại xác minh dữ liệu đang được gửi đến người dùng bởi nhà phát triển đã xây dựng giao diện. May mắn thay, có một mẫu phổ biến để cấp quyền cho người dùng khi họ đăng nhập vào hệ thống: Mã thông báo web JSON (JWT).

Khi người dùng đăng ký sử dụng ứng dụng của bạn lần đầu tiên, thông tin chi tiết của họ được lưu trữ trong cơ sở dữ liệu và JWT duy nhất được chỉ định cho lược đồ của người dùng đó (tùy thuộc vào cách thiết kế API back-end).

Khi người dùng cố gắng đăng nhập vào ứng dụng của bạn và thông tin đăng nhập của họ khớp với những gì họ đã đăng ký ban đầu, điều tiếp theo mà các kỹ sư front-end chúng tôi phải làm là cung cấp trạng thái xác thực cho người dùng để chúng tôi có thể có được các chi tiết cần thiết, một trong số đó là JWT.

Có nhiều trường phái suy nghĩ khác nhau về cách bảo vệ người dùng auth-state, bao gồm sử dụng Redux, Composition trong React và API ngữ cảnh của React (tôi khuyên bạn nên sử dụng API ngữ cảnh). Bài báo của Átila Fassina đề cập đến các mô hình quản lý nhà nước trong Next.js.

Cách tiếp cận phổ biến là lưu trữ JWT localStorage- ít nhất là để bắt đầu, nếu chúng tôi đang xem xét vấn đề bảo mật một cách nghiêm ngặt. Nên lưu trữ JWT của bạn trong một httpOnlycookie để ngăn chặn các cuộc tấn công bảo mật như giả mạo yêu cầu trên nhiều trang web (CSRF) và tập lệnh giữa các trang web (XSS).

Một lần nữa, cách tiếp cận này chỉ có thể thực hiện được nếu phần mềm trung gian cookie thích hợp được cung cấp trong API mà các kỹ sư back-end đã xây dựng.

Nếu bạn không muốn phải tìm hiểu cách các kỹ sư back-end đã thiết kế API, thì một cách thay thế để xác thực trong Next.js là sử dụng dự án xác thực nguồn mở NextAuth.js.

Khi mã thông báo ở localStoragephía máy khách, các lệnh gọi API yêu cầu mã thông báo người dùng làm phương tiện ủy quyền có thể được thực hiện mà không gặp lỗi 501 (trái phép).

headers: {
  "x-auth-token": localStorage.getItem("token")
}

Tìm nạp dữ liệu bằng `useRouter`móc

Trong phần đầu tiên, chúng ta đã biết quá trình tìm nạp dữ liệu động hoạt động như thế nào trong Next.js đối với một ứng dụng không yêu cầu xác thực.

Trong phần này, chúng ta sẽ xem xét cách bỏ qua vấn đề của các phương thức tìm nạp dữ liệu getStaticPropsvà getStaticPathsném dấu referenceError(“ localStoragelà không xác định”) khi chúng tôi cố gắng lấy mã thông báo của người dùng localStorage.

Lỗi này xảy ra do hai phương pháp tìm nạp dữ liệu luôn chạy trên máy chủ ở chế độ nền, do đó làm cho localStorageđối tượng không khả dụng với chúng, vì nó ở phía máy khách (trong trình duyệt).

API bộ định tuyến của Next.js tạo ra nhiều khả năng khi chúng tôi xử lý các tuyến và dữ liệu động. Với useRouterhook, chúng ta có thể lấy dữ liệu duy nhất cho người dùng dựa trên ID duy nhất của họ.

Hãy xem đoạn mã dưới đây để bắt đầu:

// pages/index.js

import React from "react";
import axios from "axios";
import { userEndpoints } from "../../../routes/endpoints";
import Link from "next/link";

const Users = () => {
  const [data, setData] = React.useState([])
  const [loading, setLoading] = React.useState(false)

  const getAllUsers = async () => {
    try {
      setLoading(true);
      const response = await axios({
        method: "GET",
        url: userEndpoints.getUsers,
        headers: {
          "x-auth-token": localStorage.getItem("token"),
          "Content-Type": "application/json",
        },
      });
      const { data } = response.data;
      setData(data);
    } catch (error) {
      setLoading(false);
      console.log(error);
    }
  };

  return (
    <React.Fragment>
      <p>Users list</p>
      {data.map((user) => {
          return (
            <Link href={`/${user._id}`} key={user._id}>
              <div className="user">
                <p className="fullname">{user.name}</p>
                <p className="position">{user.role}</p>
              </div>  
            </Link>
          );
        })}
    </React.Fragment>
  );
};

export default Users;

Trong đoạn mã trên, chúng tôi đã sử dụng useEffecthook để lấy dữ liệu khi trang được hiển thị lần đầu tiên. Bạn cũng sẽ nhận thấy rằng JWT được gán cho x-auth-tokenkhóa trong tiêu đề yêu cầu.

Khi chúng tôi nhấp vào một người dùng, Linkthành phần sẽ chuyển chúng tôi đến một trang mới dựa trên ID duy nhất của người dùng. Khi chúng tôi ở trên trang đó, chúng tôi muốn hiển thị thông tin dành riêng cho người dùng đó với id.

Cái useRoutermóc cung cấp cho chúng tôi quyền truy cập vào pathnametrong tab URL của trình duyệt. Với điều đó tại chỗ, chúng tôi có thể nhận được tham số truy vấn của tuyến đường duy nhất đó, là id.

Đoạn mã dưới đây minh họa toàn bộ quá trình:

// [id].js

import React from "react";
import Head from "next/head";
import axios from "axios";
import { userEndpoints } from "../../../routes/endpoints";
import { useRouter } from "next/router";

const UniqueUser = () => {
  const [user, setUser] = React.useState({
    fullName: "",
    email: "",
    role: "",
  });
  const [loading, setLoading] = React.useState(false);
  const { query } = useRouter();

  // Obtaining the user’s unique ID with Next.js'
  // useRouter hook.
  const currentUserId = query.id;

  const getUniqueUser = async () => {
    try {
      setLoading(true);
      const response = await axios({
        method: "GET",
        url: `${userEndpoints.getUsers}/${currentUserId}`,
        headers: {
          "Content-Type": "application/json",
          "x-auth-token": localStorage.getItem("token"),
        },
      });
      const { data } = response.data;
      setUser(data);
    } catch (error) {
      setLoading(false);
      console.log(error);
    }
  };

  React.useEffect(() => {
    getUniqueUser();
  }, []);

  return (
    <React.Fragment>
      <Head>
        <title>
          {`${user.fullName}'s Profile | "Profile" `}
        </title>
      </Head>
        <div>
          <div className="user-info">
            <div className="user-details">
              <p className="fullname">{user.fullName}</p>
              <p className="role">{user.role}</p>
              <p className="email">{user.email}</p>
            </div>
          </div>
        </div>
      )}
    </React.Fragment>
  );
};
export default UniqueUser;

Trong đoạn mã trên, bạn sẽ thấy rằng chúng tôi đã hủy đối tượng truy vấn khỏi useRouterhook, đối tượng mà chúng tôi sẽ sử dụng để lấy ID duy nhất của người dùng và chuyển nó làm đối số cho điểm cuối API.

const {query} = useRouter()
const userId = query.id

Khi ID duy nhất được thêm vào điểm cuối API, dữ liệu dành cho người dùng đó sẽ được hiển thị sau khi trang được tải.

Sự kết luận

Tìm nạp dữ liệu trong Next.js có thể trở nên phức tạp nếu bạn không hiểu đầy đủ về trường hợp sử dụng của ứng dụng của mình.

Tôi hy vọng bài viết này đã giúp bạn hiểu cách sử dụng API bộ định tuyến của Next.js để lấy dữ liệu động trong các ứng dụng của bạn.

Nguồn bài viết gốc tại https://www.smashingmagazine.com

#nextjs #api #database

What is GEEK

Buddha Community

Cách lấy dữ liệu động trong ứng dụng Next.js với các tuyến API

Duong Tran

1660891501