SSG vs SSR

Many people may have some understanding of SSG and SSR rendering, but they might not be very clear about their rendering principles and usage scenarios. This article will provide a detailed explanation of their differences and scenarios.

Incidentally, CSR rendering is currently the most widely used. Its rendering method is quite different from SSG and SSR. CSR is done on the client side (browser). During the initial load, the server only sends a basic HTML framework and JavaScript files. The page content is dynamically loaded and rendered by JavaScript through API requests on the client side.

Static Site Generation (SSG)

Definition: SSG generates HTML files at build time. These files are stored on the server and are served directly from the server or CDN to users without additional server processing.

Characteristics:

• Performance: Since the pages are pre-generated, they can be delivered directly via CDN, resulting in very fast load times.
• Security: There is no dynamic content generation, reducing the risk of server-side code execution.
• Scalability: Can easily handle a large number of requests because the content is static and can be distributed via CDN.
• Content Updates: Requires rebuilding and redeploying to update content, not suitable for frequently updated content.

Application Scenarios:

• Blogs
• Documentation sites
• Personal websites
• Product showcase pages

Advantages:
Fast speed, low server load (low server cost), SEO

This technical blog uses SSG rendering. You can see the first screen rendering speed is very fast.

Disadvantages:
The pages requested by users are the same, content cannot be loaded on demand, pages are fixed, and scalability is poor.

Server-Side Rendering (SSR)

Definition: SSR generates HTML files at runtime when a user requests a page. The server processes the request and generates the final HTML content, which is then returned to the user.

Characteristics:

• Dynamic Content: Suitable for pages that need real-time data, can generate different content based on user requests.
• SEO: Friendly to search engines because search engine crawlers can directly get the full HTML page.
• Initial Load Time: May be slightly slower because the server needs to generate the page when the user requests it.
• Complexity: Requires maintenance of server-side code and handling of dynamic content generation.

Advantages:
Flexible and fast, SEO, fast first screen rendering

Next.js's official website uses SSR rendering, you can see it is very fast and much more flexible.

Disadvantages:
More complex technology, higher development pressure, higher server overhead.

Application Scenarios:

• E-commerce websites
• News websites
• Personalized content for users
• Real-time data applications

Comparison

Summary

• SSG: Suitable for content that is relatively static and does not need frequent updates, offering excellent performance and scalability.
• SSR: Suitable for websites that need dynamic content and personalized user experiences, providing better SEO support and real-time data delivery.

In fact, SSR can cover most of the advantages of SSG, but SSR has higher technical difficulty and costs, so it is used less frequently.

Choosing which rendering method depends on your website needs and performance requirements. However, for personal websites and developers with limited budgets, it is more recommended to use SSG rendering. To enhance flexibility, you can combine CSR and SSG to complete the website build.