Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> Redis

Xây dựng bộ đếm lượt xem thời gian thực với các thành phần máy chủ React

Trong hướng dẫn này, chúng ta sẽ hiểu các Thành phần máy chủ React và với kiến thức đó, hãy cùng nhau xây dựng một bộ đếm lượt xem đơn giản cho ứng dụng của bạn. Vui lòng chuyển sang Thiết lập dự án nếu bạn muốn tiếp tục triển khai.

Tìm hiểu các thành phần của máy chủ React

Để hiểu cách các Thành phần máy chủ React hoạt động, chúng ta sẽ xem xét ngắn gọn về Kết xuất phía máy khách (CSR) và Kết xuất phía máy chủ (SSR).

Kết xuất phía máy khách (CSR)

Trong CSR, hầu hết công việc kết xuất diễn ra trong trình duyệt ở phía máy khách:

  1. Người dùng yêu cầu một trang web.
  2. Máy chủ gửi tệp HTML và liên kết tới tệp CSS và JS.
  3. Khách hàng tải xuống tài nguyên JS.
  4. Ứng dụng khách hiển thị trang không có nội dung.
  5. Máy khách tìm nạp dữ liệu từ API trong Máy chủ.
  6. Ứng dụng hiển thị lại trang có nội dung.

Xây dựng bộ đếm lượt xem thời gian thực với các thành phần máy chủ React

Kết xuất phía máy chủ (SSR)

Trong SSR, máy chủ tạo nội dung HTML đầy đủ cho từng yêu cầu và gửi nó đến máy khách:

  1. Người dùng yêu cầu một trang web.
  2. Máy chủ hiển thị các tệp HTML thực tế nhưng chúng chưa mang tính tương tác.
  3. Khách hàng tải xuống tài nguyên JS.
  4. Trong Máy khách, sử dụng hydrateRoot() chức năng, trình xử lý sự kiện, trạng thái và khả năng tương tác khác của các thành phần React được gắn vào các phần tử DOM hiện có do Máy chủ tạo ra, điều này được gọi là hydrat hóa .
  5. Máy khách tìm nạp dữ liệu từ API trong Máy chủ.
  6. Ứng dụng hiển thị lại trang có nội dung.

Xây dựng bộ đếm lượt xem thời gian thực với các thành phần máy chủ React

Lợi ích của SSR

  • SEO tốt hơn :Vì trình thu thập thông tin của công cụ tìm kiếm có thể đọc HTML được hiển thị đầy đủ nên SSR thân thiện với SEO hơn.
  • Tải lần đầu nhanh hơn :Vì nội dung HTML hoàn chỉnh được hiển thị và gửi từ máy chủ nên người dùng sẽ xem được nội dung của trang một cách nhanh chóng.

Nhược điểm của SSR

  • Điều hướng chậm hơn :Mỗi yêu cầu trang mới yêu cầu liên lạc hai chiều để tải lại toàn bộ HTML từ máy chủ.
  • Tăng tải máy chủ :Vì máy chủ thực hiện hầu hết công việc hiển thị trang nên có thể cần nhiều tài nguyên hơn để xử lý nhiều yêu cầu.

Thành phần máy chủ phản ứng

RSC là một tính năng trong React cho phép các thành phần được hiển thị hoàn toàn trên máy chủ:

  1. Máy chủ tìm nạp dữ liệu.
  2. Máy chủ hiển thị ứng dụng có nội dung.
  3. Khách hàng tải xuống tài nguyên JS.
  4. Quá trình hydrat hóa xảy ra trong Máy khách.

Lưu ý: Các thành phần máy chủ được hiển thị hoàn toàn trên máy chủ, chúng không được bao gồm trong gói JS và chúng không được hydrat hóa. Vì vậy, bước 3 và 4 xảy ra đối với các thành phần Máy khách.

Xây dựng bộ đếm lượt xem thời gian thực với các thành phần máy chủ React

Ưu điểm của RSC

  • Xử lý dữ liệu hiệu quả: Việc tìm nạp dữ liệu được chuyển đến máy chủ, gần cơ sở dữ liệu của bạn hơn. Điều này cải thiện hiệu suất bằng cách loại bỏ chuyến đi khứ hồi Máy khách-Máy chủ.
  • Giảm kích thước JavaScript trên máy khách :Vì các Thành phần máy chủ React không gửi bất kỳ JavaScript nào đến máy khách nên kích thước gói tổng thể sẽ giảm, cải thiện hiệu suất.
  • Tải trang ban đầu nhanh hơn :Các thành phần kết xuất trước trên máy chủ có nghĩa là máy khách nhận được HTML được hiển thị đầy đủ nhanh hơn, cải thiện thời gian cho Lần hiển thị nội dung đầu tiên (FCP).
  • SEO được cải thiện :Nội dung được hiển thị đầy đủ phía máy chủ, giúp công cụ tìm kiếm thu thập dữ liệu và lập chỉ mục nội dung dễ dàng hơn.

Những thách thức của RSC

  • Trạng thái và Vòng đời :Các thành phần máy chủ React không có quyền truy cập vào API trình duyệt (như useState , useEffect ), vì chúng được hiển thị trên máy chủ.
  • Không có tương tác phía khách hàng :Các thành phần máy chủ React không dành cho cập nhật động hoặc tương tác. Bạn cần sử dụng Thành phần ứng dụng khách cho các phần tương tác trong ứng dụng của mình.

Sử dụng các thành phần máy chủ React

Thành phần máy chủ React trong Next.js

Theo mặc định, Next.js sử dụng Cấu phần máy chủ. Chúng được hiển thị theo 3 cách khác nhau:

  • Hiển thị tĩnh (Mặc định): tuyến đường được hiển thị vào lúc thời gian xây dựng hoặc ở chế độ nền sau khi xác thực lại dữ liệu.
  • Hiển thị động: các tuyến đường được hiển thị cho mỗi người dùng vào lúc thời điểm yêu cầu .
  • Truyền trực tuyến: Giao diện người dùng được hiển thị dần dần từ máy chủ.

Khi nào bạn nên sử dụng Thành phần máy chủ React ?

Bạn nên sử dụng Thành phần máy chủ React khi :

  • Bạn có nội dung tĩnh, không tương tác và không thay đổi thường xuyên.
  • Bạn muốn cải thiện hiệu suất bằng cách giảm lượng JavaScript gửi tới máy khách.
  • SEO rất quan trọng đối với ứng dụng của bạn.
  • Bạn muốn giảm tải các tác vụ tính toán hoặc tìm nạp dữ liệu nặng nề cho máy chủ.

Bạn không nên phản ứng với các thành phần máy chủ khi :

  • Các thành phần của bạn yêu cầu tính tương tác, trạng thái hoặc hook phía máy khách.
  • Bạn cần quyền truy cập vào API trình duyệt hoặc yêu cầu cập nhật theo thời gian thực.
  • Bạn đang xây dựng các trang phức tạp có tính logic phía máy khách hoặc nội dung dành riêng cho người dùng.

Những cạm bẫy thường gặp

Thành phần Máy khách không được hiển thị hoàn toàn trên Máy khách

Chúng được hiển thị cả trên Máy khách và Máy chủ. Chúng được đặt tên là Thành phần máy khách để phân biệt với Thành phần máy chủ.

‘use server’ chỉ thị dành cho Hành động của máy chủ

Theo mặc định, Next.js sử dụng Cấu phần máy chủ nên bạn không cần chỉ định bất cứ điều gì. Nếu bạn muốn sử dụng Thành phần máy khách, bạn thêm ‘use client’ chỉ thị để khai báo ranh giới giữa các mô-đun Máy chủ và Máy khách. ‘use server’ là một lệnh hoàn toàn khác được sử dụng cho Hành động máy chủ , nằm ngoài phạm vi của bài đăng trên blog này.

Thiết lập dự án

Chúng tôi sẽ sử dụng mẫu Blog từ Vercel:

pnpm create next-app --example https://github.com/vercel/examples/tree/main/solutions/blog blog

Bạn có thể chạy ví dụ cục bộ và xem nó trông như thế nào:

cd blog
pnpm dev

Hãy cài đặt @upstash/redis :

pnpm add @upstash/redis

Thiết lập môi trường

  1. Truy cập Bảng điều khiển Upstash → Redis và tạo Cơ sở dữ liệu mới:

Xây dựng bộ đếm lượt xem thời gian thực với các thành phần máy chủ React

  1. Cuộn xuống phần REST API, chuyển sang .env và sao chép các biến môi trường cho bước tiếp theo:

Xây dựng bộ đếm lượt xem thời gian thực với các thành phần máy chủ React

  1. Tạo một .env tập tin và dán các biến môi trường của bạn:
UPSTASH_REDIS_REST_URL=<YOUR_URL>
UPSTASH_REDIS_REST_TOKEN=<YOUR_TOKEN>

Thành phần chế độ xem thiết lập

Tạo /app/components/views.tsx :

import { headers } from 'next/headers'
import { Redis } from "@upstash/redis"
 
const redis = Redis.fromEnv();
 
async function view(slug: string, ip: string) {
 // Hash the IP address to anonymize it
 const buf = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(ip));
 const hash = Array.from(new Uint8Array(buf)).map((b) => b.toString(16).padStart(2, "0")).join("");
 // Deduplicate views
 const newView = await redis.set(`deduplicate:${hash}:${slug}`, true, {
 nx: true, // Only set the key if it doesn't exist
 ex: 24 * 60 * 60, // Expire the key after 24 hours
 });
 if (newView) {
 await redis.incr(`pageviews:${slug}`); // Increment the view count
 }
}
 
export default async function Views({ slug }: { slug: string }) {
 // Get the IP address of the user
 const header = headers()
 const ip = (header.get('x-forwarded-for') ?? '127.0.0.1').split(',')[0]
 // Increment the view count
 await view(slug, ip)
 // Get the view count
 const views = await redis.get<number>(`pageviews:${slug}`) || 0
 return (
 <p className="text-sm text-neutral-600 dark:text-neutral-400">
 {views} views
 </p>
 )
}

Nhập và hiển thị thành phần chế độ xem

Chỉnh sửa /app/blog/[slug]/page.tsx :

...
import Views from 'app/components/views'
...
 <div className="flex justify-between items-center mt-2 mb-8 text-sm">
 <p className="text-sm text-neutral-600 dark:text-neutral-400">
 {formatDate(post.metadata.publishedAt)}
 </p>
 <Views slug={post.slug} />
 </div>
...

Truy cập http://localhost:3000/blog/vim để xem hoạt động của bộ đếm lượt xem:

Xây dựng bộ đếm lượt xem thời gian thực với các thành phần máy chủ React

So sánh với thiết lập thành phần máy khách

Hãy xem bài đăng trên blog của chúng tôi "Thêm bộ đếm lượt xem vào blog Next.js của bạn" để xem cách triển khai với Thành phần ứng dụng khách.

Cùng với các lợi ích khác được đề cập ở các phần trước, việc sử dụng React Server Components:

  • Đã loại bỏ sự cần thiết của một API riêng biệt.
  • Cung cấp chế độ xem thống nhất đơn giản về thành phần và logic của nó cùng với các lợi ích của việc kiểm tra loại.

Triển khai

Bạn có thể triển khai trang web của mình lên Vercel bằng lệnh sau:

vercel

Lời cuối cùng

Bằng cách kết hợp các điểm mạnh của cả Thành phần Máy chủ và Máy khách, bạn có thể đạt được sự cân bằng phù hợp giữa hiệu suất và tính tương tác trong ứng dụng của mình. Tôi hy vọng hướng dẫn này giúp bạn đưa ra quyết định sáng suốt về thời điểm tận dụng hiệu quả các Thành phần máy chủ React.