フロントアーキテクチャ改善NIGHT https://hireroo.connpass.com/event/310150/
OCHaCafe Season8 #2の資料です。 https://ochacafe.connpass.com/event/308830/ セッションアーカイブ動画:https://youtu.be/Ywd2J3GZ8wQ
これは Livesense Advent Calendar 2022 DAY 15 の記事です。 はじめに 転職会議事業部エンジニアの、池田、犬島、佐藤、浜田です。 転職会議は、ユーザーの口コミ投稿によって成り立っている転職サイトです。 フロントエンドはReact/Next.jsによる独立したマイクロサービスとして切り出されており、BFFを通じてバックエンドのサービス群とAPI通信する構成をとっています。 サービスの性質上口コミを中心とした検索流入が重要であり、SEOの文脈でフロントエンドのパフォーマンス改善の必要性は認識されていましたが、機能開発や負債解消もあり、まとまった対応ができない状況が続いていました。 この状況を改善すべく、1年間継続的に改善に取り組み、Web Vitalsの健全化、パフォーマンススコアの大幅な改善を達成することができました。 本記事では、特に効果が大きかった改善
Next.jsにStorybookを導入してTypeScriptで書けるようにする この記事では、Next.jsにStorybookを導入してTypeScriptでReactコンポーネントを書けるようにする手順を紹介します。またその際に、私が踏み抜いたバグと解消法を全て共有します。 Next.jsとは、Vercelが作成しているReactのフレームワークです。 SSRにも対応しており、Reactで開発するならNext.jsかFacebook製のCreate React Appを使うのがスタンダードになっています。また、面倒な設定を書かなくてもすぐに使えるZero Configを標榜しており、実際にWebpackやTypeScriptと一緒にReactを書く際にも特別な準備は不要です。 Storybookとは、UIコンポーネントのカタログを作るツールです。 Storybookの実行環境はメイ
【Next.js】Warning: X did not match.Server: y Client: z は絶対に解消しろReactNext.js 追記 (2022/04/19) React18より、この記事で解説している内容はワーニングからエラーへ引き上げられました。 この記事で解説しているのは、React17の頃にワーニングレベルであったこの警告を「なぜ放置してはいけないか」ということについてです。 残念ながら 「どうやって解消すべきか」については触れていません ので、問題解決を急ぎたい方は、今すぐこの記事を閉じて他の記事を探してください。 結論 パフォーマンスに与える影響が非常に大きい。 「コンソールにワーニング出てるけど、レンダリングされる結果は問題ないからいいか」ぐらいの軽い気持ちで無視すると痛い目を見る Warning解消前 Warning解消後
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く