Estoy tratando de obtener datos de la base de airtable y mostrarlos en el lado del cliente, la tabla contiene las siguientes columnas:

Id, nombre, formatted_address, cross_street, vote y imageURL.

Puedo mostrar la imagen del nombre de identificación y votar en el lado del cliente, pero formatted_address y cross_street no están definidos en el lado del cliente, pero los datos se muestran en el lado del servidor en la aplicación Next.js.

 const CoffeeStore = (initialProps) => { const router = useRouter(); const id = router.query.id; const [coffeeStore, setCoffeeStore] = useState(initialProps.coffeeStore); const { state: { coffeeStores }, } = useContext(StoreContext); useEffect(() => { if (isEmpty(initialProps.coffeeStore)) { if (coffeeStores.length > 0) { const coffeeStoreFromContext = coffeeStores.find((coffeeStore) => { return coffeeStore.fsq_id.toString() === id; //dynamic id }); if (coffeeStoreFromContext) { setCoffeeStore(coffeeStoreFromContext); } } } }, [id, initialProps.coffeeStore]); const { data, error } = useSWR(`/api/getStoreById?id=${id}`, fetcher); useEffect(() => { if (data && data.length > 0) { console.log("SWR DATA>>>>", data[0]); setCoffeeStore(data[0]); setVotingCount(data[0].voting); } }, [data]); const { name, imageURL, location: { formatted_address } = "NA", location: { cross_street } = "NA", } = coffeeStore; console.log("COffee STore>>>", coffeeStore);

formatted_address y cross_street no están undefined en el lado del cliente, pero se muestran en el lado del servidor.

 console.log( id, name, formatted_address, cross_street, imageURL ); }; export default CoffeeStore;