Add Next.js 13 appDir example to docs

[efilion]

With getStaticProps and getServerSideProps having been retired in Next.js 13's appDir and server-side components being introduced, a new solution for integrating react-query is required. I've contributed the following NextJS 13 with SSR Example in response to vercel/next.js#41936.

I believe a similar code example would make a strong addition to https://tanstack.com/query/v4/docs/guides/ssr. Given that it relies on experimental features, it would need to come with a caveat that it could break in a future non-major release.

Welcome any feedback on my implementation. I'm not sure if queryClient.clear() on line 17 of Provider.tsx accomplishes anything here or if having queryClient being garbage-collected after going out of scope is sufficient.

[TkDodo]

I'm not sure if queryClient.clear() on line 17 of Provider.tsx accomplishes anything here or if having queryClient being garbage-collected after going out of scope is sufficient.

It's not needed, it can be garbage collected because we don't start the timers anymore on the server since v4.

---

the thing is, I don't think we need hydration with fetches located at component level. One approach is to fetch on the server, then pass the data down to a the client component with initialData. It will also work nicely on type-level because data will always be defined. It's very similar to what react-router v6.4 loaders are doing.

The concept is described here on twitter: https://twitter.com/lukemorales/status/1585506850421854210

I think it's pretty good and until we have figured out how hydration will work (if at all) in next13, this should be the approach we document.

[TkDodo]

cc @lukemorales

[efilion]

Certainly the more elegant approach. Will move forward with @lukemorales' approach until if and when I run into a real need for hydration.

Adding it to the official docs would be greatly appreciated :)

[TkDodo]

Would you want to contribute to the docs?

[efilion]

Sure thing. I'll start drafting an edit. 👍

[premier213]

have to handle fetching data such as after clicking the button?

[2manoj1]

I did POC with Nextjs 13 app dir. Have a look please POC example

[lockinmarv]

How does that work when you fetch data in multiple places, like in the layout or nested page? Do I need to wrap the content with every time?

[2manoj1]

You can use client components and query hooks get data on components. For example check pokemon details component https://github.com/2manoj1/poc-nextjs-13-react-query/blob/main/src/app/components/PokemonDetails.jsx

[2manoj1]

Multiple places get data by query hooks. De dupe and cache concept taken care data fetching

[igortas]

@2manoj1 getQueryData returns undefined, after prefetch, in server components. How is possible to get RQ cache data in server components?

[2manoj1]

Can you share code will look the code

[efilion]

With getStaticProps and getServerSideProps having been retired in Next.js 13's appDir and server-side components being introduced, a new solution for integrating react-query is required. I've contributed the following NextJS 13 with SSR Example in response to vercel/next.js#41936.

I believe a similar code example would make a strong addition to https://tanstack.com/query/v4/docs/guides/ssr. Given that it relies on experimental features, it would need to come with a caveat that it could break in a future non-major release.

Welcome any feedback on my implementation. I'm not sure if queryClient.clear() on line 17 of Provider.tsx accomplishes anything here or if having queryClient being garbage-collected after going out of scope is sufficient.

[TkDodo]

I'm not sure if queryClient.clear() on line 17 of Provider.tsx accomplishes anything here or if having queryClient being garbage-collected after going out of scope is sufficient.

It's not needed, it can be garbage collected because we don't start the timers anymore on the server since v4.

---

the thing is, I don't think we need hydration with fetches located at component level. One approach is to fetch on the server, then pass the data down to a the client component with initialData. It will also work nicely on type-level because data will always be defined. It's very similar to what react-router v6.4 loaders are doing.

The concept is described here on twitter: https://twitter.com/lukemorales/status/1585506850421854210

I think it's pretty good and until we have figured out how hydration will work (if at all) in next13, this should be the approach we document.

[TkDodo]

cc @lukemorales

[efilion]

Certainly the more elegant approach. Will move forward with @lukemorales' approach until if and when I run into a real need for hydration.

Adding it to the official docs would be greatly appreciated :)

[TkDodo]

Would you want to contribute to the docs?

[efilion]

Sure thing. I'll start drafting an edit. 👍

[premier213]

have to handle fetching data such as after clicking the button?

[2manoj1]

I did POC with Nextjs 13 app dir. Have a look please POC example

[lockinmarv]

How does that work when you fetch data in multiple places, like in the layout or nested page? Do I need to wrap the content with every time?

[2manoj1]

You can use client components and query hooks get data on components. For example check pokemon details component https://github.com/2manoj1/poc-nextjs-13-react-query/blob/main/src/app/components/PokemonDetails.jsx

[2manoj1]

Multiple places get data by query hooks. De dupe and cache concept taken care data fetching

[igortas]

@2manoj1 getQueryData returns undefined, after prefetch, in server components. How is possible to get RQ cache data in server components?

[2manoj1]

Can you share code will look the code

[efilion]

With getStaticProps and getServerSideProps having been retired in Next.js 13's appDir and server-side components being introduced, a new solution for integrating react-query is required. I've contributed the following NextJS 13 with SSR Example in response to vercel/next.js#41936.

I believe a similar code example would make a strong addition to https://tanstack.com/query/v4/docs/guides/ssr. Given that it relies on experimental features, it would need to come with a caveat that it could break in a future non-major release.

Welcome any feedback on my implementation. I'm not sure if queryClient.clear() on line 17 of Provider.tsx accomplishes anything here or if having queryClient being garbage-collected after going out of scope is sufficient.

[TkDodo]

I'm not sure if queryClient.clear() on line 17 of Provider.tsx accomplishes anything here or if having queryClient being garbage-collected after going out of scope is sufficient.

It's not needed, it can be garbage collected because we don't start the timers anymore on the server since v4.

---

the thing is, I don't think we need hydration with fetches located at component level. One approach is to fetch on the server, then pass the data down to a the client component with initialData. It will also work nicely on type-level because data will always be defined. It's very similar to what react-router v6.4 loaders are doing.

The concept is described here on twitter: https://twitter.com/lukemorales/status/1585506850421854210

I think it's pretty good and until we have figured out how hydration will work (if at all) in next13, this should be the approach we document.

[TkDodo]

cc @lukemorales

[efilion]

Certainly the more elegant approach. Will move forward with @lukemorales' approach until if and when I run into a real need for hydration.

Adding it to the official docs would be greatly appreciated :)

[TkDodo]

Would you want to contribute to the docs?

[efilion]

Sure thing. I'll start drafting an edit. 👍

[premier213]

have to handle fetching data such as after clicking the button?

[2manoj1]

I did POC with Nextjs 13 app dir. Have a look please POC example

[lockinmarv]

How does that work when you fetch data in multiple places, like in the layout or nested page? Do I need to wrap the content with every time?

[2manoj1]

You can use client components and query hooks get data on components. For example check pokemon details component https://github.com/2manoj1/poc-nextjs-13-react-query/blob/main/src/app/components/PokemonDetails.jsx

[2manoj1]

Multiple places get data by query hooks. De dupe and cache concept taken care data fetching

[igortas]

@2manoj1 getQueryData returns undefined, after prefetch, in server components. How is possible to get RQ cache data in server components?

[2manoj1]

Can you share code will look the code

[efilion]

With getStaticProps and getServerSideProps having been retired in Next.js 13's appDir and server-side components being introduced, a new solution for integrating react-query is required. I've contributed the following NextJS 13 with SSR Example in response to vercel/next.js#41936.

I believe a similar code example would make a strong addition to https://tanstack.com/query/v4/docs/guides/ssr. Given that it relies on experimental features, it would need to come with a caveat that it could break in a future non-major release.

Welcome any feedback on my implementation. I'm not sure if queryClient.clear() on line 17 of Provider.tsx accomplishes anything here or if having queryClient being garbage-collected after going out of scope is sufficient.

[TkDodo]

I'm not sure if queryClient.clear() on line 17 of Provider.tsx accomplishes anything here or if having queryClient being garbage-collected after going out of scope is sufficient.

It's not needed, it can be garbage collected because we don't start the timers anymore on the server since v4.

---

the thing is, I don't think we need hydration with fetches located at component level. One approach is to fetch on the server, then pass the data down to a the client component with initialData. It will also work nicely on type-level because data will always be defined. It's very similar to what react-router v6.4 loaders are doing.

The concept is described here on twitter: https://twitter.com/lukemorales/status/1585506850421854210

I think it's pretty good and until we have figured out how hydration will work (if at all) in next13, this should be the approach we document.

[TkDodo]

cc @lukemorales

[efilion]

Certainly the more elegant approach. Will move forward with @lukemorales' approach until if and when I run into a real need for hydration.

Adding it to the official docs would be greatly appreciated :)

[TkDodo]

Would you want to contribute to the docs?

[efilion]

Sure thing. I'll start drafting an edit. 👍

[premier213]

have to handle fetching data such as after clicking the button?

[2manoj1]

I did POC with Nextjs 13 app dir. Have a look please POC example

[lockinmarv]

How does that work when you fetch data in multiple places, like in the layout or nested page? Do I need to wrap the content with every time?

[2manoj1]

You can use client components and query hooks get data on components. For example check pokemon details component https://github.com/2manoj1/poc-nextjs-13-react-query/blob/main/src/app/components/PokemonDetails.jsx

[2manoj1]

Multiple places get data by query hooks. De dupe and cache concept taken care data fetching

[igortas]

@2manoj1 getQueryData returns undefined, after prefetch, in server components. How is possible to get RQ cache data in server components?

[2manoj1]

Can you share code will look the code

[efilion]

With getStaticProps and getServerSideProps having been retired in Next.js 13's appDir and server-side components being introduced, a new solution for integrating react-query is required. I've contributed the following NextJS 13 with SSR Example in response to vercel/next.js#41936.

I believe a similar code example would make a strong addition to https://tanstack.com/query/v4/docs/guides/ssr. Given that it relies on experimental features, it would need to come with a caveat that it could break in a future non-major release.

Welcome any feedback on my implementation. I'm not sure if queryClient.clear() on line 17 of Provider.tsx accomplishes anything here or if having queryClient being garbage-collected after going out of scope is sufficient.

[TkDodo]

I'm not sure if queryClient.clear() on line 17 of Provider.tsx accomplishes anything here or if having queryClient being garbage-collected after going out of scope is sufficient.

It's not needed, it can be garbage collected because we don't start the timers anymore on the server since v4.

---

the thing is, I don't think we need hydration with fetches located at component level. One approach is to fetch on the server, then pass the data down to a the client component with initialData. It will also work nicely on type-level because data will always be defined. It's very similar to what react-router v6.4 loaders are doing.

The concept is described here on twitter: https://twitter.com/lukemorales/status/1585506850421854210

I think it's pretty good and until we have figured out how hydration will work (if at all) in next13, this should be the approach we document.

[TkDodo]

cc @lukemorales

[efilion]

Certainly the more elegant approach. Will move forward with @lukemorales' approach until if and when I run into a real need for hydration.

Adding it to the official docs would be greatly appreciated :)

[TkDodo]

Would you want to contribute to the docs?

[efilion]

Sure thing. I'll start drafting an edit. 👍

[premier213]

have to handle fetching data such as after clicking the button?

[2manoj1]

I did POC with Nextjs 13 app dir. Have a look please POC example

[lockinmarv]

How does that work when you fetch data in multiple places, like in the layout or nested page? Do I need to wrap the content with every time?

[2manoj1]

You can use client components and query hooks get data on components. For example check pokemon details component https://github.com/2manoj1/poc-nextjs-13-react-query/blob/main/src/app/components/PokemonDetails.jsx

[2manoj1]

Multiple places get data by query hooks. De dupe and cache concept taken care data fetching

[igortas]

@2manoj1 getQueryData returns undefined, after prefetch, in server components. How is possible to get RQ cache data in server components?

[2manoj1]

Can you share code will look the code

[efilion]

With getStaticProps and getServerSideProps having been retired in Next.js 13's appDir and server-side components being introduced, a new solution for integrating react-query is required. I've contributed the following NextJS 13 with SSR Example in response to vercel/next.js#41936.

I believe a similar code example would make a strong addition to https://tanstack.com/query/v4/docs/guides/ssr. Given that it relies on experimental features, it would need to come with a caveat that it could break in a future non-major release.

Welcome any feedback on my implementation. I'm not sure if queryClient.clear() on line 17 of Provider.tsx accomplishes anything here or if having queryClient being garbage-collected after going out of scope is sufficient.

[TkDodo]

I'm not sure if queryClient.clear() on line 17 of Provider.tsx accomplishes anything here or if having queryClient being garbage-collected after going out of scope is sufficient.

It's not needed, it can be garbage collected because we don't start the timers anymore on the server since v4.

---

the thing is, I don't think we need hydration with fetches located at component level. One approach is to fetch on the server, then pass the data down to a the client component with initialData. It will also work nicely on type-level because data will always be defined. It's very similar to what react-router v6.4 loaders are doing.

The concept is described here on twitter: https://twitter.com/lukemorales/status/1585506850421854210

I think it's pretty good and until we have figured out how hydration will work (if at all) in next13, this should be the approach we document.

[TkDodo]

cc @lukemorales

[efilion]

Certainly the more elegant approach. Will move forward with @lukemorales' approach until if and when I run into a real need for hydration.

Adding it to the official docs would be greatly appreciated :)

[TkDodo]

Would you want to contribute to the docs?

[efilion]

Sure thing. I'll start drafting an edit. 👍

[premier213]

have to handle fetching data such as after clicking the button?

[2manoj1]

I did POC with Nextjs 13 app dir. Have a look please POC example

[lockinmarv]

How does that work when you fetch data in multiple places, like in the layout or nested page? Do I need to wrap the content with every time?

[2manoj1]

You can use client components and query hooks get data on components. For example check pokemon details component https://github.com/2manoj1/poc-nextjs-13-react-query/blob/main/src/app/components/PokemonDetails.jsx

[2manoj1]

Multiple places get data by query hooks. De dupe and cache concept taken care data fetching

[igortas]

@2manoj1 getQueryData returns undefined, after prefetch, in server components. How is possible to get RQ cache data in server components?

[2manoj1]

Can you share code will look the code

[efilion]

With getStaticProps and getServerSideProps having been retired in Next.js 13's appDir and server-side components being introduced, a new solution for integrating react-query is required. I've contributed the following NextJS 13 with SSR Example in response to vercel/next.js#41936.

I believe a similar code example would make a strong addition to https://tanstack.com/query/v4/docs/guides/ssr. Given that it relies on experimental features, it would need to come with a caveat that it could break in a future non-major release.

Welcome any feedback on my implementation. I'm not sure if queryClient.clear() on line 17 of Provider.tsx accomplishes anything here or if having queryClient being garbage-collected after going out of scope is sufficient.

[TkDodo]

I'm not sure if queryClient.clear() on line 17 of Provider.tsx accomplishes anything here or if having queryClient being garbage-collected after going out of scope is sufficient.

It's not needed, it can be garbage collected because we don't start the timers anymore on the server since v4.

---

the thing is, I don't think we need hydration with fetches located at component level. One approach is to fetch on the server, then pass the data down to a the client component with initialData. It will also work nicely on type-level because data will always be defined. It's very similar to what react-router v6.4 loaders are doing.

The concept is described here on twitter: https://twitter.com/lukemorales/status/1585506850421854210

I think it's pretty good and until we have figured out how hydration will work (if at all) in next13, this should be the approach we document.

[TkDodo]

cc @lukemorales

[efilion]

Certainly the more elegant approach. Will move forward with @lukemorales' approach until if and when I run into a real need for hydration.

Adding it to the official docs would be greatly appreciated :)

[TkDodo]

Would you want to contribute to the docs?

[efilion]

Sure thing. I'll start drafting an edit. 👍

[premier213]

have to handle fetching data such as after clicking the button?

[2manoj1]

I did POC with Nextjs 13 app dir. Have a look please POC example

[lockinmarv]

How does that work when you fetch data in multiple places, like in the layout or nested page? Do I need to wrap the content with every time?

[2manoj1]

You can use client components and query hooks get data on components. For example check pokemon details component https://github.com/2manoj1/poc-nextjs-13-react-query/blob/main/src/app/components/PokemonDetails.jsx

[2manoj1]

Multiple places get data by query hooks. De dupe and cache concept taken care data fetching

[igortas]

@2manoj1 getQueryData returns undefined, after prefetch, in server components. How is possible to get RQ cache data in server components?

[2manoj1]

Can you share code will look the code

[efilion]

With getStaticProps and getServerSideProps having been retired in Next.js 13's appDir and server-side components being introduced, a new solution for integrating react-query is required. I've contributed the following NextJS 13 with SSR Example in response to vercel/next.js#41936.

I believe a similar code example would make a strong addition to https://tanstack.com/query/v4/docs/guides/ssr. Given that it relies on experimental features, it would need to come with a caveat that it could break in a future non-major release.

Welcome any feedback on my implementation. I'm not sure if queryClient.clear() on line 17 of Provider.tsx accomplishes anything here or if having queryClient being garbage-collected after going out of scope is sufficient.

[TkDodo]

I'm not sure if queryClient.clear() on line 17 of Provider.tsx accomplishes anything here or if having queryClient being garbage-collected after going out of scope is sufficient.

It's not needed, it can be garbage collected because we don't start the timers anymore on the server since v4.

---

the thing is, I don't think we need hydration with fetches located at component level. One approach is to fetch on the server, then pass the data down to a the client component with initialData. It will also work nicely on type-level because data will always be defined. It's very similar to what react-router v6.4 loaders are doing.

The concept is described here on twitter: https://twitter.com/lukemorales/status/1585506850421854210

I think it's pretty good and until we have figured out how hydration will work (if at all) in next13, this should be the approach we document.

[TkDodo]

cc @lukemorales

[efilion]

Certainly the more elegant approach. Will move forward with @lukemorales' approach until if and when I run into a real need for hydration.

Adding it to the official docs would be greatly appreciated :)

[TkDodo]

Would you want to contribute to the docs?

[efilion]

Sure thing. I'll start drafting an edit. 👍

[premier213]

have to handle fetching data such as after clicking the button?

[2manoj1]

I did POC with Nextjs 13 app dir. Have a look please POC example

[lockinmarv]

How does that work when you fetch data in multiple places, like in the layout or nested page? Do I need to wrap the content with every time?

[2manoj1]

You can use client components and query hooks get data on components. For example check pokemon details component https://github.com/2manoj1/poc-nextjs-13-react-query/blob/main/src/app/components/PokemonDetails.jsx

[2manoj1]

Multiple places get data by query hooks. De dupe and cache concept taken care data fetching

[igortas]

@2manoj1 getQueryData returns undefined, after prefetch, in server components. How is possible to get RQ cache data in server components?

[2manoj1]

Can you share code will look the code