How useContent
works
On server-side render, useContent
immediately returns the data in cache for the content source. The system uses the first server-side render pass to gather all the content source requests and the second to make the data available.
On client-side render, useContent
first returns the data that is in cache. If your component rendered on the server-side, then it should have some data in cache. If the data is not expired, the system makes no additional render. If the data is missing (if the server-side render failed or if the component is rendered on only the client-side) or expired, the useContent
hook makes a request to get fresh data. If that request succeeds, the component calling the useContent
hook re-renders with the new data. A functional component always re-renders when the data from a hook changes. (You can experiment with useContext
for a pure React example).
In the event of a fetch failure, if you don't catch the useContent
failures, the React component throws an exception, which stops the render of anything in that component. You can handle error scenarios of useContent
and make your feature component not render anything or render a fallback content or a placeholder.
Following React's rule of hooks, you should never conditionally call a hook. If you don't want to use the data from the hook, you can call useContent
and then ignore the results when you're rendering on server-side. If you prefer to avoid the call completely, you could pass a null value into the source for the useContent
.