This project was created to compare the final experience of use SSG, SSR or ISR in our websites, for that, I created a fake server with 5 seconds of delay in each request using json-server package.

$ npm install

$ npm run start:server

Building the project you should see the effect of Static Site Generation (SSG) by the delay of 5 seconds on each request to fake server so your project's build time will be as slow as more pages you was rendering by SSG.

$ npm run build

$ npm run start

http:https://localhost:3000

Static Generation describes the process of compiling and rendering a website or app at build time. The output is a bunch of static files, including the HTML file itself and assets like JavaScript and CSS.

Pros:

• Cheap
• Security
• Speed
• Scalability
• No need of a backend server

Cons:

• No user management
• Increase the build time

Server-Side Rendering describes the process of pre-rendering the page on the server, which is then generated upon each user request.

Pros:

• Great for SEO
• Quck initial access

Cons:

• No user management
• Higher latency
• Server cost
• Vulnerability
• Slower page transitions

Server-Side Rendering describes the process of generate static pages at runtime (on-demand) instead of at build-time.

Pros:

• All of SGG
• Faster builds
• Higher Cache Hit Rate

Cons:

• User will not see the most up-to-date version
• If you rollback your site to a different deploy, your page will stay existing, because of cache