Back

[SOLVED] nextJS SSR

  • 1
  • Self Hosted
  • General
  • Web
Hexi
27 May, 2023, 22:42

Well yeah it only shows how to run it

TL;DR
The issue is with server-side rendering in Next.js. In order for SSR to work, cookies need to be set on the SSR server hostname instead of the Appwrite hostname. To fix this, set the Appwrite URL in process.env.NEXTAUTH_URL. Additionally, make sure the domains are set up correctly as described in the readme. To retrieve the JWT token, you can use the code provided in the repository. The repository also has additional code examples that show how to implement the functionality you need.
Drake
27 May, 2023, 22:44
Hexi
27 May, 2023, 22:44

Well yeah but more about how I can implement it tbh so I would need to make a API endpoint that will save the user data?

Hexi
27 May, 2023, 22:45

Well like this

Hexi
27 May, 2023, 22:46

But is there a example code with only the core things because I cannot see it in the code instantly...

Hexi
27 May, 2023, 22:48

Because I have found this so basically set the cookies to the main website but to my understanding you still need to fetch the username right?

Drake
27 May, 2023, 22:49

The repo has all the codes.

Hexi
27 May, 2023, 22:51

ah it sets it in the cookies after it fetched the data

Hexi
27 May, 2023, 22:51

makes sense

Drake
27 May, 2023, 22:53
Hexi
27 May, 2023, 22:53

alr will make my own version of that then <a:happi:1107928866477064202>

Hexi
27 May, 2023, 22:53

With some copy pasting

Hexi
27 May, 2023, 22:54

[SOLVED] nextJS SSR

Hexi
27 May, 2023, 23:12

nextJS SSR

Hexi
27 May, 2023, 23:13

Quick question how can I retrieve the jwt token so the token to store to get access to the api endpoint

Hexi
27 May, 2023, 23:15

So like:

TypeScript
const response = await fetch(
    `${AppwriteEndpoint}/account/sessions`,
    {
      method: "POST",
      headers: {
        "x-appwrite-project": AppwriteProject,
      },
    }
  );

const json = await response.json();

 const cookiesStr = (response.headers.get("set-cookie") ?? "")
    .split(appwriteHostname)
    .join(ssrHostname);
``` And this will return the cookies?
Hexi
27 May, 2023, 23:21

because that return with null so I am probably doing something wrong

Drake
27 May, 2023, 23:22

Did you set the domains up like the readme described?

Hexi
27 May, 2023, 23:23

I did this

TypeScript

export default async function handler(req, res) {
  const response = await fetch(
    process.env.APPWRITE_URL + `/v1/account/sessions`,
    {
      method: "POST",
      headers: {
        "x-appwrite-project": process.env.APPWRITE_PROJECT,
      },
    }
  );

  const cookiesStr = (response.headers.get("set-cookie") ?? "")
    .split(process.env.APPWRITE_URL)
    .join(process.env.NEXTAUTH_URL);
  return res
    .status(200)
    .json({ success: true, info: response.headers.get("set-cookie") });
}
Drake
27 May, 2023, 23:25

The actual hostnames of your app and Appwrite matter

Hexi
27 May, 2023, 23:25

oh nvm I get it now so put appwrite to process.env.NEXTAUTH_URL

Drake
27 May, 2023, 23:26

To ensure server-side rendering works, we need to set those cookies on our SSR server hostname instead of the Appwrite hostname. Let's say our Appwrite instance is on cloud.appwrite.io, and our app is on myapp.com. SSR server on domain myapp.com won't receive appwrite.io cookies. This is expected behavior, as browsers keep 1st party cookies securely scoped to specific domains.

Hexi
28 May, 2023, 11:25

[SOLVED] nextJS SSR

Reply

Reply to this thread by joining our Discord

Reply on Discord

Need support?

Join our Discord

Get community support by joining our Discord server.

Join Discord

Get premium support

Join Appwrite Pro and get email support from our team.

Learn more