Next.js SSR example #1596
Next.js SSR example #1596
Conversation
There was a problem hiding this comment.
Left a few comments.
Don't you want to use either https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props or https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-props here? Right now I don't see that any data is being cached during server rendering.
EDIT: Oh I see... this is RSC stuff
| import { unstable_noStore as noStore } from "next/cache" | ||
|
|
||
| const Page = async () => { | ||
| noStore() |
There was a problem hiding this comment.
why (again) no server rendering?
There was a problem hiding this comment.
This turns static rendering on the server off. Was the best working solution I've found.
balegas
force-pushed
the
balegas/ssr-example
branch
from
64f3703
to
2d933e8
Compare
✅ Deploy Preview for electric-next ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
|
||
| // Hack to avoid caching behavior in Next.js | ||
| // should work just with {cache: `no-store`} | ||
| const fetchClient: typeof fetch = (...args) => { |
There was a problem hiding this comment.
Still need to do this hack, despite nextjs documentation. Maybe someone has any idea
| const Page = async () => { | ||
| noStore() | ||
|
|
||
| return <Home shapes={{ items: getSerializedShape(itemShape) }} /> |
There was a problem hiding this comment.
When I came back to this example, my naive intention was to use the shapeCache in the React hook to be able to preload a shape in the server and then the client component transparently would load the shape from that same cache (which would have been hydrated in the client).
I didn't find any way of passing any state between server-side rendered page.tsx and the client component Home.tsx that would not use component properties, which is not so transparent. I think this code is quite clean, but I'm not sure if it's possible to do best.
I didn't want to investigate using external storage for that, since I considered that would be out of scope of the example.
There was a problem hiding this comment.
I wonder how useful this pattern is.
Generally, we can sync data that is available for low latency / edge SSR.
Pushing that data to the client as serialised JSON in the html source seems … a bit old school and bloats the page that you’re trying to accelerate.
With default SSR you have to make sure the data is exactly the same when rendering on the server and the client. Unless we can somehow work around that.
I wonder if it’s better to have the server render and then have the client take over once the data is synced into the client. But only if we can make the pattern work?
There was a problem hiding this comment.
The client receives the rendered page (with the items) with the response.
That JSON object is used to hydrate the shape when the component renders in the client, which will allow it to resume shape sync at the position that the server was, instead of starting from scratch.
Items example using SSR.
Load the entire shape on the server and send it down to the client, so that the client gets the initial state of the shape on first response and can resume replication from the tip of the shape stream.
First time with nextjs, I still don't know how some things work. I suppose this is good forn an example. I'm happy to receive feedback from nextjs experts :D