javascript - nextjs、featherjs、feather-reactive を使用したデータ開始のためのより良いロジックが必要

Question

私はfeatherjsとnextjsを試しています。現在、どうにかして nextjs SSR を使用してサーバーから初期データを取得し、feathersjs を使用して API をサブスクライブできます。

なぜそれが機能するのか、そしてここで実際に何が起こるのか、今はよくわかりません。多分誰かがこれについてより良い実装を持っていますか? または、これらのライブラリを間違った方法で使用しましたか?

アイデアは、コンポーネントが最初のロード時にサーバーによってレンダリングされる最初の小道具をレンダリングし、次に次のリクエストでオブザーバブルを使用して状態をフェッチすることです。

これは本のページの私のコードです。本のリストを表示するだけです：

import React from 'react';

import Main from '../layouts/Main';
import client from '../scripts/feathers-client';

const clientService = client.service('api/books');

export default class Books extends React.Component {
  constructor (props) {
    super(props);
    if (this.props && this.props.books) {
      this.state = {books: this.props.books};
    } else {
      this.obs = clientService.watch().find().subscribe(books => {
        this.setState({books: books});
      });
    }
  }

  static async getInitialProps ({ req }) {
    if (req) {
      let service = req.app ? req.app.service('api/books') : {};
      return { books: await service.find() };
    } else {
      return { books: ''};
    }
  }

  componentWillUnmount () {
    if (this.obs) {
      this.obs.unsubscribe();
    }
  }

  render () {
    const renderBooks = this.state ?
      <ol>
        {this.state.books.data.map(book => (
          <li key={book._id}>{book.author}, {book.title}, liked: {book.liked}<p>{book.synopsis}</p></li>
        ))}
      </ol>
      :
      '';
    return (
      <Main>
        <p>List of books :</p>
        {renderBooks}
      </Main>
    );
  }
}

どんな助けでも大歓迎です。