Server rendering for homepage, units and topics listing pages #1822
Conversation
Merge branch 'main' into jk/5919-prefetch-mechanism
jonkafton
changed the title
jonkafton
force-pushed
the
jk/5920-prefetch-homepage
branch
from
e59621f to
11d76cf
Compare
jonkafton
changed the title
There was a problem hiding this comment.
I just noticed one commented out mock in a test below that I think should be removed, but I was also wondering about the add to learning path / userlist buttons. #1808 has been merged, but what's left to be done on that before randomization can be turned back on? Is it just the buttons themselves that need to be updated to use the new API endpoints?
| channel_url: `${window.location.origin}/units/${unit.code}`, | ||
| }) | ||
| }) | ||
| // units.forEach((unit) => { |
There was a problem hiding this comment.
Now that this page is using the channel list endpoint to get the details, this is meant to be removed right?
There was a problem hiding this comment.
Yes, missed that - removed.
This has to be done to make use of the new membership endpoint - https://github.com/mitodl/hq/issues/6032. The idea is that the learning resources will be fetched on the server and we'll query for memberships on the client to update the user lists. With that we can turn off the learning resource cache invalidation added with this PR to refetch for the memberships, so can reinstate the randomization. |
jonkafton
force-pushed
the
jk/5920-prefetch-homepage
branch
from
c92adf0 to
f4b10d6
Compare
* Warn on API calls during initial render not prefetched * Full prefetch for homepage (commented) * Prefetch utility * Check for queries prefetched that are not needed during render and warn * No need to stringify * Replace useQuery overrides with decoupled cache check (wip) * Observer count for unnecessary prefetch warnings * Remove useQuery override * Test prefetch warnings * Remove inadvertent/unnecessary diff * Remove comments * Prefetch homepage. Invalidate learning resource cache items * Remove comment * Update comment * Temp remove featured resource list shuffle * Remove unused * Prefetch calls * Prefetch topics page * Rename key factory re-exports * Units page prefetch * Single request for all unit channel details * Update unit listing page tests * Page arg types * Optional route params * Remove comment * Remove unused * Remove comment
What are the relevant tickets?
Closes:
Next.js: Homepage: Prefetch API calls #5920
Next.js: Topics, Units and Channels pages: Prefetch API calls #6036
Description (What does it do?)
Homepage
Makes API calls needed to render homepage learning resources on the server so that these prerender:
These are all learning resources, however the learning resource endpoints return user specific data, namely the user lists each resource may be a member of. This PR #1808 provides a new endpoint to query for user list relationships independently of the learning resources endpoints, enabling us to querying them publicly for server rendering.
There is the follow up task to implement these endpoints in the frontend so that the server rendered learning resources in this PR are then furnished with their user list memberships in the browser.
In the meantime, this PR fetches the public learning resources on the server, then invalidates the cache so that they are refetched on the client complete with the user specific data. This required commenting out the featured list shuffle behavior to prevent the content flicker as the client rendered resource cards replace the server rendered version. This will be reinstated with this task: https://github.com/mitodl/hq/issues/6032.
Unit Listing page /units
Updates to make a single call
/api/v0/channels/?channel_type=unit, replacing calls to each channel detail page in the unit cards. Prefetches channels list and count by unit.Topics Listing page /topics
Prefetches topics list and counts by topic.
How can this be tested?
These routes should server render all public content without any prefetch mismatch warnings in the browser console:
Additional Context
Also adds reusable server PageParams type and cleans up the api key factory imports.