Media not rendering on first try, only after a refresh
Hey, first of all, this is my first complex Next.js project, so it is very probable that I am doing something stupid.
So the problem is that, on the homepage of my app I have a video (1) and an image (2) that render only after a refresh, they won't show the first time the website is accessed. Both of them are stored locally in the /public folder. I have attached a before and an after-refresh screenshot with the problem.
You can test this live here: https://moodvie.edwardcs.com/
Index page source code: https://github.com/edwardsavin/moodvie/blob/main/src/pages/index.tsx
Component with the video source code: https://github.com/edwardsavin/moodvie/blob/main/src/components/presentation.tsx
Component with the image source code:
https://github.com/edwardsavin/moodvie/blob/main/src/components/main-footer.tsx
I searched and tried everything that I could found on Google but with no luck at all. Once again, it is very probable that I am doing something very wrong since I am not super familiar with Next and React. Thank you so much for reading this, if you have any idea of how to fix this bug don't hesitate to write here, I will try every single thing.
So the problem is that, on the homepage of my app I have a video (1) and an image (2) that render only after a refresh, they won't show the first time the website is accessed. Both of them are stored locally in the /public folder. I have attached a before and an after-refresh screenshot with the problem.
You can test this live here: https://moodvie.edwardcs.com/
Index page source code: https://github.com/edwardsavin/moodvie/blob/main/src/pages/index.tsx
Component with the video source code: https://github.com/edwardsavin/moodvie/blob/main/src/components/presentation.tsx
Component with the image source code:
https://github.com/edwardsavin/moodvie/blob/main/src/components/main-footer.tsx
I searched and tried everything that I could found on Google but with no luck at all. Once again, it is very probable that I am doing something very wrong since I am not super familiar with Next and React. Thank you so much for reading this, if you have any idea of how to fix this bug don't hesitate to write here, I will try every single thing.
Moodvie - Get movie recommendations based on your mood and music taste.
GitHub
Get movie recommendations based on your mood and music taste. - moodvie/index.tsx at main · edwardsavin/moodvie
GitHub
Get movie recommendations based on your mood and music taste. - moodvie/presentation.tsx at main · edwardsavin/moodvie
GitHub
Get movie recommendations based on your mood and music taste. - moodvie/main-footer.tsx at main · edwardsavin/moodvie
Was this page helpful?
