Published on

Difference between vercel, local and solutions

Authors
  • avatar
    Name
    Loc Truong
    Twitter

IPv6 Networking

Vercel: might be handling requests over IPv4, Local: network or machine is attempting to resolve requests over IPv6, causing the timeout. Solution: Force local environment to prioritize IPv4.

sudo sysctl -w net.ipv6.conf.all.disable_ipv6=1

Local Firewall, VPN, or Proxy Configuration

Local: firewalls or VPNs might block specific outgoing requests, especially if they're attempting to access external resources. Solution: Check if there are any firewall rules or VPN settings on local machine that could be blocking outbound requests to the API providers. Can test on a different network (e.g., mobile hotspot) to see if it’s a network-specific issue.

Localhost DNS Resolution

Explanation: Vercel uses a more reliable DNS setup to resolve domain names quickly, while local environment may face DNS resolution delays or errors, especially when dealing with large-scale, high-traffic services. Solution: Change the DNS resolver on local machine to something more reliable like Google's public DNS or Cloudflare's DNS: Google's DNS: 8.8.8.8, 8.8.4.4 Cloudflare's DNS: 1.1.1.1, 1.0.0.1

sudo nano /etc/resolv.conf
nameserver 8.8.8.8
nameserver 8.8.4.4

Environment Differences (Vercel vs. Local)

Explanation: Vercel handles server-side rendering, API calls, and networking differently than local machine, meaning Vercel may have different server access or networking capabilities. Solution: Try running Next.js application in a similar environment locally as Vercel's (Linux, Node.js, etc.). Can use Docker to mirror a production-like environment for local development.

# Dockerfile
FROM node:16-alpine

WORKDIR /app

COPY package*.json ./
RUN npm install

COPY . .

EXPOSE 3000
CMD ["npm", "run", "dev"]

Server-Side Rate Limiting or Blocking

Explanation: Some external providers might block or throttle local IPs, especially if too many requests are made in a short period. Vercel's server IPs might not face the same restrictions. Solution: Try using a proxy service for external requests or rate-limiting API calls locally to avoid being blocked.

const axios = require('axios');
const rateLimit = require('axios-rate-limit');

const axiosInstance = rateLimit(axios.create(), { maxRequests: 2, perMilliseconds: 1000 });

axiosInstance.get('https://example.com/api')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

Check Node.js Version

Explanation: Sometimes differences in Node.js versions between Vercel and local machine can cause networking or DNS resolution problems. Solution: Make sure using the same Node.js version locally as Vercel. Check Vercel's Node.js version in your Vercel dashboard, and then match it locally using nvm:

nvm install <version>  # Replace <version> with the specific Node.js version used by Vercel
nvm use <version>