پیاده سازی SSR (سرورساید رندرینگ)روی Vue و بررسی تاثیر بر SEO

مطالبی که در این نوشته بررسی می کنیم :

۱- چرا به SSR (server side rendering) نیاز داریم ؟

۲- بررسی سئو و SSR (بخش مورد علاقم)

۳- چه زمانی از SSR استفاده کنیم؟

۴- تفاوت بین CSR (client side rendering ) و SSR چیست؟

۵- در Vue چطور SSR را پیاده سازی کنیم؟

کلاینت ساید رندرینگ (CSR) :

اگر بخوام ساده این بخش رو توضیح بدم ، به این صورت عمل می کنه که :

وقتی شما درخواست باز شدن وب اپلیکیشن (SPA-PWA هم می تواند باشد ) را به سمت سرور ارسال می کنید ، سرور ابتدا یک صفحه ی ساده html رو به همراه فایل های css و js به شما برمیگردونه . حالا نوبت مرورگر شماست که این کدهای js را کامپایل بکنه و صفحات html رو به صورتی که شما طراحی کردین ، به کاربر نشون بده. همچنین تمامی ملحقات پروژه و ساختارها مثل router - stateManager و هرچیزی که در باندل پروژه شماست هم بایستی به صورت Up and Running روی مرورگر توانایی اجرا شدن داشته باشه.یعنی اینکه وب اپلیکیشن شما پس از پشت سر گذاشتن این مراحل قابل استفاده است.

سرور ساید رندرینگ ( SSR ) چیست؟

خب قبل از پیدا شدن سر و کله ی فریم های پیشرو (PWA ) و SPA (single page Application ) ها ما از این قابلیت استفاده می کردیم و چیز عجیبی نیست . چطوری ؟

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

اما وقتی شما روی route دیگری کلکی می کردید ، سرور مجبور بود باز همینکار رو برای شما انجام بده یعنی : فایل PHP رو بگیره ، کامپایل کنه ، به HTML برسونه و js و css ها در اون به اصطلاح populate بشن و باز برگردونه به سمت مرورگر شما - (وقت گیر بوده نه !!!)

چه زمانی از ‌SSR استفاده کنیم؟

دو دلیل خیلی خوب وجود داره برای اینکه از ‌SSR در پروژه هاتون استفاده کنید

۱- وقتی به SEO نیاز دارید (یک وقتی هست دارید پنل توسعه می دین و SSR به کار نمیاد)

۲- نمایش سریعتر محتوای قابل درک برای کاربر (reducing time to content)

خب شاید سوال پیش بیاد که پیاده سازی SSR آیا معایبی هم داره ؟

همیشه یک trade off بین چیزی که بدست میارید و چیزی که از دست می دین باید وجود داشته باشه

بیاید بررسی کنیم :

• خب من یک محیط node.js باید روی سرور بالا بیارم
• بخاطر محاسبات اضافه ای که روی سرور ام تحمیل میشه ، مقداری منابع بیشتر باید مصرف کنم
• نیاز هست که کدهایی که قبلا سمت کلاینت زدم رو ریفکتور کنم و بهینه تر بنویسم
• باید با sysAdmin سر و کله بزنم و راضیش کنم که کارمو راه بندازه :)))

ولی خب مهم نیست چون چیزی بدست میارم که از همه چی مهم تره : better SEO

سئو و SSR - سرورساید رندرینگ :

یک نکته ای رو باید خدمتتون در همین اواسط کار (شاید باید اولش می گفتم نمیدونم) عرض کنم که :

آیا گوگل می تواند js را ایندکس کند ؟

بحث در این خصوص در محافل SEO خیلی زیاد هستش و نظرات متفاوتی از دوستان متفاوتی شنیده میشه که قابل احترام هست و احتمالا حاصل تجربه این دوستان ،‌اما خب ما کاری به اینها نداریم و صحبت خودمونو می کنیم :)

• بله گوگل می تواند فایل های js را تفسیر و index کند

ولی تفسیر و ایندکس کردن این صفحات که توسط js تولید شده اند برای ربات ها زمان بر هستش. پس ربات گوگل یکبار به سایت شما مراجعه می کنه ، میبینه که اوه کلی فایل js اینجا ریخته و خب چون حوصله نداره چیزهایی که می تونه برمیداره و ایندکس می کنه و در مرحله دوم یا در اصطلاح second wave میاد محتوای شما را ایندکس می کنه . (این دیدگاه traditional در برخورد با js یا محتوای ویدئویی و متنی هستش که ما برای اثبات نیازمان به SSR به همین بسنده می کنیم - البته ۳ ماه پیش آقای مارتین اسپلیت (موقشنگ) مبحث two wave of indexing رو کلا زیرش کشید و گفت اون چیزی که شما فکر می کنید نیست... ).

تصویر زیر هم قشنگه و کل چیزهایی که گفتم رو شامل میشه

تجربه شخصی در پیاده سازی SSR و تاثیر بر SEO

داده های زیر ، داده های یک وبسایت که به تازگی SSR روی اون انجام شده و ربات های گوگل در حال ایندکس کردن مطالب هستند و سایت هم کاملا نوپا است

پیاده سازی SSR روی فریم ورک Vue

از متدهای مختلفی برای این روش استفاده میشه مثل موارد زیر :

۱- اهل فن باشی و از Universal code خود Vue استفاده کنی :

رفرنس :

۲- استفاده از Nuxt.js

۳- استفاده از Quasar Framework

۴- استفاده از Express

۵- استفاده از ves

پیاده سازی SSR با Express

برای این بخش از پکیج vue-server-renderer استفاده می کنیم . برای استفاده و اضافه کردن این پکیج دستور زیر رو استفاده می کنیم :

npm install vue vue-server-renderer express — save

عملکرد صحیح در نحوه رندرکردن صفحات در این پکیج برای ما حائز اهمیت است . vue instance ما در پروژه روی سرور به وسیله ی renderer function این پکیج اجرا میشه .

بیاید یک فایل index.js بسازیم و توابع مورد نیازمون رو برای اجرا فراخوانی کنیم

const Vue = require('vue')
const server = require('express')
()const renderer = require('vue-server-renderer').createRenderer()

حالا در Express یک instance از vue ایجاد می کنیم

server.get('*', (req, res) => {

    const app = new Vue({

        data: {},

        template: ``

    })

}) server.listen(8000)

به همین راحتی ، حالا برای نمونه یک سمپل استادی رو باهم بررسی می کنیم:

server.get('*', (req, res) => {

const app = new Vue({

data: {

array: ['vue', 'java', 'python', 'javascript'],

},

template: `<div v-for=&quot(a, index) in array&quot

v-bind:key=&quotindex&quot>{{ a }}</div>`

}) renderer.renderToString(app, (err, html) => {

res.end(`

<!DOCTYPE html>

<html lang=&quoten&quot>

<head>

<title>Vue Js – SSR SAMPLE</title>

</head>

<body>${html}</body>

</html>      `)

})

}) server.listen(8000)

پیاده سازی SSR به وسیله Nuxt :

احتمالا دوستانی که react کار کردند اسم فریم ورک next.js رو شنیده باشند . این دقیقا مشابه همان فریم ورک و کارکردی دقیقا مثل همان دارد.

این فریم ورک به شما امکان ایجاد وب اپلیکیشن های پیشرو (progressive web application ) مبتنی بر vuejs می ده که از SSR و امکانات مختلفی مثل ,prerender,vuex,router , .... هم پشتیبانی می کنه.

لینک فریم ورک :

شکل زیر نشان دهنده ی فلوی عملکرد این فریم ورک هستش وقتی که شما یک درخواست به سمت سرور ارسال می کنید و یا به وسیله nuxt-link در اپلیکیشن navigate (از روتی به روت دیگه منتقل شدن ) می کنید.

همونطور که گفته شد ساختار دقیقا مشابه با next.js هستش.

هرفایل vue در زیرشاخه نشان دهنده یک route مجزا است . همچنین در اخرین آپدیت توانایی ایجاد فایل ها استاتیک و ذخیره و serve کردن اونها نیز به قابلیت های این فریم ورک اضافه شده .کافیه که کانفیگ زیر رو در فایل nuxt.config.js ذخیره کنید

export default {

target:'static'

}

از این رو می تونید وب اپلیکیشن هایی که کاملا دوستدار SEO هستند توسعه بدین.

رفرنس :

نکته : اگر میخاین از این فریم ورک استفاده کنید ، بهتره که پروژه رو کلا در این فضا ایجاد کنید و از CLI اون هم استفاده کنید . همچنین میتونید به پروژه اضافه اش بکنید ، دست خودتونه و توضیحات بیشتر از این رو میسپارم به داکیومنت خود nuxt در ادرس زیر :

جمع بندی

در این نوشته باهم تفاوت های SSR و CSR رو باهم بررسی کردیم ، اینکه چطور یک پروژه vue رو برای بهینه سازی های SEO آماده کنیم هم راجع بهش صحبت کردیم. اگر نظری دارید خوشحال میشم کامنت کنید. ممنونم که تا اینجا همراهم بودین.