I'm a front end developer, use Reactjs a lot, heard of nextjs for a long time, but never use it.
Finally I maintained a nextjs based project.
Yes, I know they create Server Component/Server-Side Render
But, everywhere are server components, it means, you can't use useState, useEffect and such client-function at all.
It means, nextjs turns the SPA to refresh page.
It means, you can't use console.log() or debugger; easily in a component, otherwise you have to turn the component into a client-component.
A lot of nextjs pages call async/await request, do they optimized these actions, combined many request into one? I don't know, but I don't feel pages loaded quicker than before.
And when I counter a real situation:
* props.dataSource pass into
* component(use client), processed props.dataSource (React.useState(data.slice(0, defaultShowItems)))
* props.dataSource updated
* useState() return an old value
I have to give the component a fresh new key every time to fix this problem.
That's awkward, I heard motto, nextjs re-invent PHP,
now I really feel it.
You can pass client components to server components, and have access to hooks & effects. See
- https://nextjs.org/docs/app/building-your-application/render...
- https://nextjs.org/docs/app/building-your-application/render...
You are also not required to use server components with NextJS and you can use it as a better overall DX and simplifications like directory (convention) based routing