Facing server side Rendering issue when deployed on Vercel. Locally everything is working

[studiosnabeel]

Hi, first of all thankyou for this very informative tutorial. I have learnt alot from it. Everything is working nicely on localhost but when I have deployed the website on vercel. The blogs do not appear. It shows the following error

• Application error: a client-side exception has occurred (see the browser console for more information).
  Digest: 2026204822

Secondly I am very happy that the user registration and user login are working when I deploy on vercel but the google authentication does not work on vercel. It gives an error as below.

• Try signing in with a different account.

[Nith567]

Need to add another variable, Next Auth URL and it will be the deployed URL instead of the localhost.
To get the URL, click on domains, get the shortest link, and add it to the NEXTAUTH_URL variable. It would be similar to ex: https://nextauthexample.vercel.app
After the site is deployed go to the dashboard of the current app click on settings and then Environment Variables.
Add the Auth0 client id, Auth0 client secret, and Auth0 domain which is present in our .env.local file.

[studiosnabeel]

Hey @Nith567 thankyou for your suggestion. I managed to get the googe authentication working but I am still struggling with showing the blog page after deployment.

[Nith567]

I mean it's not working after deployment or both (locally),If you get an error share with us

[OmarSerranoSosa]

I am gettoing these errors
`TypeError: fetch failed

17:52:54.981 | at Object.fetch (node:internal/deps/undici/undici:11413:11)
17:52:54.981 | at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
17:52:54.981 | cause: Error: connect ECONNREFUSED 127.0.0.1:3000
17:52:54.982 | at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16)
17:52:54.982 | at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
17:52:54.982 | errno: -111,
17:52:54.982 | code: 'ECONNREFUSED',
17:52:54.982 | syscall: 'connect',
17:52:54.982 | address: '127.0.0.1',
17:52:54.982 | port: 3000
17:52:54.982 | }
17:52:54.982 | }
17:52:54.983 | - warn Entire page /dashboard/login deopted into client-side rendering. https://nextjs.org/docs/messages/deopted-into-client-rendering /dashboard/login
17:52:55.004 | - info Generating static pages (6/13)
17:52:55.005 |  
17:52:55.005 | Error occurred prerendering page "/blog". Read more: https://nextjs.org/docs/messages/prerender-error
17:52:55.006 | TypeError: fetch failed
17:52:55.006 | at Object.fetch (node:internal/deps/undici/undici:11413:11)
17:52:55.006 | at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
17:52:55.032 | { data: undefined, status: 'loading', update: [Function: update] }
17:52:55.060 | - info Generating static pages (9/13)
17:52:55.135 | - info Generating static pages (13/13)
17:52:55.137 |  
17:52:55.137 | > Export encountered errors on following paths:
17:52:55.137 | /blog/page: /blog`

[parv3213]

I am gettoing these errors

TypeError: fetch failed 17:52:54.981 | at Object.fetch (node:internal/deps/undici/undici:11413:11) 17:52:54.981 | at process.processTicksAndRejections (node:internal/process/task_queues:95:5) { 17:52:54.981 | cause: Error: connect ECONNREFUSED 127.0.0.1:3000 17:52:54.982 | at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16) 17:52:54.982 | at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) { 17:52:54.982 | errno: -111, 17:52:54.982 | code: 'ECONNREFUSED', 17:52:54.982 | syscall: 'connect', 17:52:54.982 | address: '127.0.0.1', 17:52:54.982 | port: 3000 17:52:54.982 | } 17:52:54.982 | } 17:52:54.983 | - warn Entire page /dashboard/login deopted into client-side rendering. https://nextjs.org/docs/messages/deopted-into-client-rendering /dashboard/login 17:52:55.004 | - info Generating static pages (6/13) 17:52:55.005 |   17:52:55.005 | Error occurred prerendering page "/blog". Read more: https://nextjs.org/docs/messages/prerender-error 17:52:55.006 | TypeError: fetch failed 17:52:55.006 | at Object.fetch (node:internal/deps/undici/undici:11413:11) 17:52:55.006 | at process.processTicksAndRejections (node:internal/process/task_queues:95:5) 17:52:55.032 | { data: undefined, status: 'loading', update: [Function: update] } 17:52:55.060 | - info Generating static pages (9/13) 17:52:55.135 | - info Generating static pages (13/13) 17:52:55.137 |   17:52:55.137 | > Export encountered errors on following paths: 17:52:55.137 | /blog/page: /blog

I am getting this exact issue while trying to yarn build

[Sana348]

Same here working on so long no resolution

[Sana348]

• event compiled successfully in 552 ms (344 modules)

• ┌ GET /blog?_rsc=2c7517e 200 in 37189ms
  │
  └──── GET http://localhost:3000/api/posts 500 in
  37018ms (cache: MISS)

• error src\app\blog\page.jsx (12:10) @ getData

• error Error: Failed to fetch data
  at getData (./src/app/blog/page.jsx:24:15)
  at async Blog (./src/app/blog/page.jsx:29:18)
  10 |
  11 | if (!res.ok) {

12 | throw new Error("Failed to fetch data");
| ^
13 | }
14 |
15 |

[haycarlitos]

I have the same issue. Does anyone handle it yet?

[haycarlitos]

I can fix it adding const dynamic = 'force-dynamic' at the beggining o of both pages. To be honest, I don't know why it works. Appreciate any explanation.

import React from "react";
import styles from "./page.module.css";
import Link from "next/link";
import Image from "next/image";
export const dynamic = 'force-dynamic'
const Blog = async() => {