سلام. امیدوارم حالتون عالی باشه.
توی مقاله، می خوایم به تفاوت های client components و server components در Next.js بپردازیم. یکی از مهم ترین موضوعاتی که هر Next js Developerای باید بدونه.
فقط همین اول بگم خدمتتون. این موضوع شاید یکم فهمیدنش گیج کنده باشه. به صورت ویدئویی هم اینا رو گفتم. میتونید از طریق لینک هایی که انتهای مقاله میزارم، برید و ببینیدشون...
ببینید اگر شما با نکست جی اس کار بکنید و یه وب سایت واقعی بسازید و آنلاینش کنید و روی سئوش کار بکنید، میبینید که Next js فوق العادهست. همه آیتم های سئوییش رتبه یک رو میاره به جز یدونه. اون یدونه هم مشکلی نیست که فقط نکست داشته باشتش. همه وب سایت ها این مشکل رو دارن.
حالا مشکل چیه؟
مشکل اینه که تعداد فایل هایی که از سرور میفرسته به فرانت اند زیاده. این موضوع باعث میشه که سرعت اولیه وب سایت یه مقدار بیاد پایین. البته نه 2 - 3 ثانیه. مثلا 0.2 ثانیه. این موضوع از نظر سئو پارامتر منفی حساب میشه.
این موضوع توی نکست جی اس 12، به شدت دیده میشه. اما توی نکست جی اس سیزده، تیم نکست تلاش کردن تا این مشکل رو حلش کنن. چطور؟ با دو دسته کردن کامپوننت ها.
ببینید ما توی نکست 12، باید توی پوشه Pages همه صفحاتمون رو بسازیم اما توی نکست سیزده، یه پوشه جدید معرفی شده با اسم پوشه App. کامپوننت هایی که توی پوشه پیجز فراخوانی میشن میتونن هر نوع کامپوننتی باشن و شما آزادی عمل زیادی دارید ولی کامپوننت هایی که توی پوشه اپ، فراخوانی میشن، یا باید کلاینت کامپوننت باشن یا سرور کامپوننت.
کلاینت کامپوننت به کامپوننتی میگیم که رندرش سمت کلاینت انجام میشه و وقتی صفحه از سرور رسید، ساخته میشه. سرور کامپوننت به کامپوننتی میگیم که سمت سرور ساخته میشه و فرستاده میشه به فرانت.
یعنی هر صفحه ی Next js ای رو که شما فراخوانی میکنید، یا به صورت کامل یا یه بخشیش توی سرور ساخته میشه و فرستاده میشه به کلاینت یا در واقع مرورگر کاربر. اگر این صفحه، کلاینت کامپوننت هم داشته باشه، بعد از اینکه صفحه توی مرورگر کاربر نمایش داده شد، کامپوننت های کلاینتی هم ساخته میشن و به کاربر نمایش داده میشن.
در واقع سیستم، همون سیستم تفاوت getServerSideProps و useEffect هست که توی نکست 12 داشتیم.
اگر برای لود اطلاعات از API، شما گت استاتیک پراپس و گت سرور ساید پراپس بزنید( که معادل نکست 13شون میشه getData) شما وقتی وارد صفحه میشید، اطلاعات توی صفحه هست ولی وقتی همون اطلاعات رو با useEffect یا useSwr و اینجور هوک ها فراخوانی میکنید، اول وارد صفحه میشید، یه گیف لودینگ میبینید تا درخواست زده بشه. بعدش اطلاعات بیاد نمایش داده بشه.
نکته : توی اس دبلیو آر و یوز افکت و اینا سئو نداریم ولی توی گت دیتا و رفقاش داریم. پس اطلاعاتی که سئوشون مهمه، باید با getData و... فراخوانی بشن.
خوب حالا لطفا دقت کنید. یه جمع بندی بکنیم.
کلاینت کامپوننت میشه کامپوننتی که سمت توی مروگر کاربر رندر میشه ولی سرور کامپوننت میشه کامپوننتی که توی سرور رندر میشه.
ما توی نکست 12، کلا یه نوع کامپوننت داشتیم ولی توی نکست 13، دو نوع، پس وقتی کامپوننت ها بشن دو دسته، قطعا از تعداد کامپوننت هایی که از سمت server میاد کم میشه. پس همون مشکلی که ابتدای مقاله گفتم( تعداد فایل های زیادی که از سرور میاد) کمتر میشه، در نتیجه، ما سئوی بهتری خواهیم داشت.
تا اینجا مقاله تفاوت رو به صورت ریشه ای و مفهومی فهمیدیم. توی نوشتن کامپوننت تفاوت چیه؟
قبل از اینکه اینو بگم، لطفا دقت بکنید که صفحات همیش سرور ساید هستنا. کامپوننت ها هستن که میتونن کلاینت یا سرور ساید باشن.
اما تفاوت این دو تا توی کد چی هست؟
ما هر وقت خواستیم کلاینت کامپوننت داشته باشیم، توی خط اول کامپوننت مینویسیم "use client"
همین و همین. به همین سادگی کامپوننتمون شد کلاینت کامپوننت.
شما اگر بخواید از موارد زیر استفاده کنید، حتما باید اون بخش رو کلاینت کامپوننت بکنید واگرنه ارور میگیرید.
یعنی هر وقت خواستید برای یه دکمه، یه آن کلیک تعریف کنید، باید برای اون دکمه یه کلاینت کامپوننت تعریف کنید...
* یاد گرفتن کلاینت کامپوننت ها و سرور کامپوننت ها در نکست جی اس، بسیار مهم هست. میتونید توی دوره رایگان آموزش نکست جی اس ما شرکت کنید و نکست و جی اس و تیلویند رو در کنار هم یاد بگیرید...
* دوره نکست جی اس پیشرفته ما هم هست که توش، موارد پیشرفته تر Next.js رو آموزش دادیم...
* هم چنین میتونید این موضوع رو به صورت کامل و پروژه محور توی وب سایت فروشگاه فایل نکست جی اسی ما یاد بگیرید. یه دوره درجه یک که همه چیز نکست جی اس، نود جی اس، تیلویند و مونگو رو توش یادمیگیرید.
توی پروژه فروشگاه فایل، ما چیا داریم؟
توی این پروژه چیا یاد میگیریم؟
* و کلی چیز دیگه که واقعا اینجا نمیشه همهش رو لیست کرد.پیشنهاد میکنم توی گوگل، فروشگاه فایل مرن فا رو سرچ کنید، اولین نتیجه هست. ویدئوی معرفی پروژه رو ببینید...
امیدوارم محتوای این مقاله و این دوره ها براتون مفید باشن...
