سرعت سایت خود را با پیش رندر در Next JS به حداکثر برسانید

پیش رندر در Next JS

رندرینگ چیست

این فرآیند تبدیل شماست React Code به HTML.

رندر انواع مختلفی دارد

1) رندر سمت مشتری [ Used By ReactJS ]

در این حالت، کلاینت ساختار پایه اسناد HTML را دریافت می کند و جاوا اسکریپت تمام عناصر را ارائه می کند.

2) پیش رندر

HTML در سمت سرور تولید می شود و در سمت کلاینت React با استفاده از جاوا اسکریپت ارائه شده توسط سرور، کامپوننت را تعاملی می کند.

این 2 نوع است

• رندر سمت سرور
  • در رندر سمت سرور، HTML برای هر درخواست در سرور ایجاد می شود و صفحه HTML ارائه شده و جاوا اسکریپت برای مشتری ارسال می شود.
  • در سمت کلاینت، React از جاوا اسکریپت برای تعاملی کردن صفحه HTML استفاده می کند.
  • برای هر درخواست، صفحه HTML ایجاد می شود، بنابراین به دلایل عملکرد توصیه نمی شود.
• تولید سایت استاتیک [ RECOMMENDED ]
  • در This، صفحه HTML تنها یک بار در زمان ساخت تولید می شود و در هر درخواست مجددا استفاده می شود.

آبرسانی → هنگامی که مشتری صفحه از پیش رندر شده و کد JS را دریافت می کند، React روی آن صفحه کار می کند و آن را تعاملی می کند، این فرآیند Hydration نامیده می شود.

⭐ ما می توانیم چندین روش رندر در یک برنامه Next.js داشته باشیم

⭐ به‌طور پیش‌فرض، Next JS همه صفحات را بدون داده‌های پویا از قبل رندر می‌کند

⭐ هنگامی که ما در یک صفحه هستیم و سعی می کنیم به صفحه دیگری برسیم، پیش رندر انجام نمی شود زیرا React مسئول است و DOM را با استفاده از JS دستکاری می کند.

چگونه Next JS می داند کدام کد را در سمت سرور اجرا کند؟

1) getStaticProp() تابع

• برای تولید سایت Static استفاده می شود
• *این یک تابع Async است (یک وعده را برمی گرداند *

**export async function getStaticProps(){
    // All the Code we will write here will execute on the Server side.
    // Also, this Code will not visible to the Client, So we can Include the 
    // Credential of the Database here. 
**

• شیئی را برمی گرداند که حاوی props است[]به عنوان یک کلید ]و سپس آن props به تابع مربوطه منتقل می شود

export default function MyApp(props){
    const {product} = props.product;
    return(
        <>                        // React Fragments
            {products.map(product=><li>{product}</li>)}
        </>
    )
}

// This will be executed 1st
export async function getStaticProps(){
    return{
        props:{
            product:[
                "Larry","Josh","harry"
            ]
        }
    }
}

سؤالات – اگر مقداری «داده پویا» در آن وجود داشته باشد چه می‌شود getStaticProp() روش؟

پاسخ – برای حل این مشکل، کلید جدیدی به نام داریم revalidate، که به Next JS می گوید که صفحه را پس از یک زمان خاص دوباره رندر کند ( در میلی ثانیه)

export async function getStaticProp(){
        const data = await axios.get('<Dynamic Changing Data>')
        return{
                props:{
                    data:data
                },
                revalidate:300               // time in millisecond
        }
}

به این می گویند بازسازی استاتیکی افزایشی” -** این ویژگی Next JS است که پس از ساخت سایت، صفحات را به روز می کند.

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

وجود دارد 2 کلید دیگر در آبجکت بازگشتی که در صورت بروز مشکل در واکشی داده ها استفاده می شود.

1) پیدا نشد

• این یک مقدار بولی است، می گوید که آیا داده ها را دریافت کرده ایم یا خیر.
• اگر درست بود، Next JS صفحه 404 را به ما نشان می دهد.

2) تغییر مسیر

• در صورتی که داده ها قابل واکشی نباشند، کاربر را به مسیر دیگری هدایت می کند.

export async function getStaticProp(){
    //const data = fetching data from server
    if(!data){
        return{
            notFound: true
        }
    }
    if(!data){
        return{
            redirect:{
                destination:'/'
            }
        }
    }

    return {
        props:{
            name: "Jayant"
        }
    }
}

Next JS چگونه صفحات مسیرهای پویا را رندر می کند.

فرض کنید داریم [blogId]فایل js در داخل پوشه وبلاگ

بنابراین یک مسیر پویا دارد و می تواند چندین صفحه داشته باشد.

اگر Next JS سعی کند صفحات را از قبل رندر کند، نمی داند چند صفحه باید تولید کند.

برای حل این مشکل، ما باید getStaticPaths() روش.

getStaticPaths() ← به Next JS می گوید که چند صفحه باید رندر کند.

export async function getStaticPaths(){
        return{
            paths:[
            {params: {pid:'1'}},
            {parans:{pid:'2'}},
            {params:{pid:'3'}}   // In path everything is of type String
            ],
            fallback:false
        }
}

// fallback is used when we have multiple pages & preloading them will take so much time, so we only preload some mostly visited pages, and others are loaded Just in time when we go to the page URL. 
// for this we have set the fallback to true , It will tell the next Js that there are       more pages than this also.

export async function getStaticPath(){
        return{
            paths:[
            {params: {pid:'1'}},
            ],
            fallback:true || 'blocking'
        }
}

// we can use either of those values, blocking means only load when the data is fetched this can leads to greater loading time but we don't have to use the loading icon.

هنگام استفاده از Fallback، مطمئن شوید که اگر کاربر مسیر نامعتبری را وارد کند، به جای یک خطا، مقداری خطا خواهد داد. 404 صفحه

*برای جلوگیری از این *

• استفاده کنید notFound کلید & در داخل کامپوننت صفحه مدتی صبر کنید تا داده ها بارگیری شوند، برای این کار از نماد بارگیری استفاده کنید.

2**getServerSideProps() تابع**

• برای رندر سمت سرور استفاده می شود
• مثل getStaticProps()، اما در هر درخواستی صفحات را رندر می کند و عملکردهای دیگری مانند آن را دارد res() و req()
• آن را ندارد revalidate کلید

export async function getServerSideProps(context){
        const {params , req, res} = context;
        console.log(req);
        console.log(res);
        return{
            Name:"Jayant"
        }
}

• با استفاده از تابع res ما می توانیم پاسخ را ارسال کنیم یا هر عنوانی را به آن ضمیمه کنیم.
• با استفاده از قیاس عملکرد، ما به چیزهای زیادی مانند کوکی ها، هدرها و غیره دسترسی داریم.
• هر دو برای هدف احراز هویت مفید هستند
• متدهایی مثل این را ندارد getStaticPaths ، زیرا پیش رندر انجام نمی شود.

⭐ **getServerSideProps** & getStaticProps فقط می توان از اجزای صفحه صادر کرد. روی اجزای وارد شده به صفحه اجرا نمی شود.

واکشی داده های سمت مشتری

• موقعیت های زیادی وجود دارد که مجبور نیستیم از رندر سمت سرور استفاده کنیم
  • وقتی داده های زیادی برای واکشی وجود دارد، سرور را کند می کند.
  • داده های مختص کاربر که ما نمی خواهیم خزنده آن را بخواند

مثال →

import {useEffect,useState} from 'react'

function College() {
    const [isLoading,setIsLoading] = useState(true);
    const [Data,setData] = useState([]);
    useEffect(()=>{
        const url = 'https://next-js-ab208-default-rtdb.firebaseio.com/sales.json' //.json is firebase specific
        fetch(url)
        .then(res=>res.json())
        .then(data=>{
            console.log(data);
            const loadedData = [];
            for (const key in data){
                loadedData.push({
                    id:key,name:data[key].username,age:data[key].age
                })
            }
            setData(loadedData);
            setIsLoading(false);
        })

    },[])

    if(isLoading){
        return <p>Loading...</p>
    }
  return (
    <div>
        {Data.map((item)=>{
            return <p key={item.id}>{item.name} is {item.age} years old</p>
        })}
    </div>
  )
}

export default College;

Imp ← این صفحه همچنین از قبل رندر می شود زیرا js به طور پیش فرض تمام صفحات را پیش نمایش می دهد، اما از آنجایی که ما داده ها را در سمت مشتری واکشی می کنیم، این داده ها از قبل رندر نمی شوند.

اگر سعی کنیم کد منبع این را ببینیم، فقط می‌توانیم پاراگراف بارگیری را ببینیم

Loading....

اکنون برای واکشی داده‌های سمت کلاینت می‌توانیم از آن همانطور که هست استفاده کنیم یا می‌توانیم قلاب خودمان را ایجاد کنیم یا می‌توانیم از قلاب دیگری استفاده کنیم.[SWR].

این یک React Hook برای واکشی داده است، در صورت تمایل می توانید از آن استفاده کنید.

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

برای این کار از getStaticProps یا getServerSideProps برای دریافت داده ها و سپس استفاده از حالت ها برای ذخیره آنها و سپس می توانیم از رندر سمت Client برای به روز رسانی وضعیت استفاده کنیم