یادگیری Next.js بصورت پروژه محور

Next.js یک فناوری شگفت انگیز است که به شما امکان می‌دهد صفحات کاربرپسند سئو و تجربه عملکرد عالی را برای مشتریان ایجاد کنید. در این مقاله، من می‌خواهم شما را با یک سری تصمیماتی که در برخی وبسایت‌ها گرفته شده تا به Next.js سویچ کنند و آنچه Next.js به ثمر می‌آورد، آشنا کنم. (مثالی که در اینجا می‌زنیم صرفا وبسایت codedamn است)

مهاجرت از React

قبل ازNext.js ، codedamn با استفاده از React.js به عنوان فناوری اصلی ساخته شد که برخی ویژگی‌ها شامل موارد زیر بود:

1. طراحی کاربری متریال
2. Webpack
3. Babel
4. تایپ‌اسکریپت
5. Monaco (برای اجرای کد)
6. پکیج‌های سفارشی

اگرچه ری‌اکت یک انتخاب عالی بود، اما چیزی که مانند هر SPA (وب تک صفحه‌ای) دیگر در وب از آن رنج می‌برد، اضافه بار جاوااسکریپت بود.

مشکلات رایج SPA در تولید

این فقط به ری‌اکت محدود نمی‌شود، بلکه مشکلی است که در هر فریمورکی که از جاوااسکریپت برای پر کردن مطالب مهم در صفحه به ویژه محتوای قابل مشاهده استفاده می‌کند، به وجود می‌آید.

• سئو وبسایت به شدت آسیب می‌بیند. موتورهای جستجو برای خواندن صفحات وب به صورت HTML بهینه شده‌اند و اگر از جاوااسکریپت برای ارائه HTML استفاده کنید، موتورهای جستجو مانند گوگل برای مدت طولانی خواندن وبسایت شما را به تعویق می‌اندازد و بدتر از آن، موتورهای جستجوی دیگر مانند بینگ و یاهو احتمالا کاملا منصرف می‌شوند، که این منجر به از دست دادن ترافیک سایت می‌گردد.
• مشکلات مربوط به عملکرد و اجرا به وجود می‌آید. از آنجا که شما قسمت بزرگی از جاوااسکریپت را از طریق دستگاه‌های کم قدرت مانند تلفن‌های همراه کوچک یا لپ تاپ‌های قدیمی اجرا می‌کنید، ممکن است نمایش محتوای شما را در اینگونه دستگاه‌ها تا 3 الی 5 ثانیه به راحتی افزایش دهد. این را با یک اتصال اینترنت کند و یک سرور متوسط شلوغ ترکیب کنید و یک تجربه بد برای کاربر ایجاد می‌شود. تنها چیزی که از نبود اینترنت بدتر است، داشتن اینترنت کند است.

مهم نیست که دیگران در مورد مشکلات معماری SPA چه می‌گویند، تنها دو مشکلی که واقعا قابل رفع نیستند، دو مورد بالا است. در codedamn این مسئله بزرگی بود زیرا باید با مخاطبان زیادی تماس می‌گرفتند تا به آن‌ها در یادگیری کد کمک کنند و برای این منظور به همه پشتیبان‌هایی که بودند، نیاز داشتند. همچنین کنار گذاشتن موتورهای جستجو از معادلات گزینه‌ی منطقی نبود.

صفحات از پیش رندر شده

اولین موضوع مهم پیش نمایش صفحات بود. این به معنای ساده این است که شما از یک مرورگر ساده مانند puppeteer استفاده می‌کنید و سعی می‌کنید از همه صفحات (یا حداقل آن‌هایی که مهم اند) وبسایت خود بازدید کنید و خروجی HTML ارائه شده را ثبت کنید. این به دلیل DOM است که پس از تجزیه جاوااسکریپت در صفحه ایجاد می‌شود و از این رو پیش نمایش واقعی آنچه کاربر شما می‌بیند است.

در codedamn سعی بر این شد که صفحات را با استفاده از این سرویس از پیش رندر شده نمایش دهند: prerender.io

این Saas می‌تواند بین سرور و سرویس گیرنده شما قرار بگیرد و دسترسی ربات به وبسایت شما را هوشمندانه تشخیص دهد (مانند googlebot یا هر خزنده موتور جستجو). اگر ربات را شناسایی کنیم، prerender.io یک مرورگر headless را از بین می‌برد. از صفحه بازدید می‌کنید، HTML ارائه شده را دریافت می‌کنید و پاسخ را به ربات ارسال می‌کنید. برای کاربران عادی، به صورت عادی انجام می‌شود.

اما این راه‌حل کامل نیست و صادقانه بگویم نگه داشتن آن نیز کمی بی نظم است. آن‌ها به دنبال چیزی دائمی و محکم بودند و برای مدت طولانی می‌توانستند ببینند که Server Side Rendering (SSR) برای codedamn امری اجتناب ناپذیر است، زیرا سرویس‌هایی مانند prerender.io فقط بخشی از مشکل را برطرف می‌کند. شما هنوز هم مشکلات عملکردی دارید و حتی اگر صفحات از پیش رندر شده را برای همه فعال کنید، پس از آن راه‌اندازی و نگهداری بالایی می‌طلبد، جایی که فراموش کردن اصلی‌ترین مشکل کسب و کار بسیار ساده است و فقط در جنبه فنی امور سردرگم می‌شوید.

معرفی Next.js

سویچ کردن به Next.js یک تصمیم جسورانه بود زیرا فقط در React.js زیرساخت موجود بسیار وجود داشت. اما این کار ارزشش را داشت. حدود 15 ژوئیه 2020، تصمیم بر این شد زیرساخت‌ها از سرورهای مستقر در DigitalOcean که Node.js را در بک‌اند و React.js در فرانت‌اند میزبانی می‌کرد، به موارد زیر منتقل شوند:

1. کل زیرساخت‌ها به یک ساختار تقریبا ثابت Next.js منتقل شدند.
2. زیرساخت‌های codedamn از DigitalOcean به دلیل صرفه‌جویی در هزینه و مزایای ذخیره‌سازی، منتقل شدند.
3. زیرساخت‌های codedamn Next.js (شامل صفحات ثابت و توابع lambda Next.js) به Vercel منتقل شدند – شرکتی که در حال حاضر Next.js را نگهداری می‌کند.
4. برای GraphQL، معماری را به AWS Lambdas تغییر دادند. به نظر می‌رسد این بهترین تصمیم مقیاس‌پذیر برای این پلتفرم در حال حاضر باشد.
5. همچنین پایگاه داده به MongoDB Atlas منتقل شد.

مزایای Next.js

بنابراین در یک بازه زمانی 3 روزه، معماری را نه تنها در بسیاری از سرویس‌های کوچک، بلکه در کل سیستم‌عامل‌های مختلف جدا کردند. این معایب خاص خود را دارد، اما به هر حال مزایای بیشتری دارد. به Next.js پایبند باشید، در اینجا آنچه فهمیدیم آورده شده:

1. اکنون سایت بسیار سریع است. به لطف حافظه پنهان Vercel و بهینه‌سازی استاتیک و اتوماتیک که در Next.js تعبیه شده است.
2. مهاجرت Codebase کار خیلی سختی نبود. برخی از تغییرات در الگوی فایل‌ها وجود داشت، اما به لطف تست‌های کد در بررسی عملکرد، به سرعت پذیرفته شدند.
3. ذخیره سازی افزایشی – نیازی نیست که کل حافظه پنهان را بی اعتبار کنیم، زیرا یک تغییر کوچک در پایگاه کد در جایی ایجاد می‌شود (با تشکر از Next.js 9.5).
4. تولید فزاینده ساکن – این چیزی است که من در  Next.jsدوست دارم. چه چیزی بهتر از صفحات وب استاتیک فوق‌العاده سریع است؟ صفحات وب استاتیک فوق‌العاده سریع که همچنین می‌توانند به صورت پویا در پس زمینه به روز شوند. این به ما امکان می‌دهد وبلاگ‌های کاملی را در Next.js با این ویژگی مستقر کنیم.
5. سرانجام یک وبلاگ پویا در codedamn.com/news میزبانی شدو از Ghost به عنوان CMS استفاده می‌شود.
6. از مزایای فوری سئو، کدهای وضعیت صحیح را دریافت کردند (مانند 404 برای صفحات یافت نشده که قبلا با ری‌اکت امکان پذیر نبود) بدون اینکه محصول SaaS خارجی در بین نظارت بر هر درخواست باشد.
7. زیرساخت‌های کامل (از جمله توابع لامبدا) توسط Vercel مدیریت می‌شود، که به عنوان یک مهندس پلتفرم کمک بزرگی می‌کند. این به معنای تمرکز بیشتر بر روی کد و محصول عالی و تمرکز کمتر بر روی سخت‌افزار زیرساختی است.
8. مراحل مقیاس گذاری، پنهان سازی و استقرار نیز به لطف Vercel به صورت خودکار و قابل کنترل هستند.

معایب Next.js

هیچ چیز بدی در این فریمورک وجود ندارد. با پیشرفت‌های Next.js، شما تقریبا نیازی به انصراف از ساز و کار داخلی آن‌ها ندارید. اما برخی از ضعف‌هایی وجود دارد که ممکن است با آن‌ها روبه رو شوید:

1. اگر یک کد بزرگ دارید، ممکن است مدتی طول بکشد تا پروژه را به طور کامل منتقل کنید، زیرا Next.js الگوی مسیریابی مبتنی بر فایل را که چیزی منحصر به فرد است، اعمال می‌کند.
2. Next.js پشتیبانی از کلاس را برای ماژول‌های Sass و CSS به ارمغان می‌آورد، اما شما نمی‌توانید آن را خارج از چهارچوب تنظیم کنید، باید پردازش Next.js Sass و CSS را کنار بگذارید در صورتی که می‌خواهید پردازنده sass خود را تنظیم کنید.

هرچند هیچ چیز بدی در Next.js وجود ندارد. اگر شما یک توسعه دهنده React هستید و در مورد پروژه‌های خود جدی هستید، رفتن به Next.js باید بدون هیچ مشکلی باشد. شرکت Vercel با حفظ و نگهداری Next.js، کار بزرگی را در این زمینه انجام می‌دهد و این فریمورک با گذشت زمان فقط پیشرفت می‌کند.

امیدوارم از این مقاله لذت کافی را برده باشید. در صورت تمایل نظرات خود را در بخش زیر با ما در میان بگذارید.