• Model, View, Controllerの 3 つをベースに考える構成
• 昔から使われている Web アプリケーション構成
• フレームワークが 1 つで完結して工数が少なくできるため、社内ツールは MVC 構成も多いかった

• テンプレートにデータを埋め込んで、ユーザに返す
  • フレームワークによってはMVCでは無くMTV(Template)だったりMVVMだったりするが基本は同じ

1. ユーザーはサーバへリクエストを送り、サーバが対応したページをテンプレート経由などでレスポンスとして返却
   • 必要なデータはサーバ側で収集し、テンプレートに埋め込む
2. ブラウザが受け取ったレスポンスを表示する

https://docs.djangoproject.com/ja/5.0/intro/tutorial03/#write-views-that-actually-do-somethingより。DjangoはMTVのフレームワークだが基本は同じ。

# polls/views.py

from django.http import HttpResponse
from django.template import loader

from .models import Question


def index(request):
    latest_question_list = Question.objects.order_by("-pub_date")[:5]
    template = loader.get_template("polls/index.html")
    context = {
        "latest_question_list": latest_question_list,
    }
    return HttpResponse(template.render(context, request))

# polls/templates/polls/index.html

{% if latest_question_list %}
    <ul>
    {% for question in latest_question_list %}
        <li><a href="/polls/{{ question.id }}/">{{ question.question_text }}</a></li>
    {% endfor %}
    </ul>
{% else %}
    <p>No polls are available.</p>
{% endif %}

• context でテンプレートに埋め込む値を設定
• view(index.html) で変数が展開されて HTML となりクライアントに返却、ブラウザで HTML を表示

• サーバ 1 台でバックエンド・フロントエンドまでレンダリングするので、簡単にデプロイできる
  • クライアントでの高度な操作が機能要件になければ MVC でも良い
    • 社内ツールであるとすれば jQuery + Bootstrap で最低限カバーしたもの

• リッチな操作は生の JavaScript や jQuery では厳しい
  • バックエンドのコードとは別に JavaScript クライアントサイドで動くので、 JavaScript のデバッグも困難
    • こうなったら素直にモダンフロントエンドのフレームワークを使うべき
• コンポーネント単位（後述）で無いので、 CSS がリッチだと CSS 設計は工夫しないと複雑度が増す
  • もしモダンフロントエンドが使えないのであれば以下ライブラリで対応する：
    • https://getbootstrap.jp/
    • ScSS (SaSS)

使いたい言語で主流なものを使えばよい。

LAMP 環境と言われていたものも入る。

• https://docs.djangoproject.com/ja/5.0/
  • MVC で社内だとおそらく主流
• https://msiz07-flask-docs-ja.readthedocs.io/ja/latest/
• https://laravel.com/
• https://rubyonrails.org/

レンダリングをサーバ側で行うかクライアント側で行うかは、サーバを用意できるかどうかやセキュリティ要件などの条件に合わせて使い分けるが、実際にはシステムの構成や制約によって選べる手法がほぼ決まってしまうことも多い。Ajax の登場で JavaScript によるページ遷移を行う SPA(Single-Page Application) が生まれて以降レンダリング手法は多様化してきたため、ここからは CSR による SPA を皮切りに各手法を紹介していく。

https://aws.amazon.com/jp/blogs/news/ssg-vs-ssr-in-next-js-web-applications-choosing-the-right-rendering-approach/