Bạn có thể đã nghe rất nhiều lời thổi phồng xung quanh một trong những đứa trẻ mới nhất trong khối khuôn khổ, Remix. Có thể đáng ngạc nhiên khi nó bắt đầu trở lại vào năm 2019, nhưng ban đầu nó chỉ có sẵn dưới dạng khung trả phí dựa trên đăng ký. Vào năm 2021, những người sáng lập đã gây quỹ hạt giống và mở nguồn khuôn khổ để cho phép người dùng bắt đầu sử dụng Remix miễn phí. Lũ lụt mở ra và mọi người dường như đang nói về nó, tốt hay xấu. Hãy đi sâu vào và xem xét một số khái niệm cơ bản về Remix.
Remix là một khung công tác JavaScript đầu tiên "cạnh" trên máy chủ. Nó sử dụng React, ít nhất là bây giờ, dành cho giao diện người dùng và ưu tiên hiển thị ứng dụng phía máy chủ trên rìa. Các nền tảng có thể lấy mã phía máy chủ và chạy nó như các chức năng không có máy chủ hoặc cạnh làm cho nó rẻ hơn một máy chủ truyền thống và đưa nó đến gần hơn với người dùng của bạn. Những người sáng lập The Remix muốn gọi nó là khuôn khổ “ngăn xếp trung tâm” vì nó điều chỉnh các yêu cầu và phản hồi được thực hiện giữa máy chủ và máy khách cho nền tảng mà nó đang được chạy.
Triển khai Remix
Vì Remix yêu cầu một máy chủ, hãy nói về cách bạn có thể triển khai nó. Remix không tự cung cấp máy chủ - bạn mang theo máy chủ - cho phép nó chạy trong bất kỳ Node.js or Deno môi trường, bao gồm Cạnh Netlify và Nền tảng ứng dụng của DigitalOcean. Bản phối lại là một trình biên dịch, một chương trình dịch các yêu cầu cho nền tảng mà nó đang chạy. Quá trình này sử dụng xây dựng để tạo trình xử lý cho các yêu cầu tới máy chủ. Các trình xử lý HTTP mà nó sử dụng được xây dựng trên API tìm nạp web và được chạy trên máy chủ bởi thích nghi chúng cho nền tảng mà chúng sẽ được triển khai.
Phối lại ngăn xếp
Ngăn xếp phối lại là các dự án có một số công cụ phổ biến được định cấu hình sẵn cho bạn. Có ba ngăn xếp chính thức được duy trì bởi nhóm Remix và tất cả chúng đều được đặt tên theo thể loại âm nhạc. Ngoài ra còn có một số ngăn xếp Remix cộng đồng bao gồm ngăn xếp K-Pop được tạo bởi Nhóm Mẫu tại Netlify. Ngăn xếp này là một cường quốc và bao gồm một Siêu dữ liệu cơ sở dữ liệu và xác thực, Gió cùng chiều để tạo kiểu, Cây trắc bá thử nghiệm end-to-end, Đẹp hơn định dạng mã, Tiếng Anh linting, và TypeScript gõ tĩnh. Hãy xem bài đăng của Tara Manicsic về việc triển khai K-Pop Stack.
Các tuyến đường đi vào bộ nhớ đệm
Mặc dù Remix yêu cầu một máy chủ, nó vẫn có thể tận dụng lợi thế của đống mứt lợi ích bằng cách lưu vào bộ nhớ đệm các tuyến đường. Trang web tĩnh hoặc tạo trang web tĩnh (SSG) là khi tất cả nội dung của bạn được hiển thị tại thời điểm xây dựng và vẫn ở tĩnh cho đến khi xây dựng lại khác. Nội dung được tạo trước và có thể được đưa vào CDN. Điều này mang lại nhiều lợi ích và tải trang web nhanh chóng cho người dùng cuối. Tuy nhiên, Remix không làm SSG điển hình như các framework React phổ biến khác, bao gồm Next.js và Gatsby. Để nhận được một số lợi ích của SSG, bạn có thể sử dụng Tiêu đề HTTP kiểm soát bộ nhớ cache trong một bản phối lại chức năng tiêu đề để lưu vào bộ nhớ cache một tuyến đường cụ thể hoặc trực tiếp trong root.tsx tập tin.
[[headers]]
for = "/build/*"
[headers.values]
"Cache-Control" = "public, max-age=31536000, s-maxage=31536000"Sau đó, thêm vào của bạn chức năng tiêu đề bạn muốn nó ở đâu. Điều này lưu trữ trong một giờ:
export function headers() {
return {
"Cache-Control": "public, s-maxage=360",
};
};Định tuyến phối lại
Rất nhiều khuôn khổ đã dựa vào định tuyến dựa trên hệ thống tệp. Đây là một kỹ thuật trong đó một thư mục được chỉ định được sử dụng để xác định các tuyến đường cho ứng dụng của bạn. Chúng thường có cú pháp đặc biệt để khai báo các tuyến và điểm cuối động. Sự khác biệt lớn nhất hiện tại giữa Remix và các framework phổ biến khác là khả năng sử dụng định tuyến lồng nhau.
Mọi ứng dụng Remix đều bắt đầu với root.tsx tập tin. Đây là nơi toàn bộ cơ sở của ứng dụng được hiển thị. Bạn sẽ tìm thấy một số bố cục HTML phổ biến ở đây như <html> thẻ, <head> và sau đó là <body> với các thành phần cần thiết để hiển thị ứng dụng. Một điều cần chỉ ra ở đây là <Scripts> thành phần là những gì kích hoạt JavaScript trên trang web; một số thứ sẽ hoạt động nếu không có nó, nhưng không phải tất cả mọi thứ. Các root.tsx tệp hoạt động như một bố cục mẹ cho mọi thứ bên trong routes thư mục, mọi thứ trong các tuyến đường được hiển thị ở đó <Outlet/> thành phần trong root.tsx. Đây là cơ sở của định tuyến lồng nhau trong Remix.
Định tuyến lồng nhau
Remix không chỉ được thành lập bởi một số nhóm từ Bộ định tuyến phản ứng, nó cũng sử dụng Bộ định tuyến phản ứng. Trên thực tế, chúng mang một số điều tốt về Remix trở lại React Router. Một vấn đề phức tạp mà những người bảo trì Next.js và SvelteKit đang cố gắng giải quyết ngay bây giờ là định tuyến lồng nhau.
Định tuyến lồng nhau không giống như định tuyến truyền thống. Trong đó một tuyến mới sẽ đưa người dùng đến một trang mới, mỗi tuyến lồng nhau là một phần riêng biệt của cùng một trang. Nó cho phép tách các mối quan tâm bằng cách giữ logic nghiệp vụ chỉ liên kết với các tệp cần nó. Phối lại có thể xử lý các lỗi được bản địa hóa cho chỉ phần của trang có tuyến đường lồng nhau. Các tuyến khác trên trang vẫn có thể sử dụng được và tuyến bị hỏng có thể cung cấp ngữ cảnh liên quan đến lỗi mà không bị lỗi toàn bộ trang.
Phối lại thực hiện điều này khi tệp gốc trong app/routes được đặt tên giống như một thư mục tệp sẽ tải bên trong tệp cơ sở. Tệp gốc trở thành một bố trí cho các tệp trong thư mục bằng cách sử dụng <Outlet /> thành phần để cho Remix biết nơi tải các tuyến đường khác.
Thành phần đầu ra
Sản phẩm <Outlet /> Thành phần là một tín hiệu cho Phối lại để biết nơi nó sẽ hiển thị nội dung cho các tuyến lồng nhau. Nó được đặt trong tệp ở thư mục gốc của app/routes thư mục trùng tên với các tuyến đường lồng nhau. Đoạn mã sau đây có dạng app/routes/about.tsx tập tin và bao gồm ổ cắm cho các tập tin bên trong app/routes/about thư mục:
import { Outlet } from "@remix-run/react";
export default function About() {
return (
<>
<section>
I am the parent layout. I will be on any page inside of my named directory.
</section>
{ /* All of my children, the files in the named directory, will go here. */ }
<Outlet />
</>
)
}Cấu trúc thư mục
Bất kỳ tệp nào trong app/routes/ thư mục trở thành một tuyến đường tại URL của tên của nó. Một thư mục cũng có thể được thêm với một index.tsx tập tin.
app/
├── routes/
│ │
│ └── blog
| | ├── index.tsx ## The /blog route
│ └── about.tsx ## The /about route
│ ├── index.tsx ## The / or home route
└── root.tsxNếu một tuyến có cùng tên với một thư mục, tệp được đặt tên sẽ trở thành tệp bố cục cho các tệp bên trong thư mục và tệp bố trí cần Thành phần đầu ra để đặt tuyến đường được lồng vào.
app/
├── routes/
│ │
│ └── about
│ │ ├── index.tsx
│ ├── about.tsx ## this is a layout for /about/index.tsx
│ ├── index.tsx
└── root.tsxBố cục cũng có thể được tạo bằng cách đặt trước chúng bằng một dấu gạch dưới kép (__).
app/
├── routes/
│ │
│ └── about
│ │ ├── index.tsx
│ ├── index.tsx
│ ├── about.tsx
│ ├── __blog.tsx ## this is also a layout
└── root.tsxhttps://your-url.com/about vẫn sẽ kết xuất app/routes/about.tsx nhưng cũng sẽ hiển thị bất cứ thứ gì có trong app/routes/about/index.tsx nơi Thành phần đầu ra là trong sự đánh dấu của app/routes/about.tsx.
Các tuyến đường động
Tuyến động là một tuyến thay đổi dựa trên thông tin trong url. Đó có thể là tên của một bài đăng trên blog hoặc id khách hàng, nhưng bất kể nó là gì $ cú pháp được thêm vào phía trước của tuyến báo hiệu cho Remix rằng nó là động. Cái tên không quan trọng ngoài cái tên $ tiếp đầu ngữ.
app/
├── routes/
│ │
│ └── about
│ │ ├── $id.tsx
│ │ ├── index.tsx
│ ├── about.tsx ## this is a layout for /about/index.tsx
│ ├── index.tsx
└── root.tsxTìm nạp dữ liệu đó!
Vì Remix hiển thị tất cả dữ liệu của nó trên máy chủ, nên bạn không thấy nhiều thứ đã trở thành tiêu chuẩn của một ứng dụng React, như useState() và useEffect() hooks, trong Remix. Ít cần trạng thái phía máy khách hơn vì nó đã được đánh giá trên máy chủ.
Nó cũng không quan trọng loại máy chủ bạn sử dụng để tìm nạp dữ liệu. Vì Remix nằm giữa yêu cầu và phản hồi và dịch nó một cách thích hợp, bạn có thể sử dụng tiêu chuẩn API tìm nạp web. Phối lại thực hiện điều này trong một loader chức năng đó có thể chạy trên máy chủ và sử dụng useLoaderData() hook để hiển thị dữ liệu trong thành phần. Đây là một ví dụ sử dụng Cat dưới dạng API dịch vụ để hiển thị một hình ảnh con mèo ngẫu nhiên.
import { Outlet, useLoaderData } from '@remix-run/react'
export async function loader() {
const response = await fetch('<https://cataas.com/cat?json=true>')
const data = await response.json()
return {
data
}
}
export default function AboutLayout() {
const cat = useLoaderData<typeof loader>()
return (
<>
<img
src={`https://cataas.com/cat/${cat}`}
alt="A random cat."
/>
<Outlet />
</>
)
}Thông số tuyến đường
Trong các tuyến đường động, các tuyến đường có tiền tố là $ cần có thể truy cập tham số URL để xử lý dữ liệu đó sẽ được hiển thị. Các loader chức năng có quyền truy cập vào những thứ này thông qua một params tranh luận.
import { useLoaderData } from '@remix-run/react'
import type { LoaderArgs } from '@remix-run/node'
export async function loader({ params }: LoaderArgs) {
return {
params
}
}
export default function AboutLayout() {
const { params } = useLoaderData<typeof loader>()
return <p>The url parameter is {params.tag}.</p>
}Các chức năng Remix khác
Phối lại có một số chức năng trợ giúp khác bổ sung thêm chức năng cho các phần tử và thuộc tính HTML thông thường trong API mô-đun định tuyến. Mỗi tuyến đường có thể xác định các loại chức năng riêng của nó.
Chức năng hành động
An action chức năng cho phép bạn thêm chức năng bổ sung vào hành động biểu mẫu bằng cách sử dụng web chuẩn API FormData.
export async function action({ request }) {
const body = await request.formData();
const todo = await fakeCreateTodo({
title: body.get("title"),
});
return redirect(`/todos/${todo.id}`);
}Chức năng tiêu đề
Bất kì Tiêu đề chuẩn HTTP có thể đi trong một headers hàm số. Bởi vì mỗi tuyến đường có thể có một tiêu đề, để tránh xung đột với các tuyến đường lồng nhau, tuyến đường sâu nhất - hoặc URL có nhiều dấu gạch chéo nhất (/) - thắng. Bạn cũng có thể chuyển qua các tiêu đề, actionHeaders, loaderHeaders, hoặc là parentHeaders
export function headers({
actionHeaders,
loaderHeaders,
parentHeaders,
}) {
return {
"Cache-Control": loaderHeaders.get("Cache-Control"),
};
}Hàm meta
Hàm này sẽ đặt các thẻ meta cho tài liệu HTML. Một được đặt trong root.tsx theo mặc định, nhưng chúng có thể được cập nhật cho từng tuyến đường.
export function meta() {
return {
title: "Your page title",
description: "A new description for each route.",
};
};Chức năng liên kết
HTML link các yếu tố sống trong <head> của một tài liệu HTML và chúng nhập CSS, trong số những thứ khác. Các links chức năng, không nên nhầm lẫn với <Link /> thành phần, cho phép bạn chỉ nhập những thứ trong các tuyến đường cần chúng. Vì vậy, ví dụ: các tệp CSS có thể được xác định phạm vi và chỉ được nhập trên các tuyến cần các tệp cụ thể đó. Các link các phần tử được trả về từ một links() hoạt động như một mảng các đối tượng và có thể là một HtmlLinkDescriptor từ link API hoặc một PageLinkDescriptor có thể tìm nạp trước dữ liệu cho một trang.
export function links() {
return [
// add a favicon
{
rel: "icon",
href: "/favicon.png",
type: "image/png",
},
// add an external stylesheet
{
rel: "stylesheet",
href: "<https://example.com/some/styles.css>",
crossOrigin: "true",
},
// add a local stylesheet,
{ rel: "stylesheet", href: stylesHref },
// prefetch a page's data
{ page: "/about/community" }
]
}Liên kết giữa các tuyến đường
Phối lại cung cấp một thành phần để đi giữa các tuyến đường khác nhau trong ứng dụng của bạn được gọi là <Link/>. Để định tuyến phía máy khách, hãy sử dụng <Link to="">Name</Link> thành phần thay vì <a href="">Name</a>. Các <Link /> thành phần cũng có một chỗ dựa của prefetch với sự chấp nhận none theo mặc định, intent để tìm nạp trước dữ liệu nếu Remix phát hiện người dùng di chuột qua hoặc tập trung liên kết hoặc render sẽ tìm nạp dữ liệu của tuyến đường ngay sau khi liên kết được hiển thị.
import { Link } from "@remix-run/react";
export default function Nav() {
return (
<nav>
<Link to="/">Home</Link>{" "}
<Link to="/about">About</Link>{" "}
<Link to="/about/community" prefetch="intent">Community</Link>
</nav>
);
}Các bước tiếp theo
Bây giờ bạn đã biết những điều cơ bản về Remix và bạn đã sẵn sàng để bắt đầu thực sự xây dựng các ứng dụng, phải không? Phối lại cung cấp một Ứng dụng truyện cười và Hướng dẫn blog để giúp bạn bắt đầu triển khai kiến thức cơ bản này. Bạn cũng có thể bắt đầu lại từ đầu và tạo một ứng dụng Remix hoàn toàn mới. Hoặc nếu bạn đã sẵn sàng tham gia, hãy cung cấp ngăn xếp K-Pop một sự cố gắng. Tôi thực sự rất thích thời gian của mình với Remix và yêu thích sự tập trung vào các tiêu chuẩn web và đưa nó trở lại những điều cơ bản. Bây giờ đến lượt bạn bắt đầu tạo!
