APIのフェッチを高速化する

[no-yan]

トップページの表示を高速化したい

Shitforcesのページ表示が遅い原因を色々見ていたのですが、APIの中ではトップページのフェッチが~500msで、一番時間がかかっています。

APIから不要な情報を削除する

レスポンスを見てみると、不必要な情報(statementプロパティ)が総文字数の1/3を占めてます。今後も使わない場合は削除してよいと思います。ただ、文字数の多寡は問題の本質ではなさそうです。

リージョンの問題

Shitforcesの順位表は6620字を300~500msで送りますがAtCoderの順位表は1140000字を200msで送っています。（したがってstatementを削除しても劇的改善にはならないでしょう。） APIの問題に限定していえば、Herokuのサーバーが遅い原因は、いかんせん海を超えた長距離通信になることでしょうか。 (ただ今の所一秒超えてないので気にしなくていいかな？CDNを使ってHerokuを高速化する手法(これとか)を読みましたがよくわかってません)

キャッシュ

あんまりキャッシュが効いてそうにみえないので。キャッシュって言葉を漠然と知っている以上の知識がないので、良い資料があれば教えて下さい。トップページを表示するたびにlatestを叩く挙動はいずれ改善したいです。

同じリクエストが同時に２度送信されている

高速化とは関係ないですが、components/PagingElement.tsxとMainPage.tsxの両方でapi/contests/latest?contest_page=0でリクエストを送っています（ランキングページも同様）。 @rdrgn PagingElementにわたす関数を変えたいですが、useState(()=> {pageChanged(0); return 0;})の遅延初期化している部分まで書き換えてよいか気にしています。 遅延初期化している事情があったりします？

// pages/MaingPage.tsx
  useEffect(() => {
    console.log('called');
    getLatestContests(0).then((latestContestsInfo) => { ///}
    });
  }, []);

  // components/PagingElement.tsx
  const [page, setPage] = useState(() => {
    pageChanged(0); //　内部でgetLatestContestを呼び出す。上のuseEffectと同様の処理をする
    return 0;
  });

[reminjp]

@rdrgn PagingElementにわたす関数を変えたいですが、useState(()=> {pageChanged(0); return 0;})の遅延初期化している部分まで書き換えてよいか気にしています。 遅延初期化している事情があったりします？

なぜそうなっているかというと、もとからそうだったからとしか自分には答えられないのですが、PagingElement周りが冗長なことには同意です。リファクタリングしても良いのではないかと思います。 #163 が関連しているので、一緒に対応していただけると。

（放置してごめんなさい。）

[ShopOne]

冗長さに関しては、僕のReactの無知から来る物がほとんどです、申し訳ないです。 僕にはあまり作法等は分からないので、変な所は指摘して頂けるととても助かります。

[ShopOne]

また、接続の遅さについてですが、指摘していただいた通りherokuが海外リージョンのことと、今の契約が Hobby なので RAMが 512MBしか使えない事も効いているかな？と思います。 次が1GBですが、これにするだけで月7$から月50$にする必要があり、ちょっと厳しいかなと言ったところです。

[no-yan]

土地勘なしにいちから書き上げられるのは、一つの能力だと思います。

Reactの作法に関しては、Reactの特徴の「宣言的な View」、「コンポーネントベース」の２点を押さえていれば基本的な設計思想はOKだと思います。更に、なるべく純粋関数ライクに書く、asyncはuseEffectや他のものに押し付ける、コンポーネントを最大で40行を目安に細かく分割する、この３つを守ればかなりメンテナンスしやすい気がします。 ↑りあクト2,3巻の受け売りです。

[no-yan]

通信速度はこのままでいいと思います。リージョンに触れたのはAPIの情報を削ることは本質的改善でないことを明記したかっただけなので。 Shitforcesはコンテストという性質上同一ページ滞在時間が長いので、滞在が短い他のサイトに比べて体験が悪化しにくいでしょう。 サーバー代いつもありがとうございます。