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

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

詳細はこちら
Vue.js

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

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

React.js

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

Q&A

解決済

2回答

1071閲覧

Nuxt.js(参考までにNext.jsでも)で、1つのアプリをSSGとSPAを両立させることはできるのか?

nieve

総合スコア33

Vue.js

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

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

React.js

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

0グッド

0クリップ

投稿2020/11/28 07:42

編集2020/11/28 07:49

Nuxt.jsを使って構築しようとしている、
図のような構成のサイト(Web APP)があったとします。
会員登録があるサイトで、ログインしているかの状態判定をして、

ログイン状態ヘッダーの表示
ログインボタン
ユーザー名・マイページへの導線

みたいな表示わけをサイト全体通してやりたいです。

という前提で、1つのサイト(Web App)で
一部のページ群をStaticSiteGenerateして各ページのHTMLを生成、
一部のページをSPAとして書き出す

みたいなことって、考えうるんでしょうか?

なぜそんなことしたいかというと、、、

  • PageA・PageB: 一度作るとほぼ固定内容(一部Ajaxとかでロードしたいけど)で、検索に対応したり、訪問者への表示を早くしたいページ。
  • PageC・PageD: 動的サイトで、どんどん増える&どんどん書き換えが起こる(利用ユーザーページとか、CGMみたいな)

のイメージだからです。

イメージ説明

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

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

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

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

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

mikkame

2021/01/20 10:52

SSRにしてCDN側のパターンマッチで高速化したいページを強制キャッシュさせるのがよさそうですね
nieve

2021/04/27 10:08

ありがとうございます! アプリの作りというよりは、その形がよさそうです。
guest

回答2

0

自己解決

アプリの設計としては無い。
サーバー側のキャッシュ設定などでうまいことやろう。
という結論です。

投稿2021/04/27 10:09

nieve

総合スコア33

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

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

0

Next.js の話になりますが可能です。URL からパラメータを受け取って動的に SPA として動くアプリケーションを自動生成するようになっています。まさしくおっしゃっているような利用用途で使われているかと思います。Nuxt.js については、残念ながら触ったことがないので憶測でしか言えませんが、Next.js より動的なことができる味付けがされていると聞きますし、より柔軟に可能なのではないでしょうか。まずは実際に触ってみるのが理解への近道です!

投稿2020/12/17 04:42

A_kirisaki

総合スコア2853

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

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

nieve

2021/01/20 03:22

コマンドが`build`か`start`かで、その中身のアプリケーション全体に動くので、やっぱり同じアプリないで両立ってないですよね。。。 別アプリにして、`build`のdist先を`start`で動くアプリに向けるとできるのかな~? 今回調べてたきっかけの企画は、全体を`start`で動かすものでOKになったので、今回はこれでクローズしようかと。
A_kirisaki

2021/01/20 10:45

すみません、質問を誤解していたのですが「別々に」書き出したかったのですね。図を見る限り同じアプリケーションに見えたので SSG 部分と SPA 部分に分けることは可能かという質問かと思っておりました。
nieve

2021/04/27 10:07

ありがとうございます! > 質問を誤解していたのですが「別々に」書き出したかったのですね いや、一緒に書き出したかったのです。 が、どう書き出されるかが、全体設定&コマンドに依存しているので、 どうにか1つのアプリ内で設定を分けたりできないのかな? という意図でした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問