- The JSON placeholder API is good, however the image placeholder API it draws on is very unreliable for images
- Should use some placeholder-ing whilst the image is being loaded, and error checking to validate that an image has loaded or not, and then deal with the bad case.
- Performane in the SSR is to be considered for large datasets as it does a single pass render looping through the whole dataset, the route url specs should include query params to filter data
- To balance best of both worlds, SSR render the feed, then pull in the secondary data (comments) on the user's device.
- SEO bits; can add further tags and information to make the pages attractive to search engines. SSR is an important part of that, so perhaps SSR the comments too.
- Tests; need to add more with different data, should we really be using jsonplaceholder?
- Having strugs with getting this version of next/react going in playwright
- MUI is a good system to work with, very flexible and does all the functions we need out of the box.
- We need LOOOTS more tests, as this is a data-centric system and we are pulling from an uncontrolled external API:
- we need SSR test to make sure the data is always the correct structure for our frontend, or to fail gracefully if it is not.
- We need to test the screen renderer with many edge cases incase the data payload is unexpectedly e.g large
- Pagination and caching should be employed at our SSR level as likely we need to pay for the API requests.
- API calls from browser are currently directly to the 3rd party data source, this is BAAAD practise, we should be calling an API route which separately calls the external API for us, and ideally caches the data.
- We lose ability to control the API resposne to the browser, CORS headers, any authentication etc
- Obvioulsy there is zero authentication or request monitoring here, the API isn't shielded and hasn't anything like CSRF, CORS, etc.
- The version of React, Types, Next in this seem to be incompatible at the moment so further work needs to be done to ratify them
- With
"@types/react": "18.0.1",we can run theyarn devserver however when transpiling onbuildwe have an annoying missing children error. - With
"@types/react": "18.3.2",we can develop with correct types however it will not build or restart the dev server.
- With
- I've left it on
18.0.1so you can run it withyarn dev