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
Top comments (0)