useEffect with appRouter. Is it right way ?
Answered
Japanese flying squid posted this in #help-forum
Japanese flying squidOP
On load , my page A makes a call to rest service to get data. renders it as a list.
There is a create button on the page , which takes u to new page B, where u create data hit submit and return to A.
When u return to A, A shows an updated list.
The only way I could make this work with appRouter is to make the call to retrieve data in a useEffect. and useState to update a variable that is redendered.
Without useEffect the page would not refresh . router.refresh did not work.
For NextJs13.2+ and Approuter, is this the right way to do or is there a better way ?
I found the docs on data fetching / redering with the server side/client stuff + cacheing quite confusing.
There is a create button on the page , which takes u to new page B, where u create data hit submit and return to A.
When u return to A, A shows an updated list.
The only way I could make this work with appRouter is to make the call to retrieve data in a useEffect. and useState to update a variable that is redendered.
Without useEffect the page would not refresh . router.refresh did not work.
For NextJs13.2+ and Approuter, is this the right way to do or is there a better way ?
I found the docs on data fetching / redering with the server side/client stuff + cacheing quite confusing.
Answered by Japanese flying squid
server side. It is an api route. Setting cache: no-store in the fetch fixed the issue. thanks
9 Replies
@Japanese flying squid On load , my page A makes a call to rest service to get data. renders it as a list.
There is a create button on the page , which takes u to new page B, where u create data hit submit and return to A.
When u return to A, A shows an updated list.
The only way I could make this work with appRouter is to make the call to retrieve data in a useEffect. and useState to update a variable that is redendered.
Without useEffect the page would not refresh . router.refresh did not work.
For NextJs13.2+ and Approuter, is this the right way to do or is there a better way ?
I found the docs on data fetching / redering with the server side/client stuff + cacheing quite confusing.
you could do this with server component and server action like this
// page-a/page.tsx
export default async function PageA() {
const data = await fetch('url').then(res => res.json())
// render the list
return data.map(l => <div key={l.name}>{l.name}</div>)
}
// page-b/page.tsx
import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation";
export default function PageB() {
async function action(formData: FormData) {
const name = formData.get('name')
// create the record
await db.insert({name})
revalidatePath('/page-a')
redirect('/page-a')
}
return (
<form action={action}>
<input name="name" />
<button>Submit</button>
</form>
)
}@Ray you could do this with server component and server action like this
ts
// page-a/page.tsx
export default async function PageA() {
const data = await fetch('url').then(res => res.json())
// render the list
return data.map(l => <div key={l.name}>{l.name}</div>)
}
// page-b/page.tsx
import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation";
export default function PageB() {
async function action(formData: FormData) {
const name = formData.get('name')
// create the record
await db.insert({name})
revalidatePath('/page-a')
redirect('/page-a')
}
return (
<form action={action}>
<input name="name" />
<button>Submit</button>
</form>
)
}
Japanese flying squidOP
Tried it but the revalidatePath does not refresh the data. redirect however does its job.
Also I am finding this pushing of logic-- that we expect to run in the browser -- to the server and NextJs does to its magic to make it work rather non-intuitive.
Also I am finding this pushing of logic-- that we expect to run in the browser -- to the server and NextJs does to its magic to make it work rather non-intuitive.
Japanese flying squidOP
I can see my backend receive an extra request due to the revalidate, but the new item is not displaced until i refresh the page from the browser
Japanese flying squidOP
Yes page-a. It needs to display the list with the new item in it
are you fetching the data on server side or client side on page-a?
look like you hit the router cache if you need to refresh the page to see the updated data
Japanese flying squidOP
server side. It is an api route. Setting cache: no-store in the fetch fixed the issue. thanks
Answer