Overview
In frontend development, you might often hear about SPA, SSR, SSG, and ISR.
With the rise of Next.js, terms like SSG and ISR have become particularly common.
In this article, I’ve summarized the mechanisms behind each of these approaches.
SPA
SPA stands for Single Page Application. As the name suggests, it refers to a method of building web applications on a single HTML page.
When a user navigates to the target web application in their browser, the HTML file and JavaScript files are loaded all at once. After that, only the required data is fetched via API during navigation, without reloading any new HTML. The JavaScript handles smooth transitions between screens.
Advantages
- From the user's perspective, the screen transitions seamlessly, leading to a better UX as there’s no delay due to page loading.
- SPA allows complete separation of frontend and backend processes, enabling teams to work on them independently.
Disadvantages
- It takes longer to load initially, which can be a downside for SEO.
- Since most processing happens on the client side, it increases the risk of vulnerabilities being exploited.
- Personally, I find implementing third-party OAuth authentication, like Google Login, to be quite challenging.
Frameworks
Popular frameworks for implementing SPAs include React, Angular, and Vue.js.
If your primary goal is to build a web application that prioritizes performance from the user’s perspective and SEO is not a concern, considering an SPA might be a good choice.
SSR
SSR stands for Server Side Rendering. It generates HTML on the server side during page navigation and returns the rendered HTML to the browser.
This approach is completely different from SPA, which performs rendering on the client side.
Advantages
- Compared to SPAs, SSR has faster initial rendering, which is beneficial from an SEO perspective.
- Since most processing occurs on the server side, it’s not affected by the client’s PC specs or JavaScript environment (except for client-side features).
Disadvantages
- It’s challenging to separate the implementation of frontend and backend, leading to higher skill requirements for developers.
- If you utilize caching for pages, careful management of cache control is necessary.
Frameworks
Frameworks like Node.js and Next.js are commonly used for SSR.
Interestingly, frameworks like Rails and PHP can also be considered SSR, although they are often referred to as MPA (Multi-Page Applications).
The distinction seems to be whether JavaScript is used for processing or not. (Apologies if this interpretation is incorrect.)
SSG
SSG stands for Static Site Generation. It refers to the approach of pre-generating static websites.
At first glance, you might think this simply involves creating HTML files in advance, but it’s slightly different.
Similar to SSR, after implementing rendering logic for pages, you perform a build process. During this build, data is fetched from a database, pages are rendered into HTML, and the resulting static files are placed on a web server.
Advantages
For instance, let’s say your company homepage has an employee introduction page, and the information is stored in a database.
If the employee information is updated only once a year, rendering the page through SSR each time a user navigates to it would be inefficient.
By fetching data from the database during the build process and generating a static page, you can achieve faster performance than SSR.
Disadvantages
SSG is not suitable for generating pages with real-time data updates.
It’s most effective when generating pages from data that is updated infrequently.
Frameworks
Next.js is a popular framework for implementing SSG.
If you’ve noticed that Next.js is also used for SSR, you’re correct!
In fact, Next.js allows you to mix SSR and SSG on a per-page basis. This flexibility is one of the reasons why Next.js is so widely favored.
ISR
ISR stands for Incremental Static Regeneration. It extends SSG by periodically regenerating static pages.
Advantages
With SSG, you need to rebuild the site every time the data changes.
However, ISR automates periodic builds, making the maintenance of web applications much easier.
Disadvantages
While pages are updated periodically, ISR is still not ideal for generating pages with real-time data. Currently, Vercel is the most practical deployment platform for using ISR.
I’ll write an article about deploying on AWS once I have more information.
Frameworksワーク
Next.js is also used for implementing ISR.
Conclusion
In this article, I explained SPA, SSR, SSG, and ISR.
As you can see, Next.js is an incredibly versatile framework, so I highly recommend keeping up with it!