ここしばらくフロント開発が便利になった反面、サーバ(node.js)でこれ使えないんだっけとなることが多々あります。
特に通信系は多種にわたる処理のいろんなフェーズで使うのため、その場その場で使うものを決めていたんですが今後のために少しまとめておきます。
ここしばらくフロント開発が便利になった反面、サーバ(node.js)でこれ使えないんだっけとなることが多々あります。
特に通信系は多種にわたる処理のいろんなフェーズで使うのため、その場その場で使うものを決めていたんですが今後のために少しまとめておきます。
ReactでUIコンポーネントを使う時にMaterial-UIは一番有力な選択肢だと思います。
Next.jsでも同じように使いたいところですが、サーバーサイドレンダリング(SSR)時にcss modulesによるクラス名付与が合わなくなる問題が起きました。
index.js:1 Warning: Prop
className
did not match. Server: “MuiBox-root…これによって一部スタイルが崩れてしまう。
dev
での再コンパイルや内部遷移によって直ることもあるがproduction
でも問題が起きるので使い物にならない状態なので対策します。
Next.jsを使っていてgetInitialProps()
内でContext APIを使いたかったけど、Reactライフサイクル内にないため使えなかった。
じゃあprops
を経由してconstructor()
内でコンテクストに入れようとしたら中身にアクセスできなかった。
componentDidMount()
でも悪くはないけどrender()
前に処理したいので、ドキュメントにない方法で使ってみます。
簡単にReactを使ったSSRができるNext.jsを使っていて外部APIをfetchするときに色々戸惑ったので覚書き。
公式ドキュメントが結構偏っているのと日本語情報も少ないのでわりと手探りでどうすればいいか考えていきます。
next 9.1.7 react 16.12.0複数のWeb APIを叩いたりするときに複数の非同期処理をハンドリングする必要があったので、適当に書いた後どんどん変えていったら別物になりました。
今後のPromise活用に使うかもしれないので基本部分からまとめておきます。
React.jsのSSRをしたくてNext.jsを触ってみて少しずつ理解できて来たのでちょくちょく覚書きしていきます。今回は設計や共通ページなどの大枠。
リンク先でReadmeと公式ドキュメントを載せておきますが、内容は同じなので見やすいほうを見ればいいと思います。また、有志の日本語翻訳もありますが、最初にざっと読む用に向いている気がする。
react v16.12.0 next v9.1.4React Nativeを触っていたらWebの方も触りたくなってきた。
これまでCreate React Appを使っていましたが、SSR(Server Side Rendering)したかったのでNext.jsを使ってみます。
キャッシュ設定もしたかったのでExpress併用も考えます。
前回GoでGUIアプリを作りました。
より一般的なNW.jsやElectronだとどうなるか作ってみます。