some details about SWR in nextjs

If your page contains frequently updating data, and you don’t need to pre-render the data, SWR is a perfect fit and no special setup needed: just import useSWR and use the hook inside any components that use the data.

Here’s how it works:

First, immediately show the page without data. You can show loading states for missing data. Then, fetch the data on the client side and display it when ready. This approach works well for user dashboard pages, for example. Because a dashboard is a private, user-specific page, SEO is not relevant and the page doesn’t need to be pre-rendered. The data is frequently updated, which requires request-time data fetching.