feat: lazy loading huge main page components #449
Conversation
src/components/IntersectionLoadComponent/IntersectionLoadComponent.tsx
Outdated
Show resolved
Hide resolved
|
It is also worth increasing the height of the block during 
|
|
Let's add a border so that the block looks more like the final one after loading. Before: After: |
Have not met this in local development. I think this is because of absence of css file import in LazyComponent (only in component itself). Added this import. Hope it works. |
fixed |
| }; | ||
|
|
||
| const getComponentProps = async () => { | ||
| const contributors = await Api.instance.fetchAllContributorsWithCache(); |
There was a problem hiding this comment.
We can't call Api.instance.fetchAllContributorsWithCache() from client code, we don't have github credentials on client side and will get rate limiting errors:
There was a problem hiding this comment.
I added Next.js server-side endpoint at src/pages/api/contributors.ts and a fetchAllContributorsFromClient method to the Api that calls api/contributors
This seems to have solved the issue
src/pages/api/contributors.ts
Outdated
| return; | ||
| } | ||
|
|
||
| const contributors = await Api.instance.fetchAllContributorsWithCache(); |
There was a problem hiding this comment.
@stepanenkoxx take a look plz, as far as I remember, the cache inside Api.instance didn't work with API routes, but now in dev and prod modes everything looks okay.
There was a problem hiding this comment.
As I remember, the problem was that Next worked in such a way that the API routes and pages had different instances of Api class
So cache in API routes and cache in pages works but it's different cache, so it will add some more actual github api calls
I will check it now
There was a problem hiding this comment.
yes, i checked and there are really different instances
so contributors cache warmup in /health route doesn't make sense now
don't know, maybe we must call Api class methods only in api route "layer" and make api routes for all methods
and call this routes from server and client
src/api/index.ts
Outdated
| async fetchAllContributorsFromClient(): Promise<Contributor[]> { | ||
| const res = await fetch('api/contributors'); | ||
| return (await res.json()).contributors; | ||
| } | ||
|
|
There was a problem hiding this comment.
Maybe we should separate classes here for ServerApi and ClientApi?
To avoid confusion and not call server methods from the client
Yaros1ove
force-pushed
the
lazy-load-main-page-components
branch
from
1aa6fc0 to
f7ed75f
Compare
Added HOC to lazy load component when it reaches viewport
Made all examples tabs and contributors list lazy loaded on the main page to optimize perfomance