サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
買ってよかったもの
blog.nabeliwo.me
前置き 今僕が個人開発でアプリケーション作るときって以下のスタックはほぼ確定してるんですよね。 typescript express react react-router redux styled-components で、毎回そのスタックで SSR(Server Side Rendering) 対応の SPA(Single Page Application) の基盤作ってログイン機能作ってってやるわけですが、ここまでってどんなアプリケーションでもほぼ同じなんですよね。 なのでボイラープレートを作ろうと思いまして。 そしてついでなので解説記事でも書こうかなと思いまして。長すぎて何回かに分けたレベルだけれど興味ある人は読んでってくれよな。 よし、やるぞ!! 💪 (どんな性質のアプリケーションかの考慮もせず技術スタックだったり SPA + SSR だったりを決め打ちでやってることの是非はここ
最近はいろんなところで React アプリケーション(もちろん React とは限らないが)での SSR について語られることが多くなっていると感じる。 僕も個人の趣味プロダクトで Express サーバーで React コンポーネントをレンダリングするみたいなのをやったことがある。 で、その感想としてはとにかくめんどくさい。 SSR したい目的って SEO だったり OGP だったりみたいなクローラーに対しての表示か、もしくは初期表示の高速化の2つくらいだと思うんだけど、その目的に対する解答として SSR の自前実装はコスパ良いのかって考えるとなんとも微妙なところ。 特にネックなのが react-router で、バージョンが上がるたびに破壊的な変更が入ってアプリケーションが壊れるわけだけれど、その対応がクライアントのルーティングだけじゃなくて SSR の部分でもやんなきゃいけないのがと
prettier は JavaScript のコードフォーマッター。 そして prettier-eslint-cli を使うと勝手に .eslintrc の設定見つつフォーマットしてくれるので最高に便利だった。 そんなわけで ❤️ My Favorite Editor ❤️ である Visual Studio Code での快適なコードフォーマット環境を作るためにいろいろ調べたことをメモしました。 やったこと まずは普通にprettier使ってみる Visual Studio Code で保存時に自動フォーマット チーム開発のための git commit 時の自動フォーマット って感じ。 まずは普通にprettier使ってみる 必要なのは prettier-eslint-cli くらい。 あとは別途 eslint の設定を作っておく必要があるけどそこはまあお好きに。余談だけれど個人的に @
react-routerがv4になったことで既存のアプリケーションが完全に壊れて困っちゃった人。いると思います。 まあでも頑張ればv4でも動くようにできるしv3からマイグレートする系記事もぽつぽつと出ているので、詰んでしまったりv3に居残り続けるみたいな選択にはならないと思いますが。 しかしそこは今後もドラスティックなメジャーバージョンアップを行うことが予想されるreact-routerなので、この際別のルーティングライブラリを選択してもいいのではないか、みたいな。 そういうモチベーションで今回の記事を書いてみました。 そしてこの記事ではreact-routerの代わりにuniversal-routerを使います。 universal-router is… universal-router 名前の通りUniversalなルーターです。クライアントでもサーバーでも動くよっていうあれ。 git
このページを最初にブックマークしてみませんか?
『blog.nabeliwo.me』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く