Tải trang chậm? Không còn nữa - Sức mạnh của kết xuất phía máy chủ

Bạn có mệt mỏi với các trang web tải chậm? Đội ngũ SEO và công nghệ của bạn có tranh luận mãi về kiến ​​trúc phù hợp với tốc độ trang không? Vâng, chúng tôi cũng đã làm điều đó tại Pickyourtrail và chúng tôi cũng thu hẹp một giải pháp cho điều tương tự.

Trước khi các ứng dụng JS được đưa vào thế giới web, HTML đã được trả về để đáp lại lệnh gọi HTTP. Điều này được thực hiện bằng cách hiển thị tệp nội dung HTML tĩnh và đôi khi bằng cách pha chế phản hồi bằng các ngôn ngữ phía máy chủ như PHP, Python hoặc Java và phản hồi tương tự trong một quy trình hiệu quả hơn. Do đó, các vấn đề như tốc độ trang kém và tải nửa trang vẫn tồn tại. Hầu hết, những trường hợp này là một tác dụng phụ của Kết xuất phía máy khách.

Làm thế nào để kết xuất phía máy khách hoạt động?

Được rồi nếu bạn là siêu tân tinh từ phía công nghệ, chúng tôi chắc chắn rằng bạn sẽ quen với các khái niệm kết xuất. Đối với những người khác, đây là lời giải thích của bạn!

Kết xuất phía máy khách là khi tài liệu HTML cùng với tệp JS sẽ hiển thị phần còn lại của trang web với việc sử dụng trình duyệt. Với các khung web hiện đại như React, trình duyệt đã nhận được một tài liệu trống với các liên kết java-script và sau đó kết xuất bắt đầu, do đó quá trình tải trang bắt đầu không nhất quán. Tải trang ban đầu sẽ chậm và vì tốc độ mạng không phải là thứ gì đó mà chúng ta có thể đánh bạc, để mỗi lần tải được hoàn thành, phải mất gần hai chuyến đi đến đầu máy chủ trước khi nội dung được hiển thị cho người dùng. Nhưng. điều cần lưu ý là - sau lần tải đầu tiên (tải thời gian dài hơn), các lần tải tiếp theo sẽ siêu nhanh.

Phá vỡ nó xuống hơn nữa:

Bước 1: Trình duyệt yêu cầu một trang

Bước 2: Trình duyệt yêu cầu JS của chúng tôi

Bước 3: Phản ứng khởi động ứng dụng, yêu cầu dữ liệu từ back-end

Bước 4: Nội dung được chụp trên màn hình

Yêu cầu máy chủ ban đầu trả về một tệp HTML trống trước khi các tệp bên ngoài được tìm nạp để hiển thị. Do đó, có khả năng rất lớn là các trình thu thập thông tin có thể hiểu trang là trống. Ngoài ra, thời gian chờ đợi của người dùng sẽ nhiều hơn vì họ cần phải chờ trong một khoảng thời gian dài hơn cho kết xuất ban đầu.

Thời gian chờ thêm = Người dùng mất hứng thú và rời khỏi trang

Cảm thấy khủng khiếp khi tìm thấy thời gian phiên trung bình thấp phải không?

Pickyourtrail là một Ứng dụng Trang đơn (SPA) - việc triển khai trang web trước đây của chúng tôi với ứng dụng Kết xuất phía khách hàng (CSR), dẫn đến hiệu suất SEO chậm và không nhất quán. Thêm vào đó, các trang tiêu đề meta của chúng tôi và mô tả về người sói đã được thu thập thông tin có nghĩa là, trang của chúng tôi được hiển thị không chính xác trong suốt.

Google đã phát hành một báo cáo vào đầu năm nay, nơi họ kết luận:

Thời gian trung bình để tải đầy đủ trang đích di động trung bình là 22 giây. Tuy nhiên, nghiên cứu cũng chỉ ra rằng 53% mọi người sẽ rời khỏi trang di động nếu mất hơn 3 giây để tải.

Làm thế nào để kết xuất phía máy chủ hoạt động?

Chúng tôi có lợi ích tốt nhất của khách hàng như các hoạt động ưu tiên - được nắm bắt thông qua học máy và các nhu yếu phẩm khác như chuyến bay, khách sạn, chuyển nhượng và các hoạt động được tích hợp vào sản phẩm với việc sử dụng API. Trang web Pickyourtrail của chúng tôi được xây dựng trên React ở phần đầu sử dụng khái niệm Node. Nhưng chúng tôi không thể tận dụng tốt nhất do vấn đề tải trang chậm.

Với ‘Kết quả trên lý do, một trong những giá trị cốt lõi của chúng tôi - chúng tôi đã xem xét saga trang chậm ở góc nhìn rộng hơn và hiển thị phía máy chủ được tô sáng.

Giải pháp Pickyourtrail đã đưa ra để xác định các tắc nghẽn hiệu suất

  • Để tối ưu hóa CSR để hiển thị ứng dụng đủ nhanh để trình thu thập thông tin thu thập nội dung thực tế.
  • Để triển khai SSR cho kết xuất ban đầu của ứng dụng và hydrat bên phía máy khách cho các tương tác tiếp theo.

Sau nhiều cuộc thảo luận và thử nghiệm A / B, chúng tôi vẫy cờ màu xanh lá cây để hiển thị phía Máy chủ (SSR).

Kết xuất phía máy chủ là khi người dùng hoặc trình thu thập thông tin của công cụ tìm kiếm trước tiên yêu cầu trình duyệt của chúng tôi và kết xuất ban đầu sẽ khởi động. Khi máy chủ nhận được yêu cầu, nó sẽ kết xuất (các) phần tử cần thiết thành một chuỗi HTML và sau đó gán nó làm phản hồi cho máy khách. Sau đó, nếu bạn chọn truy cập một trang riêng biệt trên trang web, trình duyệt của bạn sẽ đưa ra một yêu cầu khác để lấy thông tin mới. Điều này sẽ diễn ra mỗi khi bạn nhấn một trang, trình duyệt của bạn không có biến thể được lưu trong bộ nhớ cache.

Một lần nữa, nếu bạn là một siêu tân tinh công nghệ đọc được điều này, bạn có thể muốn chuyển sang phần tiếp theo. Tuy nhiên, đối với những người khác, ở đây, cách thức hoạt động của SSR-

  • Trình duyệt yêu cầu một trang
  • Máy chủ tải React trong bộ nhớ
  • Máy chủ tìm nạp dữ liệu cần thiết
  • Máy chủ kết xuất ứng dụng React
  • Máy chủ gửi HTML được tạo tới trình duyệt
  • Trình thu thập thông tin / người dùng xem nội dung
  • Gọi cho tệp JS
  • Khởi động lại ứng dụng, yêu cầu dữ liệu từ back-end
  • Ứng dụng tái hiện (hydrat) trên màn hình.

Việc triển khai SSR có lợi cho chúng ta như thế nào?

  • Thời gian tải nhanh hơn cho kết xuất trang ban đầu
  • Các trang HTML hoàn toàn có thể lập chỉ mục.
  • Tăng tỷ lệ hiệu suất cho khách hàng của chúng tôi
  • Tính nhất quán trong các số liệu SEO

Tin tốt nhất là, các trình thu thập thông tin sẽ thấy trang web của chúng tôi giống như bất kỳ trang web tĩnh nào khác trên web và sẽ lập chỉ mục tất cả nội dung được hiển thị trên máy chủ. Bây giờ, người dùng không phải đợi JS tải và thay vào đó, có được một HTML được hiển thị đầy đủ.

Từ kết xuất hoàn toàn của trang chỉ ở giây thứ 7, chúng tôi đã giảm thời gian chờ xuống còn 4 giây. Ma thuật? Không công nghệ;)

Một số cạm bẫy tiềm năng của giải pháp đề xuất

Vâng, chúng tôi đang trung thực ở đây! Mặt cỏ luôn luôn xanh hơn ở phía bên kia: /

SSR mang lại hiệu suất tăng mong đợi và sự thật là chúng tôi sẽ truyền nội dung cho người dùng nhanh hơn so với sử dụng Ứng dụng React truyền thống. Điều đáng chú ý là, đây không phải là một sự tăng cường hiệu năng có thể mở rộng.

Trong yêu cầu SSR, máy chủ và máy khách hoạt động gần như theo cách tương tự. Nó khởi động React, kết xuất lại ứng dụng và tạo ra HTML. Ngoài ra, phương thức renderToString () mà React sử dụng để chuyển đổi mã JSX sang HTML, chậm và đồng bộ. Điều này khiến máy chủ chịu tải nhiều hơn và phản hồi ban đầu từ máy chủ sẽ đến muộn hơn so với HTML đã lên kế hoạch - như ứng dụng React truyền thống.

Bạn cần hết sức thận trọng vì ứng dụng sẽ chạy đầu tiên trong môi trường Node trong đó, ví dụ, `window` và` document` không được xác định. Bạn phải hạn chế sử dụng chúng bên ngoài `thành phầnDidMount` hoặc không có` if (cửa sổ typeof! = ’Không xác định rõ ràng)`

Nhưng lớp lót bạc cho sự phức tạp do SSR gây ra là, chúng có thể được sửa chữa bằng các công cụ như Next.js.

Đóng băng trên bánh? - Chúng tôi không chỉ tải trang của chúng tôi với tốc độ nhanh hơn bây giờ, mà các cuộc tranh luận không bao giờ kết thúc giữa các đội cũng dừng lại. Vì vậy, một trường hợp thắng-thắng điển hình cho chúng tôi;)

Bạn muốn làm việc trong một nhóm mà bạn không chỉ giải quyết các vấn đề công nghệ mà còn thấy ngay phản hồi của khách hàng về giải pháp của bạn? Chúng tôi rất thích có bạn trên tàu. Gửi thư đến careers@pickyourtrail.com và chúng tôi sẽ liên lạc với bạn. Ngoài ra, đối với những người thích đi lang thang chờ đợi để bắt đầu các chuyến đi, hãy truy cập Pickyourtrail và bắt đầu lên kế hoạch cho kỳ nghỉ vui vẻ của bạn!