العرض من الخادم (SSR) بقوالب Jinja

طريقان إلى نفس الفكرة

قبل أن تبدأ

الفكرة الجوهرية

1القالب: نص فيه فراغات

القالب ملف HTML فيه أماكن للبيانات. محرّك القوالب يستبدل كل مكان بقيمته. هذا مثال بالمكتبة القياسية لترى الفكرة عارية، ثم نرى Jinja.

from string import Template
from html import escape

page = Template("<h1>$title</h1>\n<ul>\n$items</ul>")
menu = ["Espresso", "Latte", "<script>alert(1)</script>"]

items = "".join(f"  <li>{escape(name)}</li>\n" for name in menu)
print(page.substitute(title="Menu", items=items))

2Jinja: حلقات وشروط ووراثة

{{ }} لطباعة قيمة، و{% %} للتحكّم. القالب الأساسي يعرّف الهيكل والكتل، وكل صفحة تملأ الكتل فقط.

{# templates/base.html #}
<!doctype html>
<html lang="ar" dir="rtl">
<head><title>{% block title %}مقهى{% endblock %}</title></head>
<body>
  <nav><a href="/">الرئيسية</a></nav>
  <main>{% block content %}{% endblock %}</main>
</body>
</html>

{# templates/menu.html #}
{% extends "base.html" %}
{% block title %}القائمة{% endblock %}
{% block content %}
  <h1>القائمة</h1>
  {% if drinks %}
    <ul>
    {% for d in drinks %}
      <li>{{ d.name }}: {{ d.price }} ر.س</li>
    {% endfor %}
    </ul>
  {% else %}
    <p>القائمة فارغة اليوم.</p>
  {% endif %}
{% endblock %}

3Flask: المسار يعرض القالب

المسار يجلب البيانات ويمرّرها لـ render_template. الرد HTML كامل بكود 200.

from flask import Flask, render_template, abort

app = Flask(__name__)
DRINKS = {1: {"name": "Latte", "price": 14}, 2: {"name": "Mocha", "price": 16}}

@app.get("/menu")
def menu():
    return render_template("menu.html", drinks=list(DRINKS.values()))

@app.get("/drinks/<int:drink_id>")
def drink(drink_id):
    item = DRINKS.get(drink_id)
    if item is None:
        abort(404)
    return render_template("drink.html", drink=item)

# flask --app app run --debug

4متى SSR ومتى تطبيق صفحة واحدة؟

SSR للمحتوى الذي يُقرأ ويُبحث عنه: متاجر، مدونات، صفحات منتجات، لوحات إدارة بسيطة. تطبيق الصفحة الواحدة (SPA) للأدوات شديدة التفاعل: محرّر، خريطة، لوحة رسوم حية. الأطر الحديثة مثل Next.js تخلط الاثنين: الخادم يرسم أولًا ثم React يتولّى التفاعل.

مثال محلول

المسألة: صفحة منتجات بـ React تظهر بيضاء ثانيتين على جوال بطيء، ومحرك البحث لا يرى الأسماء. التحليل: المتصفح يحمّل JS ثم يطلب JSON ثم يرسم. الحل: اعرض الصفحة من الخادم بقالب يملأ الأسماء والأسعار، فيصل HTML جاهزًا. الأزرار التفاعلية (أضف للسلة) تبقى JS صغيرًا فوق الصفحة.

خرافة مقابل حقيقة

اختبر فهمك

بطاقات مراجعة سريعة

تحقق من فهمك