Next.js Rendering Strategies:

1. SSG (Static Site Generation)

This strategy generates HTML files on build, solidifying their structure. This means that data can only be updated when the files gets built/compiled again.

• Pros: Allows for very quick rendering as the HTML and CSS is prebuilt, better SEO as there is no confusion to SEO scrapers.

• Cons: Static sites only allow for data and structure changes on build.

2. CSR (Client Side Rendering)

This strategy builds HTML on the client end. This is possible because the server sends a HTML shell with bundled JS. This JS is then run on the client end, generating structure.

• Pros: Dynamic updating on client end, allowing for large structure updates, data can update immediately.

• Cons: Large load times as there is a large JS bundle and the client computer needs to generate sites, and poor SEO as crawlers might only see empty content, or JS code.

3. SSR (Server Side Rendering)

SSR allows for HTML to be generated on each request. Meaning that if there is content which frequently needs updating, such as a shopping platform items, they will update each on each request.

• Pros: Allows for good SEO as HTML gets prerendered, allowing for easy crawling, request based data updating, and makes it possible to alter page structure as needed for different requests.

• Cons: Increased server load.

4. Hydration Process (SSR, SSG)

For SSR and SSG there is an additional rendering process which is called hydration. Hydration simply is as follows:

1. Server sends pre-rendered HTML
2. JS bundle downloads in the Background
3. React "hydrates" static HTML by attaching event listeners and state
4. Page is interactive

This is great because it allows users to see your site quicker, instead of waiting on the JS to load.