Data from getServersideProps not propogating to component/page. Works locally but not on vercel - 307 for data - Help

Samthomson · 2024-10-10 23:40:34.923928

I am running a next js site on vercel, and something that works fine locally is failing. Basically a page with serverside props is not passing those props to the page/component somehow. In debugging I can see the serverside props function gets the data, but the component does not. Looking at logs, I see the request for that data gets a 307. I have changed my dev environment to use the production database, and to use build then serve - so that it matches the prod setup, but still this issue occurs only on vercel.

Vercel Alum

Hi, and welcome !

The 307 status code you're seeing in the logs indicates a temporary redirect. This could be interfering with the proper passing of server-side props.

Could you check if you have any redirect rules in your next.config.js or Vercel configuration that might be causing this redirect.

Let us know how you get on!

Sure. Thanks for helping. Here's my next.config.js:

const withBundleAnalyzer = require('@next/bundle-analyzer')({
	enabled: process.env.ANALYZE === 'true',
})

/** @type {import('next').NextConfig} */
const nextConfig = {
	productionBrowserSourceMaps: true,
	sassOptions: {
		includePaths: [__dirname],
	},
	webpack: (config, { isServer, dev }) => {
		// Fixes npm packages that depend on `fs` module
		// if (!isServer) {
		// config.node = {
		// 	...config.node,
		// 	fs: 'empty',
		// }
		// }

		// config.resolve.fallback = { fs: false }

		// if (!isServer) {
		config.resolve.fallback = { ...config.resolve.fallback, fs: false }
		// resolve: {
		// 	fallback: {
		// 		fs: false
		// 	}
		// }
		// }

		// Ensure source maps are enabled in production
		if (!dev) {
			config.devtool = 'source-map'
		}

		return config
	},
	images: {
		domains: ['localhost', 'guidedtrekking.com'],
	},
	env: {
		VERSION: process.env.VERSION,
	},
	images: {
		remotePatterns: [
			// dev:
			{
				protocol: 'https',
				hostname: 'guidedtrekking-dev-test.nyc3.cdn.digitaloceanspaces.com',
				port: '',
				pathname: '/thumbs/**',
			},
			// prod:
			{
				protocol: 'https',
				hostname: 'guidedtrekking.nyc3.cdn.digitaloceanspaces.com',
				port: '',
				pathname: '/thumbs/**',
			},
			// placeholder image service
			{
				protocol: 'https',
				hostname: 'placeholder.pics',
				port: '',
				pathname: '/**',
			},
		],
	},
	async rewrites() {
		return [
			{
				source: '/robots.txt',
				destination: '/api/robots',
			},
		]
	},
}

module.exports = withBundleAnalyzer(nextConfig)

Although this issue just started in the last week, and I haven't changed/deployed the config in a long time. The page was working before fine, with no changes from my end.

I cannot reproduce locally (using the same production data), which made me wonder if there was a platform change causing it - outwith my code base.

Any ideas on this? I have one code base which is serving two sites (with just an env var determining which branding is shown on each). And strangely this page loads fine on one site but not the other.