Keep prerender component tree the same as regular render tree #7760

Tobbe · 2023-03-05T14:43:48Z

React 18's tree diffing works differently compared to React 17.

This PR changes the logic so that we use the same code for both pre-render and regular rendering to a much greater extent.

Fixes #7757

replay-io · 2023-03-05T14:56:11Z

16 replays were recorded for 37d7acb.

0 Failed

16 Passed

requireAuth graphql checks

    ```
    locator.waitFor: Target closed
    =========================== logs ===========================
    waiting for locator('.rw-form-error-title').locator('text=You don\'t have permission to do that') to be visible
    ============================================================
    ```
  </ol>
</details>
<li><a href=https://app.replay.io/recording/0243e34c-0efd-436a-888a-02c9cbd8863d>useAuth hook, auth redirects checks</a></li>
<li><a href=https://app.replay.io/recording/14a95fa2-3535-47ef-9309-2e9e235e3353>Check that a specific blog post is prerendered</a></li>
<li><a href=https://app.replay.io/recording/14d89f4d-9d6c-4452-8815-f73658d0f438>Check that about is prerendered</a></li>
<li><a href=https://app.replay.io/recording/56b06fc9-9395-4cda-b7e5-151925865331>Check that homepage is prerendered</a></li>
<li><a href=https://app.replay.io/recording/e22fed4c-a556-4ef1-9753-12f97bb2dc49>Check that meta-tags are rendering the correct dynamic data</a></li>
<li><a href=https://app.replay.io/recording/4b69396d-3837-4f53-a6f3-768068b63303>Check that you can navigate from home page to specific blog post</a></li>
<li><a href=https://app.replay.io/recording/f8d4f5e3-a149-44c5-8732-37697445e11d>Waterfall prerendering (nested cells)</a></li>
<li><a href=https://app.replay.io/recording/9ce38e85-922c-4491-b14d-e59903d77205>RBAC: Admin user should be able to delete contacts</a></li>
<li><a href=https://app.replay.io/recording/35346d1f-854b-4cb9-8d18-a89da2ac27f5>RBAC: Should not be able to delete contact as non-admin user</a></li>
<li><a href=https://app.replay.io/recording/eba4e661-5f56-4592-971c-70821b00fb17>Smoke test with dev server</a></li>
<li><a href=https://app.replay.io/recording/2aa697e1-1cfc-439c-a8a2-d22887a2d1cd>Smoke test with rw serve</a></li>
<li><a href=https://app.replay.io/recording/588cc350-8e2b-47b3-bd5f-5b415e2119bc>Loads Cell mocks when Cell is nested in another story</a></li>
<li><a href=https://app.replay.io/recording/2d80a6eb-dc93-4162-8648-047f92faeaf2>Loads Cell Stories</a></li>
<li><a href=https://app.replay.io/recording/be932815-87f4-48d7-aa6d-0b4f59a4ba9d>Loads MDX Stories</a></li>
<li><a href=https://app.replay.io/recording/a2138776-4f5e-43dd-a04f-84ff4c949a9d>Mocks current user, and updates UI while dev server is running</a></li>

View test run on Replay ↗︎

…e-prerender-react18

…dwood into tobbe-prerender-react18

…ct18

- update babel plugin to add webpack chunk name - remove server markup - revert hydrate logic - insert chunk in prerendered html file

jtoar · 2023-03-21T00:59:53Z

Next steps: make sure tests still account for #4948 while refactoring.

packages/core/config/webpack.common.js

virtuoushub · 2023-03-23T10:05:59Z

packages/web/src/components/createCell.tsx

-  return NamedCell
+  return (props: CellProps) => {
+    return (
+      <Suspense fallback={<div>Loading suspense...</div>}>


🙌🏻

Do we want to allow for a custom fallback?

I need to do some more investigations and experiments, but my initial impression is that the fallback isn't used by React in the very specific circumstances we're using it here

I think there is value in custom fallbacks.

Looking at the <Suspence> docs, there are examples with varying degrees of specificity ( e.g. BigSpinner vs AlbumsGlimmer )

+1 to custom fallbacks. But I think Tobbe is correct that the fallback actually be used for this specific case.

If we're incorrect, we can add/improve in follow on.

I just did this to confirm:

That console.log never shows up in the browser console. We only use <Suspense> to tell React to not try to match the contents of cells when rehydrating prerendered pages. (This behavior is new in renderToString for React 18)

When we switch/upgrade to renderToPipeableStream we'll have to revisit this

From the new React docs https://react.dev/reference/react/Suspense#displaying-a-fallback-while-content-is-loading (scroll down to Note)

Only Suspense-enabled data sources will activate the Suspense component. They include:

Data fetching with Suspense-enabled frameworks like Relay and Next.js

Lazy-loading component code with lazy

Apollo Client is not yet Suspense-enabled, so rendering cells will not cause <Suspense> to suspend, and therefore the fallback will never be rendered.

Suspense (and SSR) support in Apollo is tracked here: apollographql/apollo-client#10231

FYI we've got suspense support in our latest 3.8.0-alpha.x releases, so you can test it out in a beta/alpha here if it helps. Let us know how we (the Apollo Client team) can support you!

Just as a status:
We've got some changes that will make useSuspenseQuery work with useDeferredValue and startTransition. We will be exploring how to get streaming cache updates working in SSR coming up next, so I'm hopeful that once you've got renderToPipeableStream working, you'll be able to hook it up to the primitive we export from the library to get it working.

Hope that helps!

cc @dac09 @KrisCoulson

Great to hear @jerelmiller! This PR isn't blocked. But other priority work in progress will need Apollo Client support. We'll loop back as needed. Thanks.

…dwood into tobbe-prerender-react18

Tobbe added 2 commits March 5, 2023 15:30

Keep prerender component tree the same as regular render tree

f10c14c

Comment loader() type cast

7637e66

Tobbe added the release:fix This PR is a fix label Mar 5, 2023

Tobbe added 7 commits March 5, 2023 18:30

Update test project

aea1e20

Merge branch 'main' into tobbe-prerender-react18

6156553

Merge branch 'main' of https://github.com/redwoodjs/redwood into tobb…

5aad591

…e-prerender-react18

Merge branch 'tobbe-prerender-react18' of https://github.com/Tobbe/re…

e162c67

…dwood into tobbe-prerender-react18

renderedLoadingState

8857aff

Merge branch 'main' into tobbe-prerender-react18

08e820c

syncLoader

52b6166

Tobbe force-pushed the tobbe-prerender-react18 branch from 4d0eff9 to 52b6166 Compare March 18, 2023 11:44

Tobbe added 2 commits March 18, 2023 15:14

No renderLoadingState

72c8c03

set state depending on prerender

92c510c

Tobbe mentioned this pull request Mar 18, 2023

Updated test-project #7861

Merged

Tobbe and others added 5 commits March 19, 2023 10:43

Merge remote-tracking branch 'upstream/main' into tobbe-prerender-rea…

4ca028f

…ct18

Fix unprerendered pages

500c38e

Use require.resolveWeak

2f7dfcd

save progress

df90de2

working changes

ff6d583

- update babel plugin to add webpack chunk name - remove server markup - revert hydrate logic - insert chunk in prerendered html file

Tobbe and others added 4 commits March 21, 2023 12:00

clean up from late-night pairing session

7810557

set with prerender prop

cc15e43

rename syncLoader to prerenderLoader

3a0b331

update comment

6074c6d

Tobbe commented Mar 21, 2023

View reviewed changes

packages/core/config/webpack.common.js Show resolved Hide resolved

jtoar added 3 commits March 22, 2023 13:43

add wip codemod

384ca95

finish codemod

a6f701c

add codemod test

ff9a874

virtuoushub reviewed Mar 23, 2023

View reviewed changes

Tobbe and others added 13 commits March 25, 2023 08:05

Merge branch 'main' into tobbe-prerender-react18

1905796

Update unit tests to match new page loaders

6e3b7eb

Update index.html in test project fixture

cb3b4e1

active-route-loader: fix initial load

25c23ac

Only use prerenderLoader in production

d5e3287

Detect prerendered pages

4aae773

Merge branch 'main' into tobbe-prerender-react18

215d898

revert changes to analyzeRouterTree

14e9af8

Don't try to load separate chunk for /

0c63eee

Merge branch 'tobbe-prerender-react18' of https://github.com/Tobbe/re…

18187b0

…dwood into tobbe-prerender-react18

createCell: Suspense null fallback

bd518b6

Merge branch 'main' into tobbe-prerender-react18

37d7acb

Merge branch 'main' into tobbe-prerender-react18

a33042e

jtoar approved these changes Mar 27, 2023

View reviewed changes

jtoar merged commit 0063292 into redwoodjs:main Mar 27, 2023

redwoodjs-bot bot added this to the next-release milestone Mar 27, 2023

jtoar added release:breaking This PR is a breaking change and removed release:fix This PR is a fix labels Mar 27, 2023

jtoar modified the milestones: next-release, v5.0.0 Mar 27, 2023

Tobbe deleted the tobbe-prerender-react18 branch April 10, 2023 06:37

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Keep prerender component tree the same as regular render tree #7760

Keep prerender component tree the same as regular render tree #7760

Tobbe commented Mar 5, 2023 •

edited

Loading

replay-io bot commented Mar 5, 2023 •

edited

Loading

jtoar commented Mar 21, 2023

virtuoushub Mar 23, 2023

Tobbe Mar 23, 2023

virtuoushub Mar 26, 2023

thedavidprice Mar 26, 2023 •

edited

Loading

Tobbe Mar 26, 2023

Tobbe Mar 26, 2023

Tobbe Mar 27, 2023

jerelmiller Mar 27, 2023

thedavidprice Mar 27, 2023

Keep prerender component tree the same as regular render tree #7760

Keep prerender component tree the same as regular render tree #7760

Conversation

Tobbe commented Mar 5, 2023 • edited Loading

replay-io bot commented Mar 5, 2023 • edited Loading

jtoar commented Mar 21, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

thedavidprice Mar 26, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Tobbe commented Mar 5, 2023 •

edited

Loading

replay-io bot commented Mar 5, 2023 •

edited

Loading

thedavidprice Mar 26, 2023 •

edited

Loading