GitHub - react-hookz/web: React hooks done right, for browser and SSR.You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
React.jsのSSRをTypeScriptで自前で実装してみた
この記事は？ ReactのSSRの理解を深めるために自前で実装してみました。 せっかくなのでその記録を記事にまとめました。 ※ App Router以前のPage Routerの内容です。 ReactRouterを使って複数ページのSSRをしている新しい日本語記事がなかったというのも記事化の理由の一つです。 この記事のソースコードはこちらです。 技術スタック フロントエンド React.js (v17) React-Router (v6) TypeScript Webpack バックエンド Express 作ったもの 初回リクエスト時 サーバーサイドレンダリング(SSR)してたHTMLをクライアントに返却。 サーバーから受け取ったHTMLにクライアントサイドでイベントリスナーを設定(hydrate) ページ遷移時 新しいページで必要な情報をクライアント側からWEB APIを叩いて取得。 ク
Cloudflare WorkersでSSRができると何が嬉しいか
Next.jsの対抗馬となりそうなReactのフレームワークでRemixのv1.0がリリースされました。 個人的にRemixでいちばん魅力を感じているのはCloudflare WorkersでSSRができるという点です（現状ではNext.jsをCloudflare Workers上でSSRするのは難しい）。これがなぜ嬉しいのかと言うと、パフォーマンスを出しつつ、低コストで運用でき、大量のアクセスに対しても低コストでスケールできそうだからです。 そもそもSSRをする必要ある？ ほとんどのWebサービスはSSRなしでSPAとしてビルドし、Cloudflare PagesやGitHub Pagesに静的ファイルをのせて動かせば十分だと思います。 例えば僕が先日作った個人開発のサービスもReact on Cloudflare Pagesの完全なSPAですが、SSRが必要な要素はまったくありません。
JavaScript が読み込まれる前でもWeb Applicationを動かす - from scratch
今回は最近取り組んでいる、 JavaScript が読み込まれる前であっても「ちゃんと」 Web Application が動作するように作る話をします。 Server Side Rendering における注意点と対策 BFFを使ってServer Side Rendering をすることに数年前から取り組んでいます。 まずはSSRをやる上での注意点と対策について紹介します。 SSRをすることはSEOのためだと思われがちですが、個人的にはSEOのためにしているわけではなく、 First View を向上するため（特に First Meaningful Paint を向上するため）にやっています。 First View SEOとSSRに関しては Google が最近出したこの記事の SEO Considerations 節が詳しいです。ここでは説明しません。 SSRをしない、Client S
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
