WebHU - Programozási kérdések és válaszok

Optimalizálja a getServerSideProps külső API-jának hívását

Tegyük fel, hogy a next.js react alkalmazásomban van a következő oldal:

// Filename: [mypath].jsx

export default function MyPage(props) {
    return (
        <>
            <Link href="/siteX">
                <a>Go to siteX</a>
            </Link>

            <Link href="/siteY">
                <a>Go to siteY</a>
            </Link>

            <div>{props.data.text}</div>
        </>
    );
}

export async function getServerSideProps(context) {
    const mypath = context.params.mypath;

    const res = await fetch(`https://external-api/${mypath}`)
    const data = await res.json();

    return { props: { data } };
}

Amikor a szerver oldalon elérem a http://localhost:3000/siteX/ címet, az url-ből származó siteX karakterlánc egy külső (!) API-hoz való hívásra szolgál egy másik rendszeren, pl. https://external-api/siteX. Ez eddig jól működik, de a következő teljesítményproblémát látom:

A böngészőben, amikor rákattintok egy <Link>-ra, két kérés érkezik: az egyik a saját szerveremhez, hogy frissítsem a getServerSideProps-t az új elérési úttal, a másik pedig a szerveremtől a https://external-api/ címre... a új adatok.

Látsz módot ennek optimalizálására? Amit akarok:

  • amikor az <Link>-re kattint, csak egy kérés érkezik közvetlenül a https://external-api/... címre, és a data közvetlenül frissül (például a Saját oldal állapotaként).
  • A jelenlegi állapot szerint a http://localhost:3000/siteX/ elérésekor a szervernek le kell kérnie az adatokat, és előrenderelnie kell a webhelyet

Természetesen kezelhetem a data-et <MyPage> állapotaként, és egyszerűen meghívhatok egy függvényt, hogy frissítsem egy kéréssel, amikor a <Link>-re kattintanak. De szeretnék egy helyes útválasztást, előzményeket és így tovább.

Tudsz ebben segíteni? Köszönöm!

next.js server-side-rendering
11.11.2020

Válaszok:


1

Némi kutatás után megtaláltam a megoldást. A next.js <Link> összetevőnek van egy shallow tulajdonsága, amelyet beállíthatok, hogy megakadályozza a getServersideProps végrehajtását. Így manuálisan tudom lekérdezni az új adatokat, amikor egy hivatkozásra kattintanak. Ennek ellenére a kezdeti adatlekérdezést a getServersideProps végzi el a szerveren, és a kezdeti SSR-em úgy működik, mint korábban.

// Filename: [mypath].jsx

export default function MyPage(props) {
    const [data, setData] = useState(props.data);

    function updateData(path) {
        const res = await fetch(`https://external-api/${path}`)
        const data = await res.json();
        setData(data);
    }

    return (
        <>
            <!-- Manually query and set data -->
            <div onClick={() => updateData("siteX")}>

                <!-- Trigger routing, but don't execute getServerSideProps (because of shallow={true}) -->
                <Link href="/siteX" shallow={true}>
                    <a>Go to siteX</a>
                </Link>

            </div>

            <div onClick={() => updateData("siteY")}>
                <Link href="/siteY" shallow={true}>
                    <a>Go to siteY</a>
                </Link>
            </div>

            <div>{props.data.text}</div>
        </>
    );
}

// If page is requested directly via url (and not because a <Link> element has been clicked) do SSR as before
export async function getServerSideProps(context) {
    const mypath = context.params.mypath;

    const res = await fetch(`https://external-api/${mypath}`)
    const data = await res.json();

    return { props: { data } };
}
11.11.2020
Új anyagok
A rádiógomb ellenőrzött eseményének használata a jQueryben
Ebben a cikkben látni fogjuk, hogyan kell dolgozni a jquery választógombbal ellenőrzött eseményeivel. A választógombok HTML gombok, amelyek segítenek kiválasztani egyetlen értéket egy csoportból...
Körkörös függőségek megoldása terraformban adatforrásokkal – lépésről lépésre
Mi az a körkörös függőségek Dolgozzunk egy egyszerű eseten, amikor az SQS-sor és az S3-vödör közötti körkörös függőség problémája van egy egymástól függő címkeérték miatt. provider..
Miért érdemes elkezdeni a kódolást 2023-ban?
01100011 01101111 01100100 01100101 — beep boop beep boop Világunk folyamatosan fejlődik a technológia körül, és naponta fejlesztenek új technológiákat a valós problémák megoldására. Amint..
🎙 Random Noise #2  – Örökbefogadás és hit
az analitika íratlan világának gondozása Szeretné, hogy ezek a frissítések a postaládájába kerüljenek? Iratkozzon fel itt . "Ha önvezető autókat gyártanak, akkor mi miért ne..
A legrosszabb politika és prediktív modellek májátültetésre jelöltek számára az Egyesült Államokban
A máj (vagy óangolul lifer) az emberi test legnehezebb belső szervére utal, amely csendesen működik a nap 24 órájában. Mit csinál a máj? 500 feladatot hajt végre a szervezet egészségének..
5 webhely, amely 2022-ben fejleszti front-end fejlesztői készségeit
Frontendmentor.io A tényleges projektek létrehozásával a Frontendmentor.io segítséget nyújt a front-end kódolási képességeinek fejlesztésében. A kódolást azután kezdheti meg, hogy..
Mikor kell használni a Type-t az interfészhez képest a TypeScriptben?
A TypeScript a JavaScript gépelt szuperkészlete, amely statikus gépelést ad a nyelvhez. Ez megkönnyíti a robusztus és karbantartható kód írását azáltal, hogy a hibákat a fordítási időben..