Kategorie: React

Vercel Edge Functions nutzen

Posted on by amoerke

Um die Vercel Edge-Functions nutzen zu können, muss das Projekt mit der aktuellsten Next.JS Version erstellt worden sein. Im API-Endpunkt muss folgende Konfiguration eingefügt werden:

export const config = {
runtime: 'edge',
};Code-Sprache: JavaScript (javascript)

Warum Edge-Functions und was ist das überhaupt?

Edge-Functions sind defacto eine Erweiterung der Serverless-Functions. Das Problem bei den bisherigen Serverless Functions ist folgendes. Wenn ein Request an das API mit einer Serverless Function gemacht wird, hängt die Latenz von zwei Faktoren ab.

Der erste Faktor ist die Location von der der Request gemacht wird. Der zweite Faktor ist die Location wo das API gehostet ist. Desto höher die Entfernung zwischen den beiden Punkten ist, desto höher ist die Antwortzeit. Das kann bei hochfrequentierten APIs schnell zum Problem werden.

Um dieses Problem aufzulösen gibt es die sogenannten Edge-Functions. Bei diesen Funktionen wird ein Netzwerk genutzt und die Funktion auf dem Server, welcher am nächsten an der Anfrage ist, ausgeführt.

Damit ist sichergestellt, dass die Entfernung so kurz wie möglich ist.

useImperativeHandle

Posted on by amoerke

Wenn eine Funktion einer Unterkomponente in einer Elternkomponente ausgeführt werden soll sollte man diesen Hook verwenden.

Beispiel: In einer Komponente wird ein Formular als Kindkomponente eingebettet. Der Submitbutton liegt aber in der Elternkomponente. Die Submitmethode liegt in der Childkomponente.

In der Childkomponente wird die auszuführende Funktion in den Hook einbettet:

useImperativeHandle(ref, () => ({
        submitForm() {
          console.log('sendForm');
        },
      }))Code-Sprache: JavaScript (javascript)

Dafür muss die Komponente über forwardRef befähigt werden, als Referenz aufgerufen werden zu können:

const AddressForm = forwardRef((props, ref) => {Code-Sprache: JavaScript (javascript)

Die Komponente wird dann wie folgt in die Elternkomponente eingebettet:

<AddressForm ref={addressFormRef} />Code-Sprache: HTML, XML (xml)

In der Elternkomponente kann dann beim Klick auf den Button die Funktion über die Referenz auf die Komponente aufgerufen werden:

const _onSubmit = () => {
        addressFormRef.current.submitForm();
    }Code-Sprache: JavaScript (javascript)

Hinweis: Wenn die Unterkomponente mit der Redux-Funktion connect verbunden ist, dann muss im connect als Option forwardRef: true mitgegeben werden:

export default connect(mapStateToProps, null, null, { forwardRef: true })(AddressForm)Code-Sprache: JavaScript (javascript)

https://reactjs.org/docs/hooks-reference.html#useimperativehandle