2015-10-27 30 views
8

Điều tôi muốn biết là, bạn đã xây dựng ứng dụng web của mình như thế nào? Tôi thực sự bối rối vì tôi nên sử dụng phương pháp nào cho dự án của mình.Phương thức nào nhanh hơn, thể hiện: Hiển thị phía máy chủ và hiển thị phía máy khách

Đã quyết định chọn công nghệ nào.

1) Node.js và bày tỏ như khung của nó

2) MongoDB

3) Phản ứng + Flux

Nhưng vấn đề ngay bây giờ, tôi có nên sử dụng phương pháp (A) hoặc phương pháp (B)

phương pháp (A) - serverside render cho HTML

app.get('/users/', function(request, respond) { 
    var user = "Jack"; 
    respond.render("user", { user: user }); 
}); 

Phương pháp (B) - vẽ clientside cho HTML

app.get('/users/', function(request, respond){ 
     var user = "Jack"; 
     respond.json({ user: user }); 
    }); 

Phương pháp A sẽ làm cho HTML từ máy chủ và cũng như các dữ liệu.

Phương pháp B sẽ chỉ phản hồi dữ liệu cần thiết cho khách hàng là React.js, để nó có thể thao tác dữ liệu.

Quan tâm của tôi, tôi nên sử dụng phương pháp nào? hầu hết các phần khởi động sử dụng phương pháp nào?

Cảm ơn bạn.

+0

Nếu bạn định xây dựng một ứng dụng bằng React, bạn nên làm theo mẫu Flux. –

+0

Woops, không đọc Express trên tiêu đề.Không quá quen thuộc với Express nên có thể khác. –

+0

nói chung, hiển thị nhiều hơn ở phía máy khách và làm ít hơn trên máy chủ của riêng bạn được ưu tiên. Nhưng chỉ có rất nhiều thứ có thể được hiển thị ở phía máy khách, và sẽ rất khó để trả lời câu hỏi của bạn về những gì hầu hết các phần khởi động làm mà không chỉ rõ kiểu khởi động. – user2263572

Trả lời

5

Đây không phải là một trong hai đề xuất.

Phản hồi là khuôn khổ phía khách hàng. Bạn phải render ở phía máy khách. Câu hỏi đặt ra là liệu có hiển thị ở phía máy chủ ngoài để hiển thị ở phía máy khách hay không.

Câu trả lời? Nếu bạn có thể, CÓ!

Bạn sẽ nhận được lợi ích về SEO và tăng hiệu suất ban đầu bằng cách hiển thị ở phía máy chủ. Nhưng bạn sẽ vẫn phải làm cùng một kết xuất phía khách hàng.

Tôi gợi ý googling "phản ứng đẳng cấu" và thực hiện một số thao tác đọc. Đây là một bài viết về chủ đề này. http://www.smashingmagazine.com/2015/04/react-to-the-future-with-isomorphic-apps/

+0

Đây là câu trả lời đúng .. –

+0

để lưu ý: "Phản ứng đẳng cấu" liên quan đến hiển thị phía máy chủ Phản ứng được gọi là "Phản ứng phổ quát" – Sgnl

4

Vâng, nó thực sự phụ thuộc vào tầm nhìn bạn có trên trang web hiện đại và những gì bạn sẵn sàng làm.

Bạn có muốn cho phép người dùng của mình chờ, hiển thị trình tải trong khi dữ liệu được tải không đồng bộ hay bạn muốn giữ người dùng của mình bận rộn miễn là bạn có thể? Dưới đây là các bài viết khác nhau sẽ giúp bạn làm rõ tâm trí của bạn và nhận thức được những lợi thế khác nhau mà bạn có thể có bằng cách thực hiện dựng hình phía máy chủ, hiển thị phía khách hàng có nhiều vấn đề. Quay lại đầu trang Cung cấp Phản hồi THÔNG TIN THÊM

Bạn có thể xem bài đăng này từ Twitter viết blog nói rằng họ cải thiện tải trang ban đầu của họ bằng 1/5 với những gì họ đã có trước đó, bằng cách di chuyển vẽ đến máy chủ:

https://blog.twitter.com/2012/improving-performance-on-twittercom

Một bài viết khác, lần này là từ Airbnb, mô tả các vấn đề bạn có thể gặp phải với client-side render chính nó:

http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/

Ngoài ra còn có một bài viết thú vị khác nói về client-side/Server-side rendering, mang một cuộc tranh luận trên khi chúng ta nên sử dụng/không sử dụng server-side hoặc client-side rendering và lý do tại sao:

https://ponyfoo.com/articles/stop-breaking-the-web

Và để kết thúc, tôi có thể cung cấp cho bạn liên kết thêm hai tập trung hơn trên phản ứng, và mô tả, trong đó cách server-side vẽ nên rất hữu ích cho trường hợp của bạn:

https://www.terlici.com/2015/03/18/fast-react-loading-server-rendering.html

http://reactjsnews.com/isomorphic-javascript-with-react-node/

Bây giờ, về những gì bạn nÊN do đó, đó là vấn đề chính xác bạn cần làm, theo ý kiến ​​của tôi, nhưng về cơ bản, bạn có thể làm cả hai cùng một lúc (phía máy khách và phía máy chủ), để có trải nghiệm người dùng tốt nhất.

Khái niệm này được gọi là "javascript đẳng cấu" và ngày càng phổ biến hơn.

+0

Một đối số có thể có đối với trường hợp bạn thực hiện: [Rời JSP trong bụi: di chuyển LinkedIn sang các mẫu phía máy khách dust.js] (https://engineering.linkedin.com/frontend/leaving-jsps-dust-moving-linkedin-dustjs-client-side-templates). Hiệu suất của bạn cũng có thể phụ thuộc vào chính xác cách bạn triển khai khuôn mẫu phía máy khách. – jfriend00

+0

Có, tôi đoán vậy, đánh giá theo nhiều cách khác nhau mà bạn thực sự có thể triển khai hiển thị phía máy khách hoặc các ứng dụng "đẳng cấu". – schankam

+0

Tôi đọc hầu hết các liên kết mà bạn đã chia sẻ, nó thực sự mở rộng suy nghĩ của tôi về cả hai nhưng, vì hiển thị phía máy chủ nhanh, tôi có cần phải sao chép mã của mình cho API nếu tôi muốn di chuyển không? –

2

Kiến trúc đơn giản nhất là chỉ thực hiện hiển thị html động trên máy chủ, không có Ajax và với trang HTML mới được yêu cầu cho nhiều nhấp chuột của khách hàng. Đây là cách tiếp cận 'truyền thống', và có ưu và khuyết điểm. Đơn giản nhất tiếp theo là phân phát hoàn toàn tĩnh html + js + css (ứng dụng React) của bạn tới máy khách và thực hiện các cuộc gọi XMLHttpRequest tới các dịch vụ web để tìm nạp dữ liệu cần thiết (tức là phương pháp B của bạn).

Cách tiếp cận phức tạp nhất nhưng lý tưởng (từ góc độ hiệu suất và SEO) là xây dựng một ứng dụng 'đẳng cấu' hỗ trợ cả hai phương pháp tiếp cận. Ý tưởng là máy chủ tạo tất cả các cuộc gọi WS cần thiết mà máy khách sẽ tạo và hiển thị trang ban đầu mà người dùng đã truy cập (có thể là phần liên kết sâu của ứng dụng), giống như tùy chọn A nhưng sử dụng React để thực hiện kết xuất và sau đó chuyển quyền kiểm soát cho máy khách để cập nhật DOM trong tương lai. Điều này sau đó cho phép cập nhật gia tăng nhanh cho trang thông qua các cuộc gọi dịch vụ web khi người dùng tương tác (ví dụ như B). Điều hướng giữa các 'trang' khác nhau tại thời điểm này bao gồm việc sử dụng API lịch sử để làm cho nó trông giống như bạn đang thay đổi trang, khi thực sự bạn chỉ đang thao tác trang hiện tại bằng cách sử dụng dịch vụ web. Nhưng sau đó bạn đã làm một trình duyệt làm mới, máy chủ của bạn sẽ gửi lại HTML đầy đủ của trang hiện tại, trước khi vượt qua kiểm soát để phía khách hàng React một lần nữa. Có rất nhiều ví dụ về React + Flux + Node của phương pháp này có sẵn trực tuyến, sử dụng các hương vị khác nhau của Flux hỗ trợ hiển thị phía máy chủ.

Liệu phương pháp đó có đáng giá hay không tùy thuộc vào tình huống của bạn. Nó có thể có ý nghĩa để bắt đầu sử dụng cách tiếp cận B (bạn có thể chia sẻ API HTTP giữa các ứng dụng và trang web di động), nhưng sử dụng kiến ​​trúc Flux hỗ trợ hiển thị phía máy chủ và ghi nhớ nó. Bằng cách đó, nếu bạn cần cải thiện hiệu suất tải trang ban đầu, bạn có phương tiện để thực hiện điều đó.

Các vấn đề liên quan