پشت پرده‌ی تفاوت Query string و Hash fragment در URL

چند وقت پیش یه اتفاق ساده ولی جالب برام افتاد. داشتم یه لینکی رو بررسی میکردم و دیدم دوتا URL هستن که ظاهرشون یکیه، ولی یه کوچولو فرق دارن:

https://example.com/page?panel_view=true

و

https://example.com/page#/?panel_view=true

ظاهرشون خیلی شبیه به همه، ولی وقتی دقیقتر نگاه میکنی، متوجه میشی قضیه یه کم عمیقتره. بیاید با هم ببینیم این تفاوت ریز چه تاثیری میتونه توی دنیای فرانتاند داشته باشه.

فرق بین Query String و Hash Fragment چیه واقعاً؟

وقتی یه URL رو باز میکنی، فقط بخشی از اون واقعاً به سرور فرستاده میشه.
اینجاست که فرق اصلی مشخص میشه:

✨ خلاصهش اینه:

• هر چی قبل از # باشه → میره سمت سرور.
• هر چی بعد از # باشه → فقط توی مرورگر خونده میشه، سرور هیچخبری ازش نداره.

مثلاً اگه یه اپلیکیشن تکصفحهای (SPA) مثل React یا Vue داشته باشی، این بخش # میتونه خیلی مهم بشه. چون اونجاست که فرانتاند تصمیم میگیره کاربر چی ببینه.

چرا اصلاً از # استفاده میکنن؟

قبلاً از # برای اسکرول کردن به یه بخش خاص توی صفحه استفاده میکردیم (مثلاً #about-us).

ولی الان توی اپلیکیشنهای مدرن، ازش برای مدیریت مسیر (routing) استفاده میکنیم، بدون اینکه صفحه دوباره لود بشه. مثلاً توی یه اپ تکصفحهای ممکنه #/login یا #/profile داشته باشی که فقط ظاهر صفحه رو تغییر میده، نه خود URL اصلی رو.

کدوم یکی بهتره؟ آیا فرقی دارن؟

واقعیت اینه که بستگی داره اپلیکیشنت چطور ساخته شده باشه:

• اگه اپ با # کار میکنه (یعنی مسیرهاش با هش تنظیم شدن)، اون نسخهی هشدار لازمه.
• ولی اگه سرور با query string کار داره، پس اون یکی نسخه باید استفاده بشه.

گاهی اوقات اشتباه در انتخاب بین این دوتا باعث میشه یه صفحه درست باز نشه یا حتی اطلاعات تحلیلی (analytics) ناقص بشن. پس حتی همین تفاوت کوچیک میتونه کلی دردسر درست کنه.

وقتی کش وارد ماجرا میشه…

بذار یه ذره فنیتر بشیم:

🧠 مرورگرها و CDNها (مثل Cloudflare) به این دوتا بخش URL رفتارهای مختلفی دارن:

• Query string (?panel_view=true) باعث میشه URL متفاوت به نظر برسه. یعنی اگه panel_view=true عوض بشه، مرورگر اون رو یه URL جدید میدونه و ممکنه دوباره از سرور درخواست بفرسته.
• Hash fragment (#something) اصلاً تاثیری روی کش نداره. یعنی چه #about باشه، چه #hello، مرورگر فکر میکنه هنوز همون صفحهست.

💡 اگه میخوای از کش عبور کنی یا محتوای متفاوتی رو از سرور بگیری، query string رو انتخاب کن.
اگه فقط یه رفتاری سمت کلاینت بخوای، هش کارت رو راه میندازه.

چطوری این مقادیر رو توی Next.js بخونیم؟

حالا برسیم به قسمت کاربردی ماجرا؛ توی پروژههای Next.js معمولاً با هردوش طرفیم:

👉 گرفتن query string خیلی سادهست:

import { useRouter } from 'next/router';

const Page = () => {
  const router = useRouter();
  const { panel_view } = router.query;

  return <p>panel_view: {panel_view}</p>;
};

Next خودش اینا رو میفهمه و لازم نیست کار خاصی بکنی.

👉 گرفتن hash fragment یه کوچولو فرق داره:

چون این بخش اصلاً به سرور نمیرسه، باید از .hash استفاده کنیم:

import { useEffect, useState } from 'react';

const Page = () => {
  const [hash, setHash] = useState('');

  useEffect(() => {
    setHash.hash);
  }, []);

  return <p>مقدار هش: {hash}</p>;
};

نکته: چون window فقط سمت کلاینت وجود داره، این کد حتماً باید داخل useEffect باشه.

جمعبندی: گاهی جزئیات کوچیک، فرق بزرگی میسازن

ما معمولاً عادت داریم URLها رو فقط به چشم یه لینک ببینیم. ولی حقیقت اینه که همین جزئیات کوچیک مثل ? یا # میتونن مسیر اجرا، کش شدن، نمایش محتوا یا حتی تجربه کاربر رو تغییر بدن.

دفعه بعدی که خواستی یه لینک بسازی، حتماً بهش دقت کن. شاید همون # کوچیک، یه اتفاق بزرگ پشتش باشه. 😉

تا حالا شده به خاطر همین تفاوتهای ریز، یه باگی بخوره توی پروژهت؟
بیایید تو کامنتا با هم در موردش گپ بزنیم، خوشحال میشم تجربههاتون رو بشنوم!