phdi
phdi copied to clipboard
Boban/suspense
PULL REQUEST
General Summary
- Use "use client" only where necessary, like when we are using browser and interactivity specific functionality. This allows us to default to server side rendering which increase performance.
- Read more about Server components and Client components
Explanation of most of the changes.
- Install
jsdomto handle the TableToJson functionality on the server. - Install
dompurifyto clean any potential misconfigured HTML that was passed to us in miscellaneous notes. Since this section is now rendered on the server there are warnings about how invalid HTML is being used and it looked incorrect.(this is fixed with dompurify, just wanted to show the example with it).
- Fix
buildto include static assets - Fix
startto call the standalone server.js that is generated - Utilize
error.tsxandloading.tsxthat are built in to show error and loading states. - Move
formatTablesToJsonto its own file since it should only be used for server side rendering with the use ofjsdom. - Move metrics into a new component that returns an empty div. This seemed to be the best place to put
- Remove api calls to fetch data and instead use server actions
Additional Information
Performance on Main:
Performance now:
React-uswds shows a warning. This change did not introduce this
Occasionally, a warning will appear that aria-describedby did not match between the server and the client.
Checklist
- [ ] If this code affects the other scrum team, have they been notified? (In Slack, as reviewers, etc.)