Update to latest Server Components conventions #62
Conversation
gaearon
requested review from
sebmarkbage,
poteto,
acdlite,
josephsavona and
sophiebits
Co-authored-by: Matt Carroll <[email protected]>
|
|
||
| You can watch a [recorded walkthrough of all these demo points here](https://youtu.be/La4agIEgoNg?t=600) (with timestamps). | ||
| You can watch a [recorded walkthrough of all these demo points here](https://youtu.be/La4agIEgoNg?t=600) with timestamps. (**Note:** this recording is slightly outdated because the repository has been updated to match the [latest conventions](https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components).) |
| @@ -6,7 +6,10 @@ | |||
| * | |||
| */ | |||
|
|
|||
| import {Pool} from 'react-pg'; | |||
| // Error early if this is accidentally imported on the client. | |||
| import 'server-only'; | |||
There was a problem hiding this comment.
Add server-only to credentials.js?
There was a problem hiding this comment.
Maybe both? I was thinking it’s too easy to miss outside src folder.
There was a problem hiding this comment.
I think they’re also imported from a seed script.
There was a problem hiding this comment.
Both is fine but it seems like the whole point is you stick it in your secret file.
Any suggestions on where to find examples to incorporate this missing bit? Would it be as simple as applying normal SSR patterns? |
It’s more involved because you need to consume the RSC stream in SSR, create HTML stream from it, and then combine them to ensure the initial render’s RSC output is inlined into HTML. Have a look here for an example. https://github.com/unstubbable/mfng/blob/a0df63c893d3fe50c424914cc2237b3b55e48dc1/packages/core/src/server/create-html-stream.tsx#L19 |
|
Just the repo I've been looking intently for. Thanks for the link @gaearon!! |
This brings the demo up-to-date with the latest versions of the corresponding RFCs:
Changes in this pull request:
.server.jsand.client.jsextensions.'use client'directive.import 'server-only'poison-pills server-only code (we do this indb.js).react-fetch,react-pg, etc.async/await.src/framework.This still isn't a production-ready setup because it doesn't include crucial parts like SSR. It also doesn't include first-class mutation support, which will be coming later as an RFC.