Creating a Reddit Clone Using React and GraphQL - 09
Tags: react, typescript, graphql, redditclone
Published: 2021-02-28 02:00:50

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

```javascript
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.

```javascript
export default withUrqlClient(createUrqlClient)(Index);
```

Now you will get this error.

```javascript
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.

```javascript

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.

```javascript

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.

```javascript
{
  !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.

```javascript
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.

```javascript
// 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.

```javascript
// 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](https://www.youtube.com/watch?v=I6ypD7qv3Z8). This is amazing tutorial and I highly recommend you to check that out.

Main image [credit](https://www.pexels.com/photo/brown-wooden-dock-462024/)