احتمالا شما کم و بیش درباره نحوه کار وب اطلاعاتی دارید. به طور خلاصه میشه گفت مرورگر درخواستی را ارسال می کند، سرور پاسخی را برمی گرداند. اگر یک صفحه وب درخواستی باشه که از سمت مرورگر ارسال میشه، پاسخ سرور حاوی کد HTML است که سپس توسط مرورگر برای ارائه وب سایت استفاده می شود.
اما کد HTML که بازگردانده می شود چگونه در سرور قرار می گیرد؟ آیا برای هر درخواست این کد تولید می شود؟ یا این کد HTML از پیش تولید شده است؟ (یعنی صفحات HTML نهایی روی سرور بارگذاری شده اند)
در پاسخ به این سوال باید گفت که سه گزینه برای رندر گرفتن از وبسایت ها وجود داره که البته در هر سه کدهای HTML مورد نیاز هست. احتمالا شما با صفحات وب پویا یا داینامیک و صفحات استاتیک به خوبی آشنایید، اگر هم نیستید در ادامه به طور مختصر با این صفحات آشنا میشیم. اما گزینه سوم که جذابیت بسیاری داره و در این مقاله بیشتر به اون می پردازیم صفحات SPA که مخفف Single Page Applications هستند.
به طور خلاصه صفحات وب داینامیک به کمک یک زبان برنامه نویسی تحت سرور مثل PHP یا NOD JS و یک پروسسور داده صفحات HTML را به صورت پویا در سرور ایجاد می کنند.
این به این معنی است که وب سایتی که مشاهده می کنید به صورت پویا در سرور ایجاد شده است. منظور من از "وب سایت" البته کد HTML است و کدهای استایل و اسکریپت هایی که به آن پیوست شده است.
خیلی از برنامه نویسان وب کار خودشون رو با صفحات وب استاتیک شروع می کنند. در این صفحات، کدهای HTML از قبل نوشته میشه و در کنار فایل های استایل و اسکرپت ها قرار میگیره. بعد از کامل شدن کدها، همه اون ها روی سرور به صورت آماده قرار میگیره، بر خلاف صفحات داینامیک که در سرور تولید میشن!
اما وبسایت تک صفحه ای یا اپلیکیشن تک صفحه ای چیه؟ اصلا چرا نام این نوع از وبسایت با اپلیکیشن ادغام شده؟ در این نوع از سایت ها سرور یک صفحه HTML از پیش تولید شده منفرد رو به مرورگر باز می گرداند. این صفحه خودش شامل کدهایی بر پایه JavaScript است که صفحه را به صورت پویا در مرورگر تغییر می دهند. به همین دلیل اپلیکیشن تک صفحه هم به این وبسایت ها اطلاق داده میشه.
در این نوع از صفحات وب، همه کدهای HTML در مرورگر تولید میشوند و سرور فقط یک صفحه اصلی HTML را که حاوی کدهای JavaScript زیادی است به مرورگر بر می گرداند. سپس در مرورگر کدهای جاوا مسئول تغییر کدهای HTML هستند. به این ترتیب اطلاعات صفحه بدون رفرش کردن مرورگر تغییر می کنند.
استفاده از این تکنولوژی را در بسیاری از سایت های اعلام نرخ لحظه ای، یا سایت هایی که از پیام رسان استفاده می کنند حتما دیده اید.
هنوز کار این صفحات رو درک نکردید و به نظرتون عجیب میاد؟ آیا سرور داده ها را از یک پایگاه داده نگرفت تا کد HTML تولید کند؟ آیا در این صفحات مرورگر شما به یک دیتابیس متصل میشه؟
درک این نکته خیلی مهم هست که با SPA ، هنوز یک سرور وجود دارد. کد جاوا اسکریپت سمت مرورگر به یک پایگاه داده متصل نمی شود. از آنجا که اعتبار دسترسی نشان داده می شود، بسیار ناامن خواهد بود. نمی توانید کد جاوا اسکریپت فرانت اند خود را پنهان کنید.
اما کل روند به روزرسانی صفحه در مرورگر اتفاق می افتد (از طریق JavaScript مرورگر). با این کار در صفحات وب یک تجربه کاربری مانند برنامه های مورد استفاد در تلفن همراه ایجاد می شود، زیرا کاربر هرگز مجبور نیست منتظر بارگیری صفحه جدید شود. در عوض، به روزرسانی ها و تغییرات فوراً اتفاق می افتند.
از آنجا که به روزرسانی کل صفحه HTML از طریق کد جاوا اسکریپت مرورگر به دستورالعمل های جاوا اسکریپت زیادی نیاز دارد، شما معمولاً از یک فریم ورک یا کتابخانه برای این کار استفاده می کنید. React.js، Angular یا Vue.js محبوب ترین گزینه های برنامه نویسان هستند.
استفاده از SPA در حال افزایش است زیرا چنین تجربه کاربری شگفت انگیز و سریعی ارائه می دهد. اما با وجود تمام به روزرسانی ها و ارائه محتوای لحظه ای در مرورگر، SPA دارای نقاط ضعفی هم هست.
بزرگترین نقطه ضعف این است که صفحه ای که برای مرورگر شما ارسال می شود (یعنی همان صفحه HTML اولیه که از SPA شروع می شود) تقریبا خالی است. یعنی معمولا چیزی بیشتر از برخی از تگ های HTML و چند کد جاوا و سی اس اس وجود ندارد.
این موضوع برای سئو خوب نیست زیرا خزنده موتور جستجو تمام محتوای زیبا شما را که در نهایت توسط SPA ارائه می شود نمی بیند، در عوض فقط صفحه خالی را می بیند! برخی از خزنده ها ممکن است منتظر اجرای کد های JavaScript بمانند. اما معمولا منتظر اطلاعات بارگیری نشده نمی شوند.
برای این مشکل راه حل هایی هم وجود دارد. برای مثال استفاده رندرهای نشان دهنده SPA در سمت سرور.
علاوه بر مشکلاتی که برای سئو به وجود می آید، لازم به ذکر است که انجام بیشتر کار توسط مرورگر به این معنی است که کدهای جاوا بیشتری هم باید بارگیری شود. و همه این کدها باید توسط مرورگر تجزیه و اجرا شود، که بر عملکرد زمان اجرا در وب سایت تأثیر می گذارد.
در دستگاه ها یا شبکه های کندتر، بارگیری از SPA ممکن است طولانی شود.
در طراحی وبسایت سنجیدن نیازهای کاربران و وبسایت برای ارائه بهترین تجربه کاربری در اولویت قرار دارد.
اگر به روز رسانی لحظه ای داده از نیازهای شما برای داشتن تجربه کاربری بهتر است SPA اغلب یک انتخاب مناسب است.
برای تطبیق وبسایت خود با موتورهای جستجو می توانید صفحات لندینگ خود را به روشی مناسب و بهینه شده برای موتورهای جستجو ایجاد کرده و بقیه صفحات را با SPA ایجاد کنید.
واکنش پذیری عالی وUX خوب، SPA را به گزینه ای مناسب برای برنامه های درون مرورگر مانندGoogle Docs ، Twitter feed یا Netflix تبدیل کرده است.
منبع نوشته: وبسایت آکادمایند
