'Is Next.js app an SPA or single page application?
Plain React apps are called SPA because they have only one html page which is the index.html. But that is not the case for next.js. So can we call a next.js app a single page application?
Solution 1:[1]
Good question.
Normally we don't call an engine SPA or not. For instance, React can do SPA, but it can do non-SPA work as well. The same applies to the NextJS as well.
Just to follow your dictionary. NextJS by default is not SPA based due to its hybrid nature, because it publishes each page as a separate entry point for everything under /pages. Of course if you only have one page index.js, then technically it's a SPA again. I guess it depends on how you structure your pages.
Solution 2:[2]
Yes, we can call nextjs a SPA even if you create many pages, but to keep it as such you should use client side transitions (no <a> tag).
First of all, SPA = Single Page Application
I assume the question intend SPA vs MPA (Multi Page Application) The answer is Nextjs can do both depending if you use next link https://nextjs.org/docs/api-reference/next/link
That will perform a client side transition without reloading the page from the server, assuming your page is static of coure and does not use getServerSideProps(). You can check that by watching the Network in Chrome debug tools. How that works ? On first page load, all pages get loaded in js inside the vdom and any page can get injected into your browser dom fromthe client js not from the server.
To give it an MPA behavior, you can also link a relative page with a simple html anchor tag <a>, that will reload the page from the server, as the a tag uses no js for that. What could be the advantage of that ? keeping code clean from next maybe, and if you mess the react vdom (which you shouldn't) you're sure to get a fresh page again. A disadvantage of that is that you loaded all content in js initialy anyway, so reloading with anchors is a waste of resources and load time.
Note using PWA (Progressive Web App) is also an option to optimise the user experience, and it is also supported by nextjs see https://nextjs.org/docs/faq and https://github.com/vercel/next.js/tree/canary/examples/progressive-web-app
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | windmaomao |
| Solution 2 |