🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

4回答

3580閲覧

SSGを採用するのはどのようなアプリなのでしょうか。

jjj001

総合スコア55

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2021/01/09 11:21

編集2021/01/09 11:31

SSGについて、疑問な点があり質問させて貰いました。
Qiita記事を読んでいたのですが、「SSR」との違いについては、サーバーサイドレンダリングが不要であり、SSRよりも高速にレスポンスを返せるメリットがあることが分かりました。
少々、お聞きしたいのは以下の部分なのですが、

極端な話、最初から自分で HTML ファイルを書いてそれを配信することと何が違うのかと思うかもしれません。

こちらはDBからデータを取得し表示する必要があった場合、直書きのHTMLでは実現出来ないとの説明がありました。
確かにその通りなのですが、SSGの場合、動的に表示部分を変更するなどの場合は、再度ビルドしなければならず、単純にレンダリングするよりも時間がかかってしまうのではないかと思います。その為、そのような機能を組み込む場合は、現実的にはSSG向きではないかと思っております。
しかし、そうであるとすると、アプリをデプロイするタイミングでビルド -> データベースを参照し、HTMLを構築(レンダリング) -> 配信するといったようなアプリしか思いつかないのですが、具体的にどのようなサイトではHTMLの直書きよりもメリットがあるのかが分かりません。
例としては、ブログアプリに向いていると紹介されていることがありますが、ブログは動的な処理が必要ないと思いますし、そうなりますと、HTMLの直書きで良いのではないかとも思ってしまいます。
どなたか、こちらの疑問につきまして、少々ご助言の程頂けましたら幸いです

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2021/01/09 22:23 編集

SSG を略語で書いてますが、知りたいのは「Generation」ですか?それとも「Generator」? まぁ、まずは触ってみて質問してみては?
guest

回答4

0

別に全てをssgにする必要はないから

商品はほぼ固定で決済部分だけapiみたいな例もありえると思いますよ

ブログで言うといいね機能部分はapiでブログは静的とか

もしくは、ドキュメントなどapiが落ちて困るところ、あまり変動のないところのみ静的生成させるとか

投稿2021/02/21 16:57

taka-5683

総合スコア18

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

具体例ですが道内の最新感染動向 | 北海道 新型コロナウイルスまとめサイト 等これ系のサイトはSSGでできています。
情報が揃った段階で(おそらく1日数回?)反映するため、リアルタイム制が低く、反面、アクセス数が多いためです。

他にもドキュメント系サイトは更新頻度が低く、アクセス数が多いため、SSGで生成されますね
(Sphinxとか)

投稿2021/01/10 05:36

mikkame

総合スコア5036

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

jjj001

2021/01/10 07:10 編集

ご回答ありがとうございます。 なんとなくイメージが掴めた気がします。 ご回答に貼って頂きましたサイトは、例えば情報が更新された際に、情報をデータベースに反映、再ビルドを行い、サイトの更新を行うといった形になりますでしょうか...?
mikkame

2021/01/10 07:10

そういった感じになります。 情報をgitにpushして、github Actionsで自動ビルド、自動デプロイという感じだと思います。
jjj001

2021/01/10 07:22 編集

なるほどです。 自分が引っかかっているのは、どうも、例えば、「いいね数」なる項目があり、「いいね」ボタンを押した後に、「いいね数」が更新される場合、「いいね」ボタンを押した後に、更新(再ビルド)がかかってしまうのかどうかといった所が少々疑問ではあるのですよね
mikkame

2021/01/10 07:25

微妙な所ですね。 例えば「いいね」だけであれば重要度が低い情報なので、非同期で読み込んだり、あとから計算したりする事もあると思います。これは。静的ページにGoogle Analyticsを埋めて、動的にアクセス数を取得する事を考えると近いような気がします。 (記事情報だけはCDNで配り、いいね情報はJSで動的に読み込む等) ただ、これはSSGとSPA?の折衷案です。 そもそもエンドユーザーアクションでリビルドが走るのは悪手だと思います。 SSGの考え方としては、HTMLを配るだけのサーバに任せたいかどうかで切り分けた方が良いと思います。(その方がコスト安い)
jjj001

2021/01/10 07:51 編集

非同期でDBなどとアクセスし読み込むとなると、SPAを使用することになりますし、SSGとSPAを組み合わせるといった手段もありな訳ですね。 > そもそもエンドユーザーアクションでリビルドが走るのは悪手だと思います。 こちら、まさに疑問な部分でした。 ユーザーの操作により、毎回ビルドが走るというのは、ビルドされている間は他のユーザーもアクセスが出来ない?ですし、ちょっと現実的にはないのかなとは思っています。
mikkame

2021/01/10 08:15

厳密にはSPAを使用するわけではないのですが・・・。SPAみたいに〜って感じですね。 ドキュメントのように更新が管理者より行われる場合にSSGが向いています。
jjj001

2021/01/10 08:55

ありがとうございます! 勉強になりました!
guest

0

例としては、ブログアプリに向いていると紹介されていることがありますが、ブログは動的な処理が必要ないと思いますし、そうなりますと、HTMLの直書きで良いのではないかとも思ってしまいます。

こういう疑問が出てくるということは、ブログ、実際に作ってみた経験がないのでしょうか?

適当な記事ページを見てみるがいいです。ブログにもサイトによって微妙に性格の違いがあるものの、おおむね次のような共通点があることがわかるはずです。

  • 記事の構造は結構複雑 -- ヘッダがあってサイトのバナーがあって記事のタイトルがあってサイドメニューがあってカテゴリの一覧があって本文があってフッターがあって……ソースを解析するまでもなく、その構造はかなり複雑なものであることがわかるでしょう。
  • そして記事の構成要素の少なからずがサイト内の全記事で共通 -- あるいはカテゴリごとに共通。記事ごとに異なる要素は限定的な一握りの数の項目に限られています。
  • いちど更新したら暫くは内容を変更する必要がない。-- コメント欄をもうけてリアルタイムですぐにレスを反映したいというケースはこれに該当しませんが、私が見る限り、もうブログにコメント欄を設けること自体が流行っていないですし、それらも1日1回とかのペースでまとめて更新(コメントスパムもチェックしないといけないし)しているケースが大半です。要するにおおむね固定的です。

こういうものを、記事を1ページ追加するごとにいちいち「HTMLの直書き」で対処するのは大変だとは思いませんか? バカバカしいとは思いませんか? 型紙を用意しておいて、記事ごとの本文データを流し込んで本番用HTMLファイルを作る。お客さんたちにはこうして一度につくったHTMLファイルをただ見せるだけ。こういうスタイルで対処するほうが明らかに効率的です。SSGとはこの過程を省力化するものに他なりません。

SSGは、リアルタイムで絶えずコンテンツを変化させていく必要がないならばあらゆるサイトに応用可能です。ブログのみならず、ウィキペディア的なもの、企業紹介、プロフ、ポートフォリオなど、その適用範囲は幅広く、WordPressなんぞよりよほど研究のしがいがある枠組みだと思いますよ。

投稿2021/01/09 20:43

KojiDoi

総合スコア13692

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

jjj001

2021/01/10 07:40

ご丁寧にご回答頂き、ありがとうございます。 他の方々にもご助言頂き、大分イメージ掴めてきました。 例えば、何かしらのアプリで「いいね数」なる項目があり、「いいね」ボタンを押した後に、「いいね数」が更新される場合、「いいね」ボタンを押した後に、更新(再ビルド)がかかってしまうのかどうかといった所が疑問でした。 こちらは、「ユーザー」のアクションによって毎回ビルドがかかってしまうというのは、更新に時間がかかってしまいますし、現実的ではないのではないかと思ったのですよね
KojiDoi

2021/01/10 07:49

>「ユーザー」のアクションによって毎回ビルドがかかってしまう あくまでもhtmlファイルを貯めおくための仕組みですから、ユーザーのアクションに即時応答するようなシステムには不向きです。やるとすれば「いいね」の更新が反映されるのは毎日午前0時の1回のみみたいな作り方になるでしょうかね。
jjj001

2021/01/10 08:00 編集

> やるとすれば「いいね」の更新が反映されるのは毎日午前0時の1回のみみたいな作り方になるでしょうかね SSGで動的な機能をつけるとなると、こういった仕様になってくる訳なのですね。 大変、勉強になりました。
guest

0

SSG使った事ないですが、

SSGを採用するのはどのようなアプリなのでしょうか。

  • リクエスト毎にレスポンスを変える必要が無い
  • リクエスト数/時間(秒)が物凄く多い等の理由でレスポンスの速さ(=サーバーの処理時間の短縮=帯域の)が極めて重要

の二つの要件を満たす必要がある時だけかなと

具体的にどのようなサイトではHTMLの直書きよりもメリットがあるのかが分かりません。

HTMLの直書きで良いのではないかとも思ってしまいます。

1年毎日書いたとして365枚のhtmlですが、面倒では無いですか?普通に修正するだけでも面倒だと思うし、共通の表記の修正、また1枚のhtml修正が他の364枚に影響を及ぼす場合も365枚全てに修正を加える必要があります。
それが面倒で無いなら直書きすれば良いと思います。直書きなら静的htmlを出力する処理も不要ですからね。

投稿2021/01/09 13:48

hentaiman

総合スコア6426

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

jjj001

2021/01/10 08:02

ご回答ありがとうございます。 >共通の表記の修正、また1枚のhtml修正が他の364枚に影響を及ぼす場合も365枚全てに修正を加える必要があります。 こちら、確かにDBなどのデータから引っ張ってきて、再ビルドを行えばその問題は解消されますよね
hentaiman

2021/01/10 09:12

??? 失礼ですが、返信コメントの内容からしてSSGの事をほとんど調査していない?または調査していても全く理解していない? 試してから質問し直した方が良いんじゃないですかね?
jjj001

2021/01/10 10:17

他、回答者の方のご回答で大方理解することが出来ました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問