deve.K

エンジニアが未来を切り開く。

English

Reactでの静的Webサイト 制作


スポンサーリンク

react画像

本日はReactのコンポーネントを用いてWebサイトの制作についてになります。

とりあえずですが、私が適当に作成したのを貼ります

私は元バーテンダーなので、BARのサンプルサイトですが

DEMO

Bar&Filex ※サンプル

サイトのクオリティやデザイン性のクレームは受け付けておりません。

私は※Webサイト制作エンジニアではありません

当ブログでReactを学ばれてる方に

感じてもらいたのは、ページ遷移なんです。

通常のDOMでのレンダリングでWebサイト制作してる方々はこれをご自身で体感してるのかが、私には疑問があります。

私のだと、参考にならないと思いますが

調べればReactで構築されたWebサイト沢山あるので 『デザイン性』、『レスポンシブ』とか色々気になるかもしれませんが、それは一旦ここでは置いときましょう!

SEO対策』として重点的に考えてみて下さい。

色々な箇所をクリックしたり、リンクで内部に飛んでみて下さい。

その後、ご自身で作成したWebサイトもしくはどこかの通常のDOM描画Webサイトを確認下さい。

『なんだが遅いな…。』って

少しページのロード時に違和感を感じるはずです。

つまり何が言いたいのかですが

Reactはユーザーに待たせるという言葉を知りません

一流のUXです。ビルド時に、各ページを静的HTMLファイルとしてレンダリングします

それほど通常のDOMより非常に高速なビルドとパフォーマンスとなっております。

シングルページアプリケーションの場合

必要なのは最初のindex.htmlをロードすることだけです

React Static

例えばReact Staticでは、データベースを利用する必要もなく、ビルド時に静的なHTMLファイルとCSSファイルを生成します。

なのでReactと掛け合わせればSEO対策も完璧です。

React Static(SSG)はReact製のWebサイトが作成できる

静的サイトジェネレータとなります。

フレームワーク??

SSR』での『Next.js』はその部類ですが、SSG(Static Site Generator)はどちかといえば、便利ツールに近いかもしれません。

Reactを強化する便利ツールと思って下さい。

Wordpress Webサイトの静的バージョンを生成できるようにもなりますね。


通常のDOMサイトやCMSより速い??

CMSはそもそもですが Webサイトの作成から管理・更新までをスムーズに行うための便利なツールとなります。

なので専門的な知識や技術がない人でもWebサイトを作成し運用できます

ですが、知識もあり技術があってWebサイト制作してるならもったいないです。

CMSといえば、WordPressですよね

WordPressはユーザーからのリクエスト時点で取得したデータを元にして動的にWebページ(HTML)を生成します

WordPressではデータベースが必要ですが、先程も言いましたがReact Staticであればデータベースは必要としません

コンパイル時にHTMLファイルを生成しリクエストがきたらそのままファイルを返すだけとなります。

ここが重要となります。

『SSG』は事前にHTMLなどのファイルを生成しておくという点です。

貴方が、WordPressなどのサイトにリクエストした場合

SSGであれば『いつでもいいですよ!とっくに準備完了してますんで』という感じです。

なので通常のWordPressなどのサイトよりも高速なんです。

SEO対策に特化してるのがReactでの『SSG』です。

『SSG』はデータ依存もありません、必要に応じてどこからでもデータをサイトに提供します。

静的サイトジェネレーターの種類はものすごい数がありますが

React用の静的サイトジェネレーターはそれぞれ、『プラグイン』『拡張機能』を使用してカスタマイズ、または拡張できるため、ほとんどのニーズに対応が可能です。 通常のDOMよりReactDOMのが高速な理由を詳しく知り合い方はこちらへどうぞ。

dev-k.hatenablog.com

私、個人的には通常のDOMでの描画ではなく、React『SSG』やReactで管理する『仮想DOM』でのコンポーネント静的Webサイトを制作した方がメリット多い気がしますが

ですが、ここに関しては結構奥が深いです。

その分、学習していかなければいけませんから

元々、ある程度の知識と技術がなければ、大変かも知れません。

専門的な知識と技術力があり、『SPA』で構築してみたい方はこちらへどうぞ

dev-k.hatenablog.com

ですがReactはアプリケーション用のライブラリなのでそこは勘違いしないようにお願いします。

どちらでも開発可能という事ですね。

以上でReactでの静的Webサイト構築の話しは終わりたいと思います

最後までお読みになっていただきありがとうございます!!。

プライバシーポリシー