Các chiến lược hiển thị phía máy chủ của các thành phần React.js được khởi tạo không đồng bộ

114
tobik 2014-09-23 10:58.

Một trong những lợi thế lớn nhất của React.js được cho là khả năng hiển thị phía máy chủ . Vấn đề là chức năng chính React.renderComponentToString()là đồng bộ khiến không thể tải bất kỳ dữ liệu không đồng bộ nào khi cấu trúc phân cấp thành phần được hiển thị trên máy chủ.

Giả sử tôi có một thành phần phổ biến để nhận xét mà tôi có thể thả khá nhiều ở bất kỳ đâu trên trang. Nó chỉ có một thuộc tính, một số loại định danh (ví dụ: id của một bài báo bên dưới đặt các bình luận), và mọi thứ khác được xử lý bởi chính thành phần (tải, thêm, quản lý bình luận).

Tôi thực sự thích kiến trúc Flux vì nó làm cho nhiều thứ dễ dàng hơn nhiều và các cửa hàng của nó rất hoàn hảo để chia sẻ trạng thái giữa máy chủ và máy khách. Khi cửa hàng của tôi có chứa các nhận xét được khởi tạo, tôi chỉ cần tuần tự hóa nó và gửi nó từ máy chủ đến máy khách để dễ dàng khôi phục.

Câu hỏi đặt ra là cách tốt nhất để tập trung vào cửa hàng của tôi là gì. Trong những ngày qua, tôi đã tìm kiếm trên Google rất nhiều và tôi đã tìm thấy một vài chiến lược, không có chiến lược nào có vẻ thực sự tốt khi tính đến mức độ mà tính năng này của React đang được "quảng bá".

  1. Theo tôi, cách đơn giản nhất là điền tất cả các cửa hàng của tôi trước khi kết xuất thực sự bắt đầu. Điều đó có nghĩa là một nơi nào đó bên ngoài cấu trúc phân cấp thành phần (được nối với bộ định tuyến của tôi chẳng hạn). Vấn đề với cách tiếp cận này là tôi sẽ phải xác định khá nhiều cấu trúc trang hai lần. Hãy xem xét một trang phức tạp hơn, ví dụ một trang blog có nhiều thành phần khác nhau (bài đăng trên blog thực tế, nhận xét, bài đăng liên quan, bài đăng mới nhất, luồng twitter ...). Tôi sẽ phải thiết kế cấu trúc trang bằng cách sử dụng các thành phần React và sau đó ở một nơi khác, tôi sẽ phải xác định quy trình điền từng cửa hàng bắt buộc cho trang hiện tại này. Đó dường như không phải là một giải pháp tốt đối với tôi. Thật không may, hầu hết các hướng dẫn isomorphic được thiết kế theo cách này (ví dụ: hướng dẫn thông lượng tuyệt vời này ).

  2. React-async . Cách tiếp cận này là hoàn hảo. Nó cho phép tôi chỉ cần xác định trong một hàm đặc biệt trong mỗi thành phần cách khởi tạo trạng thái (không quan trọng là đồng bộ hay không đồng bộ) và các hàm này được gọi khi hệ thống phân cấp đang được hiển thị cho HTML. Nó hoạt động theo cách mà một thành phần không được hiển thị cho đến khi trạng thái được khởi tạo hoàn toàn. Vấn đề là nó yêu cầu Fibers , theo như tôi hiểu, là một phần mở rộng Node.js có thể thay đổi hành vi JavaScript chuẩn. Mặc dù tôi rất thích kết quả đó, nhưng đối với tôi, dường như thay vì tìm ra giải pháp, chúng tôi đã thay đổi luật chơi. Và tôi nghĩ rằng chúng ta không nên buộc phải làm điều đó để sử dụng tính năng cốt lõi này của React.js. Tôi cũng không chắc về sự hỗ trợ chung của giải pháp này. Có thể sử dụng Fiber trên lưu trữ web Node.js tiêu chuẩn không?

  3. Tôi đã suy nghĩ một chút của riêng tôi. Tôi chưa thực sự nghĩ đến chi tiết triển khai nhưng ý tưởng chung là tôi sẽ mở rộng các thành phần theo cách tương tự như React-async và sau đó tôi sẽ liên tục gọi React.renderComponentToString () trên thành phần gốc. Trong mỗi lần vượt qua, tôi sẽ thu thập các cuộc gọi lại mở rộng và sau đó gọi chúng tại và của thẻ để điền vào các cửa hàng. Tôi sẽ lặp lại bước này cho đến khi tất cả các cửa hàng theo yêu cầu của hệ thống phân cấp thành phần hiện tại sẽ được điền. Có nhiều thứ phải giải quyết và tôi đặc biệt không chắc chắn về hiệu suất.

Tôi đã bỏ lỡ điều gì đó? Có cách tiếp cận / giải pháp nào khác không? Ngay bây giờ tôi đang nghĩ về việc sử dụng phản ứng không đồng bộ / sợi nhưng tôi không hoàn toàn chắc chắn về nó như đã giải thích ở điểm thứ hai.

Thảo luận liên quan trên GitHub . Rõ ràng, không có cách tiếp cận chính thức hoặc thậm chí là giải pháp. Có thể câu hỏi thực sự là các thành phần React được dự định sử dụng như thế nào. Giống như lớp xem đơn giản (khá nhiều gợi ý số một của tôi) hoặc giống như các thành phần độc lập và độc lập thực sự?

6 answers

15
Esailija 2014-12-15 04:11.

Nếu bạn sử dụng bộ định tuyến phản ứng , bạn chỉ có thể xác định một willTransitionTophương thức trong các thành phần, phương thức này sẽ được chuyển qua một Transitionđối tượng mà bạn có thể gọi .wait.

Không quan trọng nếu renderToString là đồng bộ vì lệnh gọi lại tới Router.runsẽ không được gọi cho đến khi tất cả các .waitlời hứa ed được giải quyết, vì vậy vào thời điểm renderToStringđược gọi trong phần mềm trung gian, bạn có thể đã điền các cửa hàng. Ngay cả khi các cửa hàng là các ổ đĩa đơn, bạn chỉ có thể đặt dữ liệu của chúng tạm thời ngay trong thời gian trước khi gọi hiển thị đồng bộ và thành phần sẽ nhìn thấy nó.

Ví dụ về phần mềm trung gian:

var Router = require('react-router');
var React = require("react");
var url = require("fast-url-parser");

module.exports = function(routes) {
    return function(req, res, next) {
        var path = url.parse(req.url).pathname;
        if (/^\/?api/i.test(path)) {
            return next();
        }
        Router.run(routes, path, function(Handler, state) {
            var markup = React.renderToString(<Handler routerState={state} />);
            var locals = {markup: markup};
            res.render("layouts/main", locals);
        });
    };
};

Đối routestượng (mô tả hệ thống phân cấp các tuyến đường) được chia sẻ nguyên văn với máy khách và máy chủ

0
phtrivier 2014-10-01 10:48.

Tôi biết đây có thể không phải là chính xác những gì bạn muốn và nó có thể không có ý nghĩa, nhưng tôi nhớ đã sửa đổi nhanh thành phần để xử lý cả hai:

  • hiển thị ở phía máy chủ, với tất cả trạng thái ban đầu đã được truy xuất, không đồng bộ nếu cần)
  • hiển thị ở phía máy khách, với ajax nếu cần

Vì vậy, một cái gì đó như:

/** @jsx React.DOM */

var UserGist = React.createClass({
  getInitialState: function() {

    if (this.props.serverSide) {
       return this.props.initialState;
    } else {
      return {
        username: '',
        lastGistUrl: ''
      };
    }

  },

  componentDidMount: function() {
    if (!this.props.serverSide) {

     $.get(this.props.source, function(result) {
      var lastGist = result[0];
      if (this.isMounted()) {
        this.setState({
          username: lastGist.owner.login,
          lastGistUrl: lastGist.html_url
        });
      }
    }.bind(this));

    }

  },

  render: function() {
    return (
      <div>
        {this.state.username}'s last gist is
        <a href={this.state.lastGistUrl}>here</a>.
      </div>
    );
  }
});

// On the client side
React.renderComponent(
  <UserGist source="https://api.github.com/users/octocat/gists" />,
  mountNode
);

// On the server side
getTheInitialState().then(function (initialState) {

    var renderingOptions = {
        initialState : initialState;
        serverSide : true;
    };
    var str = Xxx.renderComponentAsString( ... renderingOptions ...)  

});

Tôi xin lỗi vì tôi không có mã chính xác trong tay, vì vậy điều này có thể không hoạt động tốt, nhưng tôi đang đăng vì lợi ích của cuộc thảo luận.

Một lần nữa, ý tưởng là coi hầu hết thành phần là một chế độ xem ngu ngốc và xử lý việc tìm nạp dữ liệu ra khỏi thành phần càng nhiều càng tốt .

0
svnm 2015-04-29 19:50.

Tôi thực sự bối rối với điều này ngày hôm nay, và mặc dù đây không phải là câu trả lời cho vấn đề của bạn, nhưng tôi đã sử dụng cách tiếp cận này. Tôi muốn sử dụng Express để định tuyến hơn là React Router và tôi không muốn sử dụng Fibers vì tôi không cần hỗ trợ phân luồng trong nút.

Vì vậy, tôi vừa đưa ra quyết định rằng đối với dữ liệu ban đầu cần được hiển thị cho lưu trữ thông lượng khi tải, tôi sẽ thực hiện một yêu cầu AJAX và chuyển dữ liệu ban đầu vào cửa hàng

Tôi đã sử dụng Fluxxor cho ví dụ này.

Vì vậy, trên tuyến đường cao tốc của tôi, trong trường hợp này là một /productstuyến đường:

var request = require('superagent');
var url = 'http://myendpoint/api/product?category=FI';

request
  .get(url)
  .end(function(err, response){
    if (response.ok) {    
      render(res, response.body);        
    } else {
      render(res, 'error getting initial product data');
    }
 }.bind(this));

Sau đó, phương thức kết xuất khởi tạo của tôi sẽ chuyển dữ liệu đến cửa hàng.

var render = function (res, products) {
  var stores = { 
    productStore: new productStore({category: category, products: products }),
    categoryStore: new categoryStore()
  };

  var actions = { 
    productActions: productActions,
    categoryActions: categoryActions
  };

  var flux = new Fluxxor.Flux(stores, actions);

  var App = React.createClass({
    render: function() {
      return (
          <Product flux={flux} />
      );
    }
  });

  var ProductApp = React.createFactory(App);
  var html = React.renderToString(ProductApp());
  // using ejs for templating here, could use something else
  res.render('product-view.ejs', { app: html });
0
Rotem 2015-09-04 22:59.

Tôi biết câu hỏi này đã được hỏi cách đây một năm nhưng chúng tôi đã gặp phải vấn đề tương tự và chúng tôi giải quyết nó bằng các lời hứa lồng nhau có nguồn gốc từ các thành phần sẽ được kết xuất. Cuối cùng, chúng tôi đã có tất cả dữ liệu cho ứng dụng và chỉ cần gửi nó xuống.

Ví dụ:

var App = React.createClass({

    /**
     *
     */
    statics: {
        /**
         *
         * @returns {*}
         */
        getData: function (t, user) {

            return Q.all([

                Feed.getData(t),

                Header.getData(user),

                Footer.getData()

            ]).spread(
                /**
                 *
                 * @param feedData
                 * @param headerData
                 * @param footerData
                 */
                function (feedData, headerData, footerData) {

                    return {
                        header: headerData,
                        feed: feedData,
                        footer: footerData
                    }

                });

        }
    },

    /**
     *
     * @returns {XML}
     */
    render: function () {

        return (
            <label>
                <Header data={this.props.header} />
                <Feed data={this.props.feed}/>
                <Footer data={this.props.footer} />
            </label>
        );

    }

});

và trong bộ định tuyến

var AppFactory = React.createFactory(App);

App.getData(t, user).then(
    /**
     *
     * @param data
     */
    function (data) {

        var app = React.renderToString(
            AppFactory(data)
        );       

        res.render(
            'layout',
            {
                body: app,
                someData: JSON.stringify(data)                
            }
        );

    }
).fail(
    /**
     *
     * @param error
     */
    function (error) {
        next(error);
    }
);
0
zooblin 2016-03-13 12:33.

Tôi muốn chia sẻ với bạn phương pháp kết xuất phía máy chủ của tôi bằng cách sử dụng Flux, ví dụ:

  1. Giả sử chúng tôi có componentdữ liệu ban đầu từ cửa hàng:

    class MyComponent extends Component {
      constructor(props) {
        super(props);
        this.state = {
          data: myStore.getData()
        };
      }
    }
    
  2. Nếu lớp yêu cầu một số dữ liệu được tải trước cho trạng thái ban đầu, hãy tạo Trình tải cho MyComponent:

     class MyComponentLoader {
        constructor() {
            myStore.addChangeListener(this.onFetch);
        }
        load() {
            return new Promise((resolve, reject) => {
                this.resolve = resolve;
                myActions.getInitialData(); 
            });
        }
        onFetch = () => this.resolve(data);
    }
    
  3. Cửa hàng:

    class MyStore extends StoreBase {
        constructor() {
            switch(action => {
                case 'GET_INITIAL_DATA':
                this.yourFetchFunction()
                    .then(response => {
                        this.data = response;
                        this.emitChange();
                     });
                 break;
        }
        getData = () => this.data;
    }
    
  4. Bây giờ chỉ cần tải dữ liệu trong bộ định tuyến:

    on('/my-route', async () => {
        await new MyComponentLoader().load();
        return <MyComponent/>;
    });
    
0
jebbie 2018-09-21 06:08.

giống như một bản tổng hợp ngắn -> GraphQL sẽ giải quyết điều này một cách nhanh chóng cho ngăn xếp của bạn ...

  • thêm GraphQL
  • sử dụng apollo và react-apollo
  • sử dụng "getDataFromTree" trước khi bạn bắt đầu kết xuất

-> getDataFromTree sẽ tự động tìm tất cả các truy vấn liên quan trong ứng dụng của bạn và thực thi chúng, tạo bộ đệm apollo của bạn trên máy chủ và do đó, cho phép SSR hoạt động đầy đủ .. BÄM

Related questions

MORE COOL STUFF

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett đã bất chấp những lời khuyên hẹn hò điển hình khi cô gặp chồng mình.

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Michael Sheen là một diễn viên phi lợi nhuận nhưng chính xác thì điều đó có nghĩa là gì?

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Ngôi sao của Hallmark Colin Egglesfield chia sẻ về những cuộc gặp gỡ với người hâm mộ ly kỳ tại RomaDrama Live! cộng với chương trình INSPIRE của anh ấy tại đại hội.

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Bạn sẽ phải phủi sạch đầu đĩa Blu-ray hoặc DVD để xem tại sao Northern Exposure trở thành một trong những chương trình nổi tiếng nhất của thập niên 90.

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

8 công dụng tuyệt vời của Baking Soda và Giấm

8 công dụng tuyệt vời của Baking Soda và Giấm

Bạn biết đấy, hai sản phẩm này là nguồn điện để làm sạch, riêng chúng. Nhưng cùng với nhau, chúng có một loạt công dụng hoàn toàn khác.

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Thủy điện rất cần thiết cho lưới điện của Hoa Kỳ, nhưng nó chỉ tạo ra năng lượng khi có nước di chuyển. Bao nhiêu nhà máy thủy điện có thể gặp nguy hiểm khi các hồ và sông cạn kiệt?

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Tóc tỉa từ các tiệm và các khoản quyên góp cá nhân có thể được tái sử dụng như những tấm thảm thấm dầu và giúp bảo vệ môi trường.

BoJack Horseman vẫn gan ruột và gan dạ hơn bao giờ hết trong phần 3

BoJack Horseman vẫn gan ruột và gan dạ hơn bao giờ hết trong phần 3

BoJack Horseman (Ảnh: Netflix) BoJack Horseman bắt đầu mùa thứ ba với sự xuất hiện của nhân vật tiêu biểu, người vẫn đang theo đuổi những lời khen ngợi từ giới phê bình trong một nỗ lực tuyệt vọng để tìm ra ý nghĩa trong cuộc sống của mình. Mùa thứ hai về số phận bi kịch của Raphael Bob-Waksberg dày đặc những trò đùa cũng như tuyệt vọng.

Xem cách tính năng lái tự động cập nhật của Tesla bùng phát như thế nào khi bạn bỏ qua các cảnh báo của nó

Xem cách tính năng lái tự động cập nhật của Tesla bùng phát như thế nào khi bạn bỏ qua các cảnh báo của nó

Bản nâng cấp Phiên bản 8.0 gần đây của Tesla đối với hệ thống Lái xe tự động được thiết kế để cải thiện hệ thống và mối quan hệ của nó với người lái.

UnREAL, Chương trình Truyền hình Về Truyền hình Thực tế Chúng tôi Không biết Chúng tôi Cần

UnREAL, Chương trình Truyền hình Về Truyền hình Thực tế Chúng tôi Không biết Chúng tôi Cần

Chắc chắn khi con cái chúng ta xem lại các chương trình chúng ta đã xem vào khoảng năm 2015, chúng sẽ thấy UnREAL, một chương trình truyền hình mới chiếu vào tối Thứ Hai của Lifetime — bạn sẽ thấy đúng lúc, sẽ phát sóng ngay sau khi The Bachelor kết thúc — như một chương trình không thể được thực hiện vào bất kỳ thời điểm nào khác trong lịch sử truyền hình, nhưng một chương trình cảm thấy cần thiết để xem bây giờ. UnREAL có sự tham gia của Shiri Appleby trong vai Rachel, một nhà sản xuất truyền hình cho một chương trình về cơ bản là The Bachelor, mặc dù trong thế giới này, nó được gọi là Vĩnh viễn.

Sau tất cả, Josh Trank sẽ không đạo diễn bộ phim tuyển tập Star Wars thứ hai

Sau tất cả, Josh Trank sẽ không đạo diễn bộ phim tuyển tập Star Wars thứ hai

Thông báo chính thức đến trực tiếp từ trang web của Star Wars: Fantastic Four, đạo diễn Josh Trank, một người bí ẩn không xuất hiện tại đại hội Star Wars Celebration gần đây, sẽ không chỉ đạo phần hai Star Wars Anthology. Đây là tuyên bố được đăng ngày hôm qua: Tất cả thực sự là ngôn ngữ rất lịch sự, nhưng một bài báo của Hollywood Reporter cho thấy tất cả đều không tốt ở hậu trường, gọi sự ra đi là "một vụ sa thải" một phần dựa trên "hành vi bất thường" của Trank trong khi quay Fantastic Four: The Bài báo trích dẫn các nguồn gọi là Trank “đôi khi thiếu quyết đoán và thiếu sáng tạo,” và lưu ý rằng Fantastic Four, khởi chiếu vào ngày 7 tháng 8, đã được khởi động lại vào cuối tháng 4.

Edwin McCain ra mắt Grand Ole Opry: Quay cảnh hậu trường với nhạc sĩ 'I'll Be'

Edwin McCain ra mắt Grand Ole Opry: Quay cảnh hậu trường với nhạc sĩ 'I'll Be'

McCain, người đang làm việc cho một album mới, lần đầu tiên bước vào vòng kết nối vào tối thứ Sáu ở Nashville

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa. Từ Hollywood đến New York và mọi nơi ở giữa, hãy xem các ngôi sao yêu thích của bạn đang làm gì!

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

Các nhà điều tra đang xem xét liệu nhóm và nghi phạm có biết nhau trước vụ tấn công hay không

Tôi viết như thế nào

Tôi viết như thế nào

Đối với tôi, mọi thứ là về dòng đầu tiên đó và nó sẽ đưa bạn đến đâu. Một số nhà văn bị điều khiển bởi cốt truyện, sự sắp xếp tinh tế của các quân cờ, trong khi những người khác bị lôi cuốn bởi một nhân vật và khả năng thực hiện một cuộc hành trình với một người bạn hư cấu mới.

Đường băng hạ cánh

Đường băng hạ cánh

Cuối hè đầu thu là mùa hoài niệm. Những chiếc đèn đường chiếu ánh sáng của chúng qua những con đường đẫm mưa, và những chiếc lá dưới chân - màu đỏ cam tắt trong bóng chạng vạng - là lời nhắc nhở về những ngày đã qua.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Vào năm 2021, tôi khuyến khích bạn suy nghĩ lại mọi thứ bạn biết về khách hàng mà bạn phục vụ và những câu chuyện bạn kể cho họ. Lùi lại.

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Vào ngày sinh nhật thứ 9 của Felix The Cat, tôi nhớ về một trong những mất mát lớn nhất trong cuộc đời trưởng thành của tôi - Sophie của tôi vào năm 2013. Tôi đã viết bài luận này và chia sẻ nó trên nền tảng này một thời gian ngắn vào năm 2013.

Language