-
Notifications
You must be signed in to change notification settings - Fork 648
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Update to latest Server Components conventions #62
Conversation
Co-authored-by: Matt Carroll <mattca@fb.com>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
v nice
|
||
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).) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🤘
@@ -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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Add server-only to credentials.js?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe both? I was thinking it’s too easy to miss outside src folder.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think they’re also imported from a seed script.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.js
and.client.js
extensions.'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.