ReactJS(NextJs) Rendering Pattern　~Streaming with Suspense~

SSR mechanism and Limitations SSR Mechanism Fetching data on server Firstly, data retrieval is necessary because each request requires a different response. Generating a HTML HTML is generated with the fetched data. Loading on client The HTML, CSS and JavaScript are sent from the server. Hydration by React This involves adding JavaScript code, such as EventHandlers, to a static HTML. This makes interactive features such as useEffect and useState function. SSR Limitations A crucial issue is that all executions run sequentially. This process is required every time a page is updated. For example, consider the following page: A section of recommended products (needs to fetch data). A footer (does not need to fetch data). On this page, you have to wait for the static component, such as the footer, to be re-rendered until the next data fetch is complete. Solution by Streaming You can address the issue of SSR in Next.js through parallel execution. This means that components that don't require