دوستان عزیزم سلام توی این مقاله بیاید کمی در مورد اینکه حالا بعد از اینکه سایت ری‌اکتی خودم رو راه اندازی کردم، چطور اون رو برای موتورهای جستجوگر بهینه‌سازی کنم صحبت کنیم.
در این مقاله، قصد داریم با معرفی nextjs و قابلیت‌های اون، با شما همراه باشیم. Next.js یک فریم ورک رایج برای توسعه وب سایت‌های React است که امکاناتی مانند SSR، مدیریت دوام وب، اجرای کامل کلاینت-سرور و ... دارد. یکی از قابلیت‌های اصلی nextjs، Server-Side Rendering (SSR) است.
روش SSR یک روش برای بارگذاری و پردازش HTML، CSS و JavaScript در سروره که به این صورت عمل میکنه که در هنگام درخواست صفحه از سوی کاربر، سرور HTML رو به Client میده و بلافاصله برای کاربر به نمایش در میاره. با استفاده از SSR در nextjs، میتونید پایداری، سرعت و بهینه‌سازی در جستجوی سئو را بهبود بخشید.
برای استفاده از SSR در nextjs، کافیه که بخش مربوطه را به صورت داخلی در برنامه React خود فراخوانی کنید. برای مثال، با استفاده از متد getServerSideProps()، می‌توانید داده‌های لازم را از سرور فراخوانی کنید و به صفحه React خود اضافه کنید.
دلایلی که برای استفاده از SSRدر nextjs وجود دارن شامل بهبود کارایی سرور و موتورهای جستجو، افزایش سرعت بارگذاری صفحه و بهبود تجربه کاربری است.
در ادامه، یک مثال کد برای استفاده از SSRدر nextjs نشان میدیم:
در این مثال، getServerSideProps به عنوان یکی از متدهای nextjsفراخوانی شده است. این متد اطلاعات مورد نیاز برای ایجاد صفحه رو از سرور دریافت میکنه و به عنوان پارامتر ورودی به کامپوننت Home میفرسته. سپس در این کامپوننت، این اطلاعات در قالب یک عنصر h1 و یک پاراگراف نمایش داده میشه.
بعضی از قابلیت‌های اصلی nextjs رو هم اینجا آوردیم:
۱. سیستم Automatic Code Splitting: در nextjs، کد شما به صورت خودکار به بخش‌هایی تقسیم میشه که هر بخش فقط برای بخش مشخصی از صفحه فراخوانی میشن. این کار باعث کاهش زمان بارگذاری صفحه و بهبود تجربه کاربری میشه.
۲. سیستم Built-in CSS Support: در nextjs، شما می‌توانید به راحتی از انواع فایل‌های CSS مانند SASS، LESS، و ... استفاده کنید. همچنین nextjs ابزارهایی برای بهینه‌سازی CSSارائه می‌دهد که به کاهش حجم فایل‌های CSS و بهبود سرعت بارگذاری کمک میکنه.
۳. سیستم API Routes: با استفاده از API Routes در nextjs، شما می‌توانید یک APIساده را ایجاد کنید که به راحتی در همان برنامه Reactخود قابل استفاده است. همچنین nextjsابزارهایی برای توسعه API ساده و درک آن‌ها برای توسعه‌دهندگان را ارائه می‌دهد.
۴. سیستم Static Site Generation: با استفاده از قابلیت Static Site Generationدر nextjs، می‌توانید صفحات ایستا را به صورت پویا تولید کنید. با این روش، شما می‌توانید صفحات سریع‌تر و بدون نیاز به سرور پردازشی ایجاد کنید که برای بارگذاری صفحه کمترین تاخیر را دارد.
در کل، با استفاده از SSR در nextjs، می‌توانید به راحتی و با کمترین تلاش، سرعت و بهینه‌سازی سایت رو، بهبود ببخشید.
اگه سوالی در مورد این فریمروک داشتید میتونید از من سوال بکنید تا بیشتر باهم در مورد این فریمورک گپ‌وگفت داشته باشیم.
راستی اگه دوست دارید که این فریمورک رو یاد بگیرید میتونید از document اصلی خودش که خیلی هم تمیزه استفاده کنید.
