Skip to content
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

feat(rsc-streaming): Integrating RSC builds with Streaming and Client side hydration #10031

Merged
merged 106 commits into from
Mar 4, 2024

Conversation

dac09
Copy link
Collaborator

@dac09 dac09 commented Feb 19, 2024

Integrates streaming ssr builds with RSC. Note in it's current form when RSC is enabled, the pages are not SSR'd. Working that out now.

We now generate three different builds:

  • RSC client (which is different to regular client!)
  • Server (for streaming)
  • RSC (for worker)

I've also changed the build process to output into their respective folders.

👉 The RSC build process no longer works in isolation, and will use existing Vite configuration. This means Tailwind etc. will work (even if its inefficient how the CSS is loaded). See changes here: dac09#262

Outstanding:

  • Unhardcode paths
  • Inject webpack shims for RSC via streaming server or vite plugin
  • Understand (but not implement if complicated) - what happens when you have page imports
  • Can we get it working without needing index.html?
  • Make e2e tests pass again! RSC+Streaming+Client works but the regular client-side/SPA does not 🤣

What will be out of scope in this PR
✋ combining all the various vite settings into the rw-vite-plugin
I managed to do this, and in order to help myself get further with the e2e failures we're seeing I merged it into this branch.

✋ automatically generating the entries file
Possible, but we can hold off for now until we better understand the quirks of the build process.

Make it import rsc "serve" for rsc client builds
Clean up and make notes on rscBuild process
* 'main' of github.com:redwoodjs/redwood: (22 commits)
  fix: Handle static assets on the `rw-serve-fe` (redwoodjs#10018)
  fix(server): fix env var loading in `createServer` (redwoodjs#10021)
  fix(deps): remove react types packages from `@redwoodjs/testing` dependencies (redwoodjs#10020)
  chore(release): add back `update-package-versions` task (redwoodjs#10017)
  chore(renovate): Disable for experimental apollo package (redwoodjs#10016)
  RSC: server cells lowercase data function (redwoodjs#10015)
  fix(RSC/SSR): pass CLI options through to apiServerHandler (redwoodjs#10012)
  7.0 RC: Remove hardcoded check for `session.id` (redwoodjs#10013)
  Spelling fix in what-is-redwood.md (redwoodjs#10011)
  Typos in realtime.md (redwoodjs#10010)
  RSC: Server cell smoke tests (redwoodjs#10008)
  RSC: test-project EmptyUser 'use client' cell (redwoodjs#10007)
  RSC: babel-plugin-redwood-cell remove redundant reset (redwoodjs#10006)
  chore(deps): Upgrade to yarn v4.1.0 (redwoodjs#10002)
  fix(docs): Spelling of `data-migrate` command (redwoodjs#10003)
  docs: add aliases fo `type-check` command (redwoodjs#10004)
  RSC: Insert 'use client' in scaffolded components (redwoodjs#9998)
  fix(telemetry): Fix 'destroy' spelling (redwoodjs#10000)
  chore(jsdocs): Fix jsdoc formatting for hover help (redwoodjs#9999)
  bug: Update setupHandler.ts firebase version (redwoodjs#9997)
  ...
* 'main' of github.com:redwoodjs/redwood:
  RSC: Add MultiCellPage to test fixture (redwoodjs#10029)
  RSC chore(tests): Add links to scaffolds in test fixture (redwoodjs#10028)
  docs(metadata): Fix spelling/typos (redwoodjs#10027)
  chore(release): link to previous releases and upgrade guides in the changelog (redwoodjs#10026)
  chore(ci): add changelog check to ci (redwoodjs#9989)
  fix(realtime): update logic for including sseLink (redwoodjs#10025)
  chore(k6 tests): update entry point (redwoodjs#10024)
  feat(server): add docs on the server file (redwoodjs#10019)
  fix(types): Fix TS type in createServer.test.ts (redwoodjs#10023)
@dac09 dac09 added this to the RSC milestone Feb 19, 2024
@dac09 dac09 added the release:feature This PR introduces a new feature label Feb 19, 2024
Add tests for routes auto-loader
* 'main' of github.com:redwoodjs/redwood:
  RSC: No basePath arg to serve() (redwoodjs#10030)
Move webpack shims into streaming server (and remove vite plugin)
…sc-build

* 'feat/rsc-build' of github.com:dac09/redwood:
  docs: Removes warning within Mailer documentation about Studio being experimental (redwoodjs#10033)
  docs: Within describeScenario documentation, change optimisation to use American English (redwoodjs#10032)
Stop passing around paths unnecessarily!
…sc-build

* 'feat/rsc-build' of github.com:dac09/redwood: (119 commits)
  chore(deps): update dependency @playwright/test to v1.41.2 (redwoodjs#10040)
  chore(crwa): update version in e2e test (redwoodjs#10037)
  chore(ci): update yarn.lock for changelog action (redwoodjs#10039)
  chore: bump TSTyche (redwoodjs#10036)
  chore(changelog): add v7 (redwoodjs#10038)
  v7.0.0
  Version docs to 7.0
  chore(docs): align v6 docs with the next branch (redwoodjs#10034)
  chore(docs): align v6 docs with the next branch (redwoodjs#10034)
  fix(server): prefix port/host with api, fix logging (redwoodjs#10035)
  fix(server): prefix port/host with api, fix logging (redwoodjs#10035)
  docs: Removes warning within Mailer documentation about Studio being experimental (redwoodjs#10033)
  docs: Within describeScenario documentation, change optimisation to use American English (redwoodjs#10032)
  docs(metadata): Fix spelling/typos (redwoodjs#10027)
  chore(release): link to previous releases and upgrade guides in the changelog (redwoodjs#10026)
  chore(ci): add changelog check to ci (redwoodjs#9989)
  fix(realtime): update logic for including sseLink (redwoodjs#10025)
  chore(k6 tests): update entry point (redwoodjs#10024)
  feat(server): add docs on the server file (redwoodjs#10019)
  fix(types): Fix TS type in createServer.test.ts (redwoodjs#10023)
  ...
@dac09 dac09 marked this pull request as ready for review February 20, 2024 11:05
@dac09 dac09 requested a review from Tobbe February 20, 2024 11:05
@dac09
Copy link
Collaborator Author

dac09 commented Feb 20, 2024

Ready for review!

@Tobbe the smoke test in RSC is still going to fail - wanted you to see the failure first, before I change the test. I think it's ok, just renders the suspense comments.

@Tobbe
Copy link
Member

Tobbe commented Feb 21, 2024

the smoke test in RSC is still going to fail - wanted you to see the failure first, before I change the test. I think it's ok, just renders the suspense comments.

Thanks for highlighting this for me. I agree, this is ok. Just change to innerText instead of innerHTML and it should pass again 👍

Tobbe and others added 13 commits March 3, 2024 22:26
…sc-build

* 'feat/rsc-build' of github.com:dac09/redwood: (32 commits)
  RSC: ensureProcessDirWeb() (redwoodjs#10108)
  Comment on ensureProcessDirWeb()
  Remove redundant cwd check
  RSC: Extract webpack shims into their own file (redwoodjs#10107)
  RSC: Remove completed TODO comment
  RSC: Babel react plugin not needed for analyze phase (redwoodjs#10106)
  Remove handled TODO
  RSC: runFeServer: wrap RSC code with `if (rscEnabled)` (redwoodjs#10105)
  Only comment about swc in one place
  Remove duplicated comment (exists further down)
  RSC: Update comments, naming etc based on Danny's input (redwoodjs#10104)
  RSC: Rename to buildRscClientAndServer (redwoodjs#10103)
  RSC: Rename to rscBuildForServer, and tweak some comments (redwoodjs#10102)
  SSR: Extract buildForStreamingServer function (redwoodjs#10099)
  chore(unit-tests): Silence middleware error logging (redwoodjs#10097)
  Iterate on `.env` files: make the behavior override (redwoodjs#10094)
  RSC: smoke-tests: Compare text, not html (redwoodjs#10098)
  paths.ts: Move helper to esm section
  More comment formatting
  getMergedConfig comment format
  ...
Undo path aliasing in Vite settings
@dac09
Copy link
Collaborator Author

dac09 commented Mar 4, 2024

Headsup ⚠️ Last round of changes actually rows us backwards:

  • I've essentially disabled SSR for pages (in renderFromRscServer) - this is until we figure out how to render RSCs on first render.
  • Note: OG Tags, etc. won't be rendered either, unless you use a routehook too

So while the build processes are integrated, the final result is not. Once you enable RSC you get:
✅ Client side rendering
❌ Server side rendering (only partially)
✅ Server component rendering after client has been hydrated

For streaming ssr:
✅ Client side rendering
✅ Full SSR
❌ Server component rendering

@dac09 dac09 changed the title feat(rsc-streaming): Integrating RSC with Streaming and Client side hydration feat(rsc-streaming): Integrating RSC builds with Streaming and Client side hydration Mar 4, 2024
@Tobbe Tobbe enabled auto-merge (squash) March 4, 2024 16:15
@Tobbe Tobbe merged commit 0b1b4c6 into redwoodjs:main Mar 4, 2024
41 checks passed
@dac09 dac09 deleted the feat/rsc-build branch March 4, 2024 17:20
dac09 added a commit that referenced this pull request Mar 6, 2024
…support

* 'main' of github.com:redwoodjs/redwood: (30 commits)
  fix(scenario): Make sure to cleanup even if test fails (#10112)
  Update babel monorepo to v7.24.0 (#10090)
  Update storybook monorepo to v7.6.17 (#10089)
  Update dependency @apollo/client to v3.9.5 (#10087)
  fix(serve): Allow periods in most paths (#10114)
  feat(rsc-streaming): Integrating RSC builds with Streaming and Client side hydration (#10031)
  chore(style): getDefaultViteConfig source format (#10111)
  chore(refactor): vite - extract default vite config (#10110)
  chore(comment): cli index FIXME comment about ugly big red box
  RSC: rscBuildAnalyze: Start at web/src/ (#10109)
  RSC: ensureProcessDirWeb() (#10108)
  RSC: Extract webpack shims into their own file (#10107)
  RSC: Remove completed TODO comment
  RSC: Babel react plugin not needed for analyze phase (#10106)
  RSC: runFeServer: wrap RSC code with `if (rscEnabled)` (#10105)
  RSC: Update comments, naming etc based on Danny's input (#10104)
  RSC: Rename to buildRscClientAndServer (#10103)
  RSC: Rename to rscBuildForServer, and tweak some comments (#10102)
  SSR: Extract buildForStreamingServer function (#10099)
  chore(unit-tests): Silence middleware error logging (#10097)
  ...
@Josh-Walker-GM Josh-Walker-GM modified the milestones: RSC, v8.0.0 Sep 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
release:feature This PR introduces a new feature
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants