همه ی آنچه باید در مورد Nuxt js بدانیم

Nuxt.js چیست ؟

Nuxt.js را می توانیم به عنوان یک framework قدرتمند ، رایگان و منبع باز تعریف کنیم که بر پایه Webpack ، Babel.js ، Vue.js و Node.js ساخته شده و اغلب به عنوان meta-framework برای برنامه‌های کاربردی استفاده می شود.

این فریم ورک به کاربران خود این اجازه را می‌دهد تا همه یا بخش‌هایی از محتوا را که به‌طور کامل از پیش رندر شده را مشاهده کنند ، به عبارت دیگر وقتی شما قطعه کدی را ایجاد می کنید می توانید نتیجه آن را در همان لحظه درون مرورگر ببینید.

از نکات دیگری که در فریم ورک Nuxt به بهترین شکل انجام شده ، ساده‌ سازی تنظیمات و پیکربندی برنامه است ، به گونه ای که به ما این امکان را می‌دهد تا بخش‌ های رابط کاربری برنامه خود را مانند یک برنامه Vue.js ، سریع‌تر و ساده‌تر توسعه دهیم.

اصول اولیه در Nuxt

همانطور که در تعریف Nuxt.js داشتیم ، این framework مبتنی بر Vue.js و ابزارهای توسعه Babel ، PostCSS و webpack است تا زمینه را برای ایجاد و توسعه برنامه های کاربردی فراهم کند.

اساسا Nuxt.js توسعه دهندگان را قادر می سازد تا بسته به هدف مورد نظر، سه نوع برنامه متفاوت ایجاد کنند:

1- صفحات استاتیک (Static generated pages)

سایت های استاتیک به سایت هایی گفته می شود که معمولا توسط html کدنویسی شده و امکان اتصال به پایگاه داده و ایجاد تغییر محتوا و یا ویرایش سایت به صورت آنلاین در این صفحات امکان پذیر نیست.

2- اپلیکیشن های تک صفحه ای (Single page application)

سایت های spa که مخفف عبارت Single page application است ، به سایت هایی گفته می شود که یکبار فراخوانی شده و عملیات جدید در صفحه بدون نیاز به ریفرش مرورگر یا فراخوانی دوباره ی صفحات انجام می گیرد.

3- برنامه های ارائه شده در سمت سرور (SSR)

به صورت خلاصه می توان گفت SSR که مخفف عبارت Server-side rendered apps است و به آن رندر سمت سرور گفته می شود.

نحوه ی ایجاد اولین برنامه با Nuxt.js

برای این کار شما می توانید یکی از سه روش زیر را انتخاب کنید:

با استفاده از NPM :

npm create-nuxt-app <project-name>

با استفاده از NPX :

npx create-nuxt-app <project-name>

با استفاده از Yarn :

yarn create-nuxt-app <project-name>

در این بخش شما می توانید به جای نام پروژه ی خود را وارد کنید و پس از آن از دستور زیر استفاده می کنیم :

cd <project-name>
npm dev

یا

cd <project-name>
yarn dev

ویژگی های Nuxt.js

رندر در سمت سرور

سطح یادگیری آسان

مدیریت بهتر مد ها با پوشه بندی مناسب

مدیریت متا تگ ها

بهبود سئو

و...

Nuxt.js برای بهبود سئو چگونه عمل می کند؟

Nuxt.js از SSR که مخفف Server Side Rendering استفاده می کند ، SSR داده های AJAX را استخراج و گردآوری می کند و اجزای Vue.js را در رشته های HTML روی سرور (Node.js) رندر می کند ، این ویژگی امکان تجزیه عالی از طریق عناصر DOM را با تجزیه کننده سئو گوگل فراهم می کند ، تجزیه کننده سئو در هنگام بارگیری وب سایت با سرعت بسیار زیادی از طریق عناصر DOM تجزیه می شود.

تفاوت سئو در Nuxt.js و سایر فریم ورک ها

برنامه‌های که با فریم‌ ورک‌هایی مانند Vue.js ، React ، Angular و موارد مشابه ساخته شده‌اند ، پس از بارگیری DOM ، داده‌ها را با AJAX استخراج می‌کنند ، بنابراین تجزیه‌کننده SEO قادر به تجزیه همه عناصر DOM نیست.

تفاوت اصلی Nuxt و Vue

به صورت خلاصه می توان گفت Vue همیشه در سمت کلاینت اجرا می شود ، در حالی که Nuxt علاوه بر سمت کلاینت در سمت سرور نیز رندر می شود.

آیا Nuxt برای برنامه های کاربردیه کوچک مناسب است ؟

در گذشته به این دو علت Nuxt.js برای برنامه های کاربردی در مقیاس کوچک مناسب نبود :

1- پشتیبانی ضعیف از تایپ اسکریپت

2- مدیریت ضعیف در خطای های سمت سرور

مدیریت اشتباه خطای سمت سرور بزرگ‌ترین و سخت‌ترین مشکلی بود که هنگام توسعه یک برنامه Nuxt.js با آن روبرو می‌شدیم.

امروزه با پشتیبانی بهتر از Typescript و درک عمیق‌تر SSR ، می‌توان با اطمینان گفت که Nuxt.js برای برنامه‌های کاربردی در مقیاس متوسط آماده است ، اما هنوز جایی برای بهبود وجود دارد.

ساختار برنامه Nuxt

Nuxt.js معماری شبیه به Vue.js دارد با این تفاوت که :

Nuxt مسیرها را بر اساس دایرکتوری و ساختار فایل برای صفحات ایجاد می کند.

به عنوان مثال :

اگر یک فهرست و فایل ایجاد کنیم ، Nuxt.js به طور خودکار مسیری را برای آن صفحه ایجاد می کند و نیازی به تعریف یا پیکربندی مسیرها در جای دیگری در برنامه وجود ندارد.

Nuxt.js از طرح‌بندی‌ ها استفاده می‌کند ، جایی که هر طرح‌ بندی به‌ عنوان یک بسته‌ بندی جداگانه برای اجزاء برنامه عمل می‌کند.

برای مثال :

اگر می‌خواهیم در برخی صفحات خاص از UI ، CSS ، فونت ها، سیستم‌های طراحی ، متا تگ‌ ها یا عناصر دیگر استفاده کنیم ، می‌توانیم تعریف کنیم که از چه چیدمانی به عنوان مؤلفه اصلی آن استفاده کنیم.