Tengo una ruta a la que puedo llamar desde la representación del lado del servidor o desde el cliente:
export const getFooBar = async (): Promise<any> => { const res = await fetch(`/foo/bar`, { method: 'GET', headers: CONTENT_TYPE_JSON, }) if (!res.ok) { //do something } //do something else }Si llamo a esta función desde el servidor:
export const getServerSideProps: GetServerSideProps = async () => { getFooBar().then(() => { //do something }) }Recibí un error porque no es una URL absoluta. La solución es crear otra función con un URI ligeramente diferente:
export const getFooBar = async (): Promise<any> => { const res = await fetch(`http://myapp/foo/bar`, { method: 'GET', headers: CONTENT_TYPE_JSON, }) if (!res.ok) { //do something } //do something else } O para pasar un argumento de URL de prefijo en getFooBar .
Pero, ¿existe una forma más genérica de agregar la parte de URL absoluta si proviene de la representación del lado del servidor?
El proxy que configuró en next.config.js solo es relevante para las solicitudes del lado del cliente. Para las solicitudes iniciadas en el servidor (como dentro getServerSideProps ), debe llamar directamente a la API externa.
Dado que la variable de entorno APP_API no está expuesta al navegador (no tiene el prefijo NEXT_PUBLIC_ ), puede usar eso como una condición para usar el punto final directo de la API en el servidor o apuntar al punto final del proxy en el cliente.
export const getFooBar = async (): Promise<any> => { const url = process.env.APP_API ? `http://${process.env.APP_API}/bar` : '/foo/bar' const res = await fetch(url, { method: 'GET', headers: CONTENT_TYPE_JSON, }) // Remaining code } Tenga en cuenta que también podría usar otras condiciones para verificar si está en el cliente o en el servidor, por ejemplo, usando typeof window === 'undefined' .