Trường hợp sử dụng phổ biến nhất cho kết xuất phía máy chủ là xử lý kết xuất ban đầu khi người dùng [hoặc trình thu thập thông tin của công cụ tìm kiếm] yêu cầu ứng dụng của bạn lần đầu tiên
Khi máy chủ nhận được yêu cầu, nó sẽ hiển thị [các] thành phần được yêu cầu thành một chuỗi HTML, sau đó gửi nó dưới dạng phản hồi cho máy khách. Từ thời điểm đó, khách hàng đảm nhận nhiệm vụ kết xuất
MUI trên máy chủ
MUI được thiết kế từ đầu với sự hạn chế về kết xuất trên máy chủ, nhưng bạn phải đảm bảo rằng nó được tích hợp chính xác. Điều quan trọng là phải cung cấp CSS cần thiết cho trang, nếu không, trang sẽ hiển thị chỉ bằng HTML, sau đó đợi CSS được ứng dụng khách đưa vào, khiến trang bị nhấp nháy [FOUC]. Để đưa phong cách xuống máy khách, chúng ta cần
- Tạo một phiên bản
1 mới, mới theo mọi yêu cầuimport createCache from '@emotion/cache'; export default function createEmotionCache[] { return createCache[{ key: 'css' }]; }
- Kết xuất cây React với trình thu thập phía máy chủ
- Kéo CSS ra
- Truyền CSS cho khách hàng
Ở phía máy khách, CSS sẽ được chèn lần thứ hai trước khi xóa CSS đã chèn ở phía máy chủ
Đang cài đặt
Trong công thức sau đây, chúng ta sẽ xem xét cách thiết lập kết xuất phía máy chủ
chủ đề
Tạo một chủ đề sẽ được chia sẻ giữa máy khách và máy chủ
import createCache from '@emotion/cache';
export default function createEmotionCache[] {
return createCache[{ key: 'css' }];
}
2Phía máy chủ
Sau đây là phác thảo về phía máy chủ sẽ trông như thế nào. Chúng tôi sẽ thiết lập phần mềm trung gian Express bằng ứng dụng. sử dụng để xử lý tất cả các yêu cầu đến máy chủ. Nếu bạn không quen với Express hoặc phần mềm trung gian, hãy biết rằng hàm
import createCache from '@emotion/cache';
export default function createEmotionCache[] {
return createCache[{ key: 'css' }];
}
3 sẽ được gọi mỗi khi máy chủ nhận được yêu cầuimport createCache from '@emotion/cache';
export default function createEmotionCache[] {
return createCache[{ key: 'css' }];
}
4Xử lý yêu cầu
Điều đầu tiên mà chúng ta cần làm đối với mọi yêu cầu là tạo một
import createCache from '@emotion/cache';
export default function createEmotionCache[] {
return createCache[{ key: 'css' }];
}
1 mớiKhi kết xuất, chúng tôi sẽ bọc
import createCache from '@emotion/cache';
export default function createEmotionCache[] {
return createCache[{ key: 'css' }];
}
6, thành phần gốc, bên trong một import createCache from '@emotion/cache';
export default function createEmotionCache[] {
return createCache[{ key: 'css' }];
}
7 và một import createCache from '@emotion/cache';
export default function createEmotionCache[] {
return createCache[{ key: 'css' }];
}
8 để tạo cấu hình kiểu và function renderFullPage[html, css] {
return `
My page
${css}
${html}
`;
}
0 có sẵn cho tất cả các thành phần trong cây thành phầnBước quan trọng trong kết xuất phía máy chủ là kết xuất HTML ban đầu của thành phần trước khi chúng tôi gửi nó tới phía máy khách. Để làm điều này, chúng tôi sử dụng ReactDOMServer. renderToString[]
MUI đang sử dụng Cảm xúc làm công cụ tạo kiểu mặc định. Chúng ta cần trích xuất các kiểu từ ví dụ Cảm xúc. Đối với điều này, chúng ta cần chia sẻ cùng một cấu hình bộ đệm cho cả máy khách và máy chủ
function renderFullPage[html, css] {
return `
My page
${css}
${html}
`;
}
1import createCache from '@emotion/cache';
export default function createEmotionCache[] {
return createCache[{ key: 'css' }];
}
Bản sao [hoặc $keyC]Với điều này, chúng tôi đang tạo một phiên bản bộ đệm Cảm xúc mới và sử dụng phiên bản này để trích xuất các kiểu quan trọng cho html
Chúng ta sẽ thấy điều này được truyền như thế nào trong hàm
function renderFullPage[html, css] {
return `
My page
${css}
${html}
`;
}
2Tiêm thành phần ban đầu HTML và CSS
Bước cuối cùng ở phía máy chủ là đưa HTML và CSS thành phần ban đầu vào một mẫu để được hiển thị ở phía máy khách
function renderFullPage[html, css] {
return `
My page
${css}
${html}
`;
}
Bản sao [hoặc $keyC]Phía khách hàng
Phía khách hàng là đơn giản. Tất cả những gì chúng ta cần làm là sử dụng cấu hình bộ đệm giống như cấu hình phía máy chủ. Cùng xem qua tệp khách hàng
function renderFullPage[html, css] {
return `
My page
${css}
${html}
`;
}
3triển khai tham khảo
Chúng tôi lưu trữ các triển khai tham chiếu khác nhau mà bạn có thể tìm thấy trong kho lưu trữ GitHub trong thư mục
function renderFullPage[html, css] {
return `
My page
${css}
${html}
`;
}
4 Bắt đầu bằng cách bao gồm CSS và JavaScript sẵn sàng sản xuất của Bootstrap thông qua CDN mà không cần bất kỳ bước xây dựng nào. Xem nó trong thực tế với bản demo Bootstrap CodePen này
Tạo một tệp
9 mới trong thư mục gốc của dự án của bạn. Bao gồm cả thẻimport createCache from '@emotion/cache'; export default function createEmotionCache[] { return createCache[{ key: 'css' }]; }
0 để có hành vi phản hồi thích hợp trong thiết bị di độngfunction renderFullPage[html, css] { return ` My page ${css}
${html}
Bootstrap demo Hello, world!
Bao gồm CSS và JS của Bootstrap. Đặt thẻ
0 vào CSS của chúng tôi và thẻfunction renderFullPage[html, css] { return ` My page ${css}
${html}
`; }
0function renderFullPage[html, css] { return ` My page ${css}
${html}
`; }Bạn cũng có thể bao gồm Popper và JS của chúng tôi một cách riêng biệt. Nếu bạn không định sử dụng danh sách thả xuống, cửa sổ bật lên hoặc chú giải công cụ, hãy tiết kiệm một số kilobyte bằng cách không bao gồm Popper
________số 8
Chào thế giới. Mở trang trong trình duyệt bạn chọn để xem trang Bootstrapped của bạn. Giờ đây, bạn có thể bắt đầu xây dựng với Bootstrap bằng cách tạo bố cục của riêng mình, thêm hàng chục thành phần và sử dụng các ví dụ chính thức của chúng tôi
Để tham khảo, đây là các liên kết CDN chính của chúng tôi
Mô tảURLCSS
function renderFullPage[html, css] {
return `
My page
${css}
${html}
`;
}
3JS
0Bạn cũng có thể sử dụng CDN để tìm nạp bất kỳ bản dựng bổ sung nào của chúng tôi được liệt kê trong trang Nội dung
Bước tiếp theo
thành phần JS
Tò mò không biết thành phần nào yêu cầu JavaScript và Popper của chúng tôi một cách rõ ràng? . Nếu bạn hoàn toàn không chắc chắn về cấu trúc trang chung, hãy tiếp tục đọc mẫu trang mẫu
Hiển thị các thành phần yêu cầu JavaScript- Cảnh báo sa thải
- Các nút để chuyển trạng thái và chức năng hộp kiểm/radio
- Băng chuyền cho tất cả các hành vi, điều khiển và chỉ báo của trang trình bày
- Thu gọn để chuyển đổi mức độ hiển thị của nội dung
- Danh sách thả xuống để hiển thị và định vị [cũng yêu cầu Popper]
- Các phương thức để hiển thị, định vị và hành vi cuộn
- Thanh điều hướng để mở rộng các plugin Thu gọn và Offcanvas của chúng tôi để triển khai các hành vi phản hồi
- Điều hướng với plugin Tab để chuyển đổi bảng nội dung
- Offcanvases để hiển thị, định vị và hành vi cuộn
- Scrollspy cho hành vi cuộn và cập nhật điều hướng
- Chúc mừng để hiển thị và loại bỏ
- Chú giải công cụ và cửa sổ bật lên để hiển thị và định vị [cũng yêu cầu Popper]
Toàn cầu quan trọng
Bootstrap sử dụng một số kiểu và cài đặt toàn cầu quan trọng, tất cả đều hầu như chỉ hướng đến việc chuẩn hóa các kiểu trình duyệt chéo. Hãy đi sâu vào
loại tài liệu HTML5
Bootstrap yêu cầu sử dụng loại tài liệu HTML5. Không có nó, bạn sẽ thấy một số kiểu dáng ngộ nghĩnh và không đầy đủ
function renderFullPage[html, css] {
return `
My page
${css}
${html}
`;
}
0Bootstrap được phát triển trên thiết bị di động trước, một chiến lược trong đó chúng tôi tối ưu hóa mã cho thiết bị di động trước rồi sau đó mở rộng quy mô các thành phần khi cần bằng truy vấn phương tiện CSS. Để đảm bảo hiển thị phù hợp và thu phóng cảm ứng cho tất cả các thiết bị, hãy thêm thẻ meta chế độ xem đáp ứng vào của bạn
function renderFullPage[html, css] {
return `
My page
${css}
${html}
`;
}
1Bạn có thể xem một ví dụ về điều này đang hoạt động trong phần bắt đầu nhanh
kích thước hộp
Để định cỡ đơn giản hơn trong CSS, chúng tôi chuyển giá trị toàn cầu
1 từ
2 sang
3. Điều này đảm bảo rằng
4 không ảnh hưởng đến chiều rộng được tính toán cuối cùng của một phần tử, nhưng nó có thể gây ra sự cố với một số phần mềm của bên thứ ba như Google Maps và Công cụ tìm kiếm tùy chỉnh của GoogleTrong trường hợp hiếm hoi, bạn cần ghi đè lên nó, hãy sử dụng một cái gì đó như sau
function renderFullPage[html, css] {
return `
My page
${css}
${html}
`;
}
6Với đoạn mã trên, các phần tử lồng nhau—bao gồm cả nội dung được tạo thông qua
5 và
6—tất cả sẽ kế thừa
1 đã chỉ định cho
8 đóTìm hiểu thêm về mô hình hộp và kích thước tại Thủ thuật CSS
khởi động lại
Để cải thiện khả năng hiển thị trên nhiều trình duyệt, chúng tôi sử dụng Khởi động lại để sửa lỗi không nhất quán giữa các trình duyệt và thiết bị đồng thời cung cấp các thiết lập lại có chủ ý hơn một chút cho các thành phần HTML phổ biến
Luôn cập nhật về sự phát triển của Bootstrap và tiếp cận cộng đồng với những tài nguyên hữu ích này