Creating a Reddit Clone Using React and GraphQL - 09

Now we are going to set up the Server-Side Rendering(SSR). To do that add the below package to the Web App project.

yarn add next-urql react-is urql

Now, we are bit refactoring our code and adding SSR to our urqlClient . Let’s create a few helper functions and move these things.

The next step is, use this withUrqlClient function in the index page to provide our urqlClient. Let’s go to Index.tsx file and make the changes.

export default withUrqlClient(createUrqlClient)(Index);

Now you will get this error.

Types of property 'credentials' are incompatible.
Type 'string' is not assignable to type '"include" | "omit" | "same-origin" | undefined'.

To fix this add as const to your credentials because we need to have it as read only property.

fetchOptions: {
credentials: "include" as const,
},

By default, this is not the SSR. We need to enable it by adding ssr: true.
Now we are adding Posts query.

query Posts {
  posts {
    id
    createdAt
    updatedAt
    title
  }
}

Once we added it, first we try without SSR. To do that first get the Posts data and show in Index.tsx page.

Once we get the data we first check that data is there, by below code block.

{
  !data ? ( // check that data is null or not
    <div>Loading...</div>
  ) : (
    data.posts.map((p) => {
      return <div key={p.id}>{p.title}</div>;
    })
  );
}

To demonstrate the functionality without SSR, first, we created a sleep function in the server and show slow loading. It will take 3 seconds to load the data. But, if you check the source of the page, you will see loading div in the source.

Now, let’s enable the SSR by adding the below code.

export default withUrqlClient(createUrqlClient, { ssr: true })(Index);

As a rule of thumb, use SSR for dynamic data loading. Also check that you are using urlq queries and mutations in there.

Now, let's wrap the login page and register page with withUrqlClient to not to use SSR.

// login page
export default withUrqlClient(createUrqlClient)(Login);

// register page
export default withUrqlClient(createUrqlClient)(Register);

Now we come to NavBar. We don’t want to run this on the server, because data will be null while rendering on the server. Because we are not passing the cookie in here.

First, we add the pause: true in NavBar. We define this true or false using window object.

// inside useMeQuery define SSR pause
const [{ data, fetching }] = useMeQuery({
  pause: isServer(),
});

// isServer.ts file
export const isServer = () => typeof window === "undefined";

In the server, this will be undefined. So, it will not process this mutation inside the server.

I will wrap up this post from here. If you have anything to ask regarding this please leave a comment here. Also, I wrote this according to my understanding. So if any point is wrong, don’t hesitate to correct me. I really appreciate you.
That’s for today friends. See you soon. Thank you.

References:

This article series based on the Ben Award - Fullstack React GraphQL TypeScript Tutorial. This is amazing tutorial and I highly recommend you to check that out.

Main image credit