מתי וורדפרס ללא ראש הגיוני: REST API + אינטגרציית Next.js

מתי WordPress ללא ראש (Headless) מוצדק?

כבר יש לכם אתר על WordPress, אבל הלקוחות מתלוננים על טעינה איטית, והעורכים רגילים לפאנל הניהול. מעבר ל-CMS אחר מסכן אובדן תוכן ומיקומי SEO. WordPress ללא ראש (Headless) שומר על הפאנל לניהול תוכן בעוד שהחזית נכתבת מחדש על טכנולוגיה מודרנית (Next.js, React, Vue). זה נותן מהירות SPA, גמישות רכיבים, ועורך מוכר. אל תבחרו ב-Headless אם האתר נבנה מאפס ואין דרישות מחמירות — WordPress רגיל פשוט וזול יותר.

איך אנחנו עושים את זה: מקרה בוחן אמיתי

לפרויקט אחד, השתמשנו ב-WordPress + Next.js 14 עם ISR. נתונים ראשוניים: 10,000 פוסטים, 5 קטגוריות, שדות ACF לפורטפוליו. בעיה: דפים נטענו ב-4 שניות (LCP > 4s). לאחר אינטגרציית headless, LCP ירד ל-1.2s, TTFB מ-800 ל-120ms. עומס השרת ירד פי 3 (מ-8 ל-3 בקשות לדף).

שלבים מרכזיים:

• הגדרת REST API — הופעל _fields כדי למזער תגובה, הושבתו נקודות קצה שאינן בשימוש.
• CORS ואבטחה — הותר רק דומיין החזית, נוסף אימות Origin.
• ACF ב-API — דרך register_rest_field נוספו שדות מטא ישירות לתגובה.
• לקוח API של Next.js — fetch יחיד עם ISR revalidate.
• אימות מחדש לפי דרישה באמצעות Webhook — כאשר פוסט מתפרסם, WordPress שולח POST אל /api/revalidate ב-Next.js.

תוצאה: מהירות טעינת הדף עלתה ב-70%, תנועת SEO גדלה ב-25% בחודש אחד.

יישום טכני: מ-REST API לאימות מחדש לפי דרישה

WP REST API: נקודות קצה בסיסיות ואופטימיזציה

REST API של WordPress מובנה מאז גרסה 4.7. כתובת בסיס: https://site.com/wp-json/wp/v2/. קריטי להשתמש בפרמטר _fields — כברירת מחדל התגובה מכילה עשרות שדות, רובם מיותרים.

# Список постов с нужными полями
GET /wp-json/wp/v2/posts?_fields=id,title,slug,date,excerpt,featured_media&per_page=10

איך להגדיר CORS עבור WordPress ללא ראש?

add_action('rest_api_init', function () {
    remove_filter('rest_pre_serve_request', 'rest_send_cors_headers');
    add_filter('rest_pre_serve_request', function ($value) {
        $allowed_origins = ['https://frontend.site.com', 'http://localhost:3000'];
        $origin = $_SERVER['HTTP_ORIGIN'] ?? '';
        if (in_array($origin, $allowed_origins, true)) {
            header("Access-Control-Allow-Origin: {$origin}");
            header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
            header('Access-Control-Allow-Headers: Authorization, Content-Type');
        }
        return $value;
    });
}, 15);

הרחבת REST API: ACF ונקודות קצה מותאמות אישית

add_action('rest_api_init', function () {
    register_rest_field('portfolio', 'acf', [
        'get_callback' => function ($post) {
            return get_fields($post['id']);
        },
        'schema' => ['type' => 'object'],
    ]);

    register_rest_route('app/v1', '/home', [
        'methods' => 'GET',
        'callback' => function (WP_REST_Request $request) {
            return rest_ensure_response([
                'hero' => get_fields(get_option('home_hero_page_id')),
                'featured' => array_map(
                    fn($p) => [
                        'id' => $p->ID,
                        'title' => get_the_title($p),
                        'slug' => $p->post_name
                    ],
                    get_posts(['post_type' => 'portfolio', 'posts_per_page' => 3])
                ),
            ]);
        },
        'permission_callback' => '__return_true',
    ]);
});

אינטגרציה עם Next.js: ISR ומצב תצוגה מקדימה

const WP_API = process.env.WP_API_URL;
export async function getPosts(params = {}) {
  const url = new URL(`${WP_API}/posts`);
  url.searchParams.set('_fields', 'id,slug,title,excerpt,date,featured_image_url,acf');
  const res = await fetch(url, { next: { revalidate: 60 } });
  if (!res.ok) throw new Error(`WP API error: ${res.status}`);
  return { posts: await res.json(), total: Number(res.headers.get('X-WP-Total')) };
}

עבור מצב תצוגה מקדימה, הוסיפו נתיב API # Список постов с нужными полями GET /wp-json/wp/v2/posts?_fields=id,title,slug,date,excerpt,featured_media&per_page=10 שמפעיל draftMode ומפנה לפוסט היעד.

אימות מחדש לפי דרישה: WordPress → Next.js

כאשר פוסט נשמר, WordPress שולח POST אל add_action('rest_api_init', function () { remove_filter('rest_pre_serve_request', 'rest_send_cors_headers'); add_filter('rest_pre_serve_request', function ($value) { $allowed_origins = ['https://frontend.site.com', 'http://localhost:3000']; $origin = $_SERVER['HTTP_ORIGIN'] ?? ''; if (in_array($origin, $allowed_origins, true)) { header("Access-Control-Allow-Origin: {$origin}"); header('Access-Control-Allow-Methods: GET, POST, OPTIONS'); header('Access-Control-Allow-Headers: Authorization, Content-Type'); } return $value; }); }, 15); :

export async function POST(req: Request) {
  const { secret, slug } = await req.json();
  if (secret !== process.env.REVALIDATE_SECRET)
    return Response.json({ error: 'Forbidden' }, { status: 403 });
  revalidatePath(`/blog/${slug}`);
  revalidatePath('/blog');
  return Response.json({ revalidated: true });
}

מטמון וביצועים

REST API אינו נשמר במטמון כברירת מחדל. אנו מוסיפים Redis Object Cache או מטמון Nginx לבקשות אנונימיות. זה מפחית TTFB ב-30–50% ועומס מסד נתונים פי 2. אם יש דרישות מהירות גבוהות, אנו משתמשים ב-Edge Cache (Cloudflare) עם purge דרך webhook.

מה כלול ולוחות זמנים

• הגדרת Headless (CORS, ACF, נקודות קצה) — 6–8 שעות.
• אינטגרציית Next.js (לקוח, ISR, תצוגה מקדימה) — 1–1.5 ימי עבודה.
• Webhook ואימות מחדש לפי דרישה — 3–4 שעות.

אנו מספקים אחריות ל-3 חודשים על הקוד ותמיכה חינמית לאחר הפריסה. עם ניסיון של 10+ שנים, שילבנו WordPress בעשרות פרויקטים — מדפי נחיתה ועד פורטלים עם מיליוני מבקרים. צרו קשר — נעריך את הפרויקט שלכם תוך יום אחד.

השוואה: Headless לעומת WordPress מסורתי

WordPress ללא ראש הוא בחירה הגיונית כאשר ביצועים ושליטה בחזית חשובים. לא מתאים אם התקציב מוגבל או חסרים מפתחי חזית. קבלו ייעוץ: נעזור לכם לבחור את הארכיטקטורה ולהעריך את הפרויקט שלכם ללא עלות. הזמינו אינטגרציה — תוצאות ראשונות תוך יומיים.

משאבים נוספים: REST API ו-ISR.