Skip to content

refactor: /change-password for dynamicIO #2185

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

Draft
wants to merge 1 commit into
base: canary
Choose a base branch
from

Conversation

migueloller
Copy link
Collaborator

What/Why?

This is a WIP to try and understand what it would take to adopt dynamicIO. In this particular case, we want the page to be dynamic since it's fundamental nature is to rely on URL search params. There's some weird ergonomics due to how dynamicIO works, though:

  • Had to create a loading.tsx that returns null to have a Suspense boundary since the component accesses searchParams. Using use cache isn't an option since we are accessing a dynamic API (searchParams).
  • The redirect done in the component isn't reflected in the HTTP status code because it's handled client-side due to streaming.
    • Ideally we'd be able to disable dynamic IO for this page and do vanilla dynamic rendering. Unfortunately we can't use the dynamic route segment config because it's not compatible with dynamicIO.
    • We could move the redirect to middleware but splitting up the business logic like this feels icky. Furthermore, we'd still need to validate the search params are present and handle that accordingly either by rendering an error or throwing one and providing an error.tsx (the former is probably more appropriate so we can render something specific—error.tsx is more intended for unexpected errors since it masks error details).

Testing

This is still WIP, so testing is TODO.

Copy link

changeset-bot bot commented Apr 2, 2025

🦋 Changeset detected

Latest commit: 105d11a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@bigcommerce/catalyst-core Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link

vercel bot commented Apr 2, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
catalyst-canary ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 2, 2025 1:31pm
4 Skipped Deployments
Name Status Preview Comments Updated (UTC)
catalyst ⬜️ Ignored (Inspect) Apr 2, 2025 1:31pm
catalyst-au ⬜️ Ignored (Inspect) Visit Preview Apr 2, 2025 1:31pm
catalyst-soul ⬜️ Ignored (Inspect) Visit Preview Apr 2, 2025 1:31pm
catalyst-uk ⬜️ Ignored (Inspect) Visit Preview Apr 2, 2025 1:31pm

Comment on lines +1 to +3
export default function Loading() {
return null;
}
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not great. I'd prefer if the server simply blocked while the dynamic page is rendered instead of immediately returning an empty loading state followed by streaming in the dynamic page later.

Comment on lines 33 to 35
if (!customerEntityId || !token) {
return redirect({ href: '/login', locale });
}
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This could be moved to middleware but then we'd be splitting business logic in two places, which is not great.

Copy link
Contributor

github-actions bot commented Apr 2, 2025

⚡️🏠 Lighthouse report

Lighthouse ran against https://catalyst-canary-4a7ig63f8-bigcommerce-platform.vercel.app

🖥️ Desktop

We ran Lighthouse against the changes on a desktop and produced this report. Here's the summary:

Category Score
🟢 Performance 99
🟢 Accessibility 92
🟠 Best practices 78
🟠 SEO 82

📱 Mobile

We ran Lighthouse against the changes on a mobile and produced this report. Here's the summary:

Category Score
🟠 Performance 86
🟢 Accessibility 92
🟠 Best practices 78
🟠 SEO 85

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant